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

一、本堂课重点内容

JavaScript 好代码的标准
HTML/CSS/JS 各司其责

二、详细知识点介绍

1.什么才是最好的JS代码？

怎么写好JS？

入门：犀牛书
进阶：红宝书
精髓：蝴蝶书（good parts）
都是比较厚的书，但是都是行业内必读经典著作

写好JS的一些原则

各司其责（三件套的职能分离）
组件封装（好的UI组件要具备正确性，扩展性，复用性）
过程抽象（应用函数式编程思想）

2.HTML/CSS/JS 各司其责

深夜食堂举例说明

例子：深夜食堂（让网页支持深色和浅色二种浏览模式）
第一版： JS Bin - Collaborative JavaScript Debugging (h5jun.com)
第二版： JS Bin - Collaborative JavaScript Debugging (h5jun.com)
哪个版本的JS代码更好，如果好的话，好在哪呢？

版本一中直接用JS操作style进行更改，版本二直接用JS操作HTML的状态
JS第二版比第一版简洁，请记住HTML负责结构，CSS负责表现，JS负责行为，我们最好将这三者分离，各司其责
第一版不行的原因是用JS去表现了，JS做了CSS应该做到事情，这样会造成后期维护，升级困难，代码可读性不强

那还有没有更好的代码呢？版本二就是最好的吗？
我们可以知道这个需求实际上就是控制样式的，但是如果是控制样式的话，我们应该可以用纯CSS来实现效果
于是就有了第三版：code.h5jun.com/qofoz/edit?…
第三版直接没有JS的代码了，但是竟然还可以实现功能，这是因为我们使用了CSS有一个高级功能：伪类选择器，其可以改变元素的状态

于是我们主要思路是：我们在CSS给ID（modecheckbox）的设置了一个check状态，通过“+”选择来设置相邻兄弟content类的样式，然后对HTML进行一点修改，在body的下面的input放id属性=“modecheckbox”,然后去修改这个id（modecheckbox）的状态，然后根据“+”这个兄弟节点选择器去匹配到content里面的内容，再修改整个页面

为什么checkbox没有看见呢？因为给checkbox设置了display:none

为什么点checkbox也可以实现夜间功能呢？因为在label元素里面设置了for="modecheckbox"，相当于把之前的modeBtn给label创建了二个状态,label又刚好跟input里面的checkbox相联系了

主要思路：使用伪类选择器去匹配元素状态

各司其责总结

HTML/CSS/JS各司其职
应当避免不必要的由JS直接操作样式
可以用class来表示状态
纯展示类交互寻求零JS方案

三、课后个人总结

这次JavaScript 编码原则的课程讲的就很偏向于实践应用方面了，对前端的JS进阶可以说是帮助很大了，可以学习到一些企业工作常用的一些代码优化方向，对于提升自己的前端基础有很大帮助，推荐反复观看总结，内化于心。

JavaScript 编码原则之各司其责｜ 青训营笔记