介绍
咱们知道，一个网页通常分为三层，JS 担任行为，CSS 担任体现，HTML 担任结构。在写页面时，遵从 HTML、CSS、JS 各司其职的准则，各自完成对应的功用，这样的好处不仅便于后续代码的保护扩展，而且能够做到代码简练、可读性高。
示例
比方咱们要完成一个深夜/白日形式切换的需求。点击”太阳”图标时，切换为深夜形式，页面变成深色布景、淡色字体、图标变为”月亮”。点击”月亮”图标时，切换为白日形式，页面变成淡色布景、深色字体、图标变为”太阳”。
版别一
咱们在按钮上面绑定一个点击事件，根据按钮的 innerHTML 判断当时形式，然后设置 body.style，再设置按钮的 innerHTML。
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 = '';
}
});
这样作用虽然完成了，但咱们考虑以下几点：
- 对于不了解需求的人，阅览这段代码是否能够直接了解”按钮”点击的含义？
- 运用了 JS 去修正页面的款式，也就是说 JS 做了 CSS 该做的事，如果再添加一个白底蓝字的形式，当 JS 代码很多的时分就变得保护困难。
版别二
按钮图标经过 CSS 伪元素 ::after 完成，一起添加一个 CSS night 类，设置 night 类对应的按钮图标，当切换到深夜形式时，将 night 类添加到 body 元素上，按钮图标也会对应的改动。
#modeBtn::after {
content: '';
}
body.night {
background: black;
color: white;
transition: 1s;
}
body.night #modeBtn::after {
content: '';
}
const btn = document.getElementById('modeBtn');
btn.addEventListener('click', (e) => {
const { body } = document;
body.className = body.className ? '' : 'night';
});
这样就遵从了 CSS、JS 各司其职的准则，运用 CSS 类表明元素的状况，JS 只担任切换元素的状况。
- 经过语义化的 CSS night 类，描绘了这是一个夜间（night）形式的事务状况，便于快速了解事务需求和后续保护。
- 如果需求变更，修正形式的颜色，只需修正 body.night 的款式，防止了由 JS 操作 CSS。
- 按钮图标经过 CSS 伪元素 ::after 完成，按钮的文本内容就能够清除，防止了由 JS 操作 HTML。
- JS 代码更简练了。
但咱们还要考虑：对于这类纯展现类交互的需求，如果有零 JS 方案，那就会对咱们以后的保护愈加方便。
版别三
按钮图标经过 label 标签和 CSS 伪元素 ::after 完成，一起经过 input checkbox 元素的选中状况和 CSS 相邻兄弟选择器，切换深夜形式。
<input id="modeCheckBox" type="checkbox">
<label id="modeBtn" for="modeCheckBox"></label>
<div class="content">...</div>
#modeCheckBox {
display: none;
}
#modeCheckBox:checked + .content {
background: black;
color: white;
transition: 1s;
}
#modeBtn::after {
content: '';
}
#modeCheckBox:checked + .content #modeBtn::after {
content: '';
}
这样页面款式的更改在 HTML 的基础上完全依靠 CSS 完成，没有运用一行 JS 代码。
- 修正形式的颜色，只需修正按钮选中状况 #modeCheckBox:checked+.content 的款式；
- 修正按钮的图标，只需修正按钮的伪元素 ::after 的 content 属性即可。
总结
写好 JS 的一些准则：
- 让 HTML、CSS 和 JS 职能分离。
- 应当防止不必要的由 JS 直接操作款式和 HTML。
- 用 CSS 类（或伪元素）来表明状况。
- 纯展现类交互能够寻求零 JS 方案。
