HTML、CSS、JS 各司其職的原則 ｜ 青訓營筆記
theme: channing-cyan
這是我參與「第五屆青訓營 」伴學筆記創作活動的第 3 天
介紹
我們知道，一個網頁通常分為三層，JS 負責行為，CSS 負責表現，HTML 負責結構。在寫頁面時，遵循 HTML、CSS、JS 各司其職的原則，各自實現對應的功能，這樣的好處不僅便於後續程式碼的維護擴充套件，而且可以做到程式碼簡潔、可讀性高。
示例
比如我們要實現一個深夜/白天模式切換的需求。點選"太陽🌞"圖示時，切換為深夜模式，頁面變成深色背景、淺色字型、圖示變為"月亮🌜"。點選"月亮🌜"圖示時，切換為白天模式，頁面變成淺色背景、深色字型、圖示變為"太陽🌞"。
版本一
我們在按鈕上面繫結一個點選事件，根據按鈕的 innerHTML 判斷當前模式，然後設定 body.style，再設定按鈕的 innerHTML。
js
btn.addEventListener('click', (e) => {
const body = document.body;
if(e.target.innerHTML === '🌞') {
body.style.backgroundColor = 'black';
body.style.color = 'white';
e.target.innerHTML = '🌜';
} else {
body.style.backgroundColor = 'white';
body.style.color = 'black';
e.target.innerHTML = '🌞';
}
});
jcode
這樣效果雖然實現了，但我們思考以下幾點： 1. 對於不瞭解需求的人，閱讀這段程式碼是否可以直接理解"按鈕"點選的含義？ 2. 使用了 JS 去修改頁面的樣式，也就是說 JS 做了 CSS 該做的事，如果再增加一個白底藍字的模式，當 JS 程式碼很多的時候就變得維護困難。
版本二
按鈕圖示通過 CSS 偽元素 ::after 實現，同時增加一個 CSS night 類，設定 night 類對應的按鈕圖示，當切換到深夜模式時，將 night 類新增到 body 元素上，按鈕圖示也會對應的改變。 ```css
modeBtn::after {
content: '🌞';
}
body.night {
background: black;
color: white;
transition: 1s;
}
body.night #modeBtn::after {
content: '🌜';
}
js
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const { body } = document;
body.className = body.className ? '' : 'night';
});
```
這樣就遵循了 CSS、JS 各司其職的原則，使用 CSS 類表示元素的狀態，JS 只負責切換元素的狀態。
1. 通過語義化的 CSS night 類，描述了這是一個夜間（night）模式的業務狀態，便於快速瞭解業務需求和後續維護。
2. 如果需求變更，修改模式的顏色，只需修改 body.night 的樣式，避免了由 JS 操作 CSS。
3. 按鈕圖示通過 CSS 偽元素 ::after 實現，按鈕的文字內容就可以清除，避免了由 JS 操作 HTML。
4. JS 程式碼更簡潔了。
但我們還要思考：對於這類純展示類互動的需求，如果有零 JS 方案，那就會對我們以後的維護更加方便。
版本三
按鈕圖示通過 label 標籤和 CSS 偽元素 ::after 實現，同時通過 input checkbox 元素的選中狀態和 CSS 相鄰兄弟選擇器，切換深夜模式。 ```html
css
modeCheckBox {
display: none; }
modeCheckBox:checked + .content {
background: black; color: white; transition: 1s; }
modeBtn::after {
content: '🌞'; }
modeCheckBox:checked + .content #modeBtn::after {
content: '🌜'; } ``` 這樣頁面樣式的更改在 HTML 的基礎上完全依靠 CSS 實現，沒有使用一行 JS 程式碼。 1. 修改模式的顏色，只需修改按鈕選中狀態 #modeCheckBox:checked+.content 的樣式； 2. 修改按鈕的圖示，只需修改按鈕的偽元素 ::after 的 content 屬性即可。
總結
寫好 JS 的一些原則： - 讓 HTML、CSS 和 JS 職能分離。 - 應當避免不必要的由 JS 直接操作樣式和 HTML。 - 用 CSS 類（或偽元素）來表示狀態。 - 純展示類互動可以尋求零 JS 方案。