这是我参与「第五届青训营 」笔记创作活动的第10天。
本堂课重点内容
本节课月影老师向我们介绍了JS中的各司其职原则。
详细知识点介绍
对于一个网页来说，可以分为三个组成部分，JS负责行为，CSS负责样式，HTML负责结构。在完成页面时，我们要尽量遵循三者各司其职的原则，各自实现对应的功能，这样不仅便于后续代码的维护拓展，而且可以做到代码整洁，可读性高。
具体实例
我们有一个深夜/白天模式切换的需求。点击🌞时，切换为深夜模式，页面变成深色背景、浅色字体、图标变为🌜。点击🌜时，切换为白天模式，页面变成浅色背景、深色字体、图标变为🌞。
版本一
基础思路：我们将图标作为一个按钮，为其绑定一个点击事件，根据按钮内容来判断当前的模式，并进行style的设置，最后修改按钮内容。
虽然实现了效果，但存在以下问题：
- 代码可读性不高，对于不了解需求的人来说阅读代码不太能直接理解按钮点击的含义。
- 使用了JS修改页面的样式，不符合各司其职原则。
版本二
对问题1的优化：按钮图标通过CSS伪元素::after实现。
对问题2的优化：将原来对style的变换转为对body类的更改。
进一步思考：对于这类只有样式转换的需求，如果有零JS方案，则对我们之后的维护将更加方便。
版本三
按钮图标通过label标签和CSS伪元素 ::after 实现，同时通过checkbox元素的选中状态和CSS相邻兄弟选择器来切换深夜模式。
总结
对于写好JS来说：
- HTML、CSS和JS进行职能分离
- 避免JS对样式和HTML的不必要操作
- 用CSS类（伪类）表示状态
- 对于展示类交互可以寻求零JS方案
