这是我参与「第五届青训营」笔记创作活动的第2天

JS编码原则

各司其职

HTML 负责结构，CSS 负责表现，JS 负责行为。

结构，表现，行为分离，是前端工程师的基本原则。

尽量不要通过 JS 去修改 CSS 属性，最好的方式是样式修改的操作通过 CSS 本身实现。

月影老师举了一个简单的例子，一个昼夜模式切换的按钮的实现：

首先最简单的就是按钮绑定点击事件，修改背景颜色与文字颜色属性与按钮图标，但这与我们的设计原则有了冲突，几应当尽量实现样式与行为分离。

这时我们尝试进行优化，我们添加一个 night 类表示夜间模式的样式，点击事件仅修改body元素的样式类，这样的方式，将类作为一种状态，通过 JS 修改页面状态，是一个不错的思路。

而更好更彻底的做法呢，则是利 CSS 本身的伪类checked与兄弟选择器去修改CSS属性，将样式与行为彻底分离，实现了零JS实现。这种思维方式值得学习。

组件时指从 web 页面上抽离出的一个个包含模板，样式，行为的单元。

好的组件应当具有封装性，正确性，扩展性，复用性。

常见的有防抖函数，节流函数。