代碼對比
版本 A：單一 if-else 含複合條件
function show(a) {
if (displayNone || srcBottom) { // OR 條件
display = 'block'; src = 'top.png';
} else {
display = 'none'; src = 'bottom.png';
}
}
版本 B：兩個獨立 if-else
function show(a) {
if (displayNone) { display = 'block'; } else { display = 'none'; }
if (srcBottom) { src = 'top.png'; } else { src = 'bottom.png'; }
}
真值表分析 (初始狀態：display=block, src=bottom.png)
| displayNone | srcBottom | 版本 A 結果 | 版本 B 結果 |
|---|
| F | F | else 分支 → display=none, src=bottom | if1:F→none, if2:F→bottom → 同 |
| F | T | if 分支 → display=block, src=top | if1:F→none, if2:T→top → **display 不同** |
| T | F | if 分支 → display=block, src=top | if1:T→block, if2:F→bottom → **src 不同** |
| T | T | if 分支 → display=block, src=top | if1:T→block, if2:T→top → 同 |
結論
- **版本 A**：任一條件為真即觸發「展開/顯示頂部箭頭」邏輯，兩者**強綁定**。
- **版本 B**：顯示狀態與圖片來源**獨立控制**，互不影響。
- 若需求為「摺疊面板：展開時箭頭向上，摺疊時箭頭向下」，**版本 A 符合直覺**，版本 B 會產生「面板關閉但箭頭向上」等異常狀態。
最佳實踐：狀態機思維
const STATES = { OPEN: { display: 'block', src: 'top.png' },
CLOSED: { display: 'none', src: 'bottom.png' } };
function toggle(a) {
const el = document.getElementById('A'+a);
const img = document.getElementById('pic'+a);
const isOpen = el.style.display !== 'none';
const next = isOpen ? STATES.CLOSED : STATES.OPEN;
el.style.display = next.display;
img.src = next.src;
}
- 集中管理狀態，消除條件分支錯誤。
- 易於擴展動畫、無障礙屬性 (ARIA)。
