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

编码原则一：各司其责

各司其责，简单来说，就是让HTML、CSS、JS的职能分离。比如想要完成一个深色模式的功能，可以有许多解决办法：

• 方法一：切换深色模式时，直接使用JS更改具体的样式。
• 方法二：切换深色模式时，使用JS更改body的类名；使用CSS为设置深色模式对应类名的样式。
• 方法三：使用复选框，利用CSS选择器更改复选框选中时和未选中时其后元素的样式。

第一种方法在JS逻辑代码里编写样式，一是不利于逻辑代码的阅读，二是后期修改样式时不便于定位样式所在的文件。

第二种方法则利用类名作为逻辑和样式沟通的「桥梁」，通过类名的中转，方便后期代码的维护。

第三种方法更是发挥了CSS选择器的强大特性，不通过JS便实现了功能。但实际业务场景复杂多变，很可能不便于使用纯CSS实现。

「各司其责」原则的践行，虽然会在开发过程中多付出一些努力，但是能极大地方便后期的修改维护，毕竟，「优雅」的代码谁不爱呢？

编码原则二：组件封装

HTML、CSS、JS各司其责固然「优雅」，但组件封装才能帮助你制造网页「大厦」中合格的「砖瓦」。一个好的组件应该具有以下四项「优良品质」：

• 封装性
• 正确性
• 扩展性
• 复用性

对组件提出的更高要求则是「组件之内，亦有插件」。一个组件，在经历解耦之后，就如同把「砖瓦」换成了「榫卯」。组件之内的各个控制元素摇身一变，成了插件，通过依赖注入的方式，成为一个组件的有机成分，就如同榫与卯之间的融合，使得网页「建筑」更具有技巧性与应变能力。

编码原则三：过程抽象

讲个笑话，问：把大象装进冰箱需要几步？

答：打开冰箱，把大象放进去，关上冰箱。

这就是「过程抽象」，抽象时不必关心实现细节，而是概况出大体框架。对于上面这个笑话，你也许会问「大象从哪来」「为什么要放进冰箱」「冰箱放不下怎么办」，但这些通常不为过程抽象所关注，它只需要抽丝剥茧、总结通用范式即可。这是一种自顶向下的设计手段，是一种分而治之的精明策略，同样有助于提升JS代码的可读性、可扩展性。

这些「Good coder」的「Universal principle」，大可「Give it a try」，毕竟「Time will tell」。