前端与JavaScript | 青训营笔记

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

课程重点

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

JavaScript好代码的标准原则有以下三个

1. 各司其职（让HTML、CSS、JavaScript职能分离，常见的不要在HTML中写css样式）
2. 组件封装（好的UI组件具备正确性、扩展性、复用性）
3. 过程抽象（应用函数式编程思想，让代码变得更加通用）

例：深夜食堂（适配深色模式和浅色模式）：

版本1：

js代码中存在许多的css样式代码，简单的逻辑中含有许多样式代码掺杂，影响代码的可维护性。 试想一下：如果在这个代码的基础上去增加需求（改成其他主题的样式），不便于其他人接管维护这个代码，其他人不容易在第一时间直观的看明白这个代码的逻辑。

版本2：

相对比版本1，没有多少变化，但是通过类名，可以较直观的看明白这个js代码的行为要干什么，代码做到了各司其职，样式和行为相分离了。

说到各司其职，这个案例的需求是实现样式的变化，那能不能再优化一个版本，不让js来插手这个样式变化的需求？

版本3：

完全消除了js代码，去实现样式切换的需求。在css的学习中，有一个伪类选择器，这是这个需求实现的核心代码，可以利用checkedbox的选中状态去绑定样式，同时隐藏checkbox达到预期的显示效果。

收获：通常情况下，应当避免不必要的由js直接操作样式，纯展示类优先去探索一个零js方案（用Class来表示状态）。