JavaScript 编码原则之各司其责
（推荐书目：犀牛书 红宝书）
写好JavaScript的一些基本原则：
- 各司其责：让HTML、CSS和JavaScript职能分离
- 组件封装：好的UI组件具备正确性、拓展性、复用性
- 过程抽象（还有一种抽象叫数据抽象）：应用函数式编程思想，可以让代码有更好的拓展性和复用能力
例子一 夜间模式 与 白天模式的实现
实现方式一
实现方式二
- 相较于第一种方法的优势
没有通过JavaScript直接操作样式，而是通过JavaScript控制类名来实现状态的切换，提高了代码的可读性和维护性
实现方式三
label实现🌞与🌜切换的细节：
#modeBtn::after {
content: '🌞';
}
#modeCheckBox:checked + .content #modeBtn::after {
content: '🌜';
}
- 相较于第二种方式的优势
实现了零JavaScript的方案，做到了各司其职的原则（即HTML：结构，CSS：表现，JavaScript：行为）（当然并不强求零JavaScript的方案，而是条件允许的情况下，可以适当地去达到该目标）
结论
JavaScript 编码原则之组件封装
组件是指Web页面上抽出来的一个个包含模板(HTML)、功能(JS)和样式(CSS)的单元，好的组件具备封装性、正确性、扩展性、复用性
例子二 轮播图的实现
第一版实现
- 预期效果
最基本的实现方式
- 轮播图结构(HTML)
- 轮播图表现(CSS)
- 轮播图行为(JavaScript)
分别提供了 1. 获取选中的对象(object) 2. 获取选中对象的索引(index) 3. 滑动至第xx轮播页 4. 滑动至下一轮播页 5. 滑动至上一轮播页
提供了使用左右箭头翻页 及 红色小圆点进行跳转页面的功能
由于圆点是否为红色(选中状态)与当前轮播图选中的页面，存在着关系，即两者的状态存在着联系，这种情况通常采用自定义事件来解耦
- 实现总结
- 存在的问题
- 灵活度较低，不能实现控件的可选(即我可以选用 也可以不选用 小红点等控件的翻页功能)
- constructor(构造方法)过长，对维护和可读性产生了较为不利的影响
第二版实现（插件化）
- 通过将控制元素抽取成插件，实现了控制元素的可选用化
- 通过依赖注入有效地简化了constructor, 将插件剥离出来
- 存在的问题
- 控制元素的选用只实现了功能的选用，而没有实现控制元素html(结构)的选用，若要彻底不选用某个控制元素，还需对html代码进行更改
- 灵活度仍有缺失，若需要更改轮播图的页数，仍需对HTML代码进行修改
第三版实现（模板化）
HTML模板化：通过render函数返回要求的需要的HTML(结构)代码，更好地实现了元素的选中(解决了上一版，选中与否还需要更改HTML代码的问题)，也提高了灵活度，可以更灵活地定义轮播图地内容了
第四版实现
在之前三版的基础上，仍有进一步优化的控件，这一版我们将组件通用模型抽象出来
- 经过四版优化后总结
其实还是存在不少可改善的空间的，比如最后一版中，无论控制元素选用与否，它的CSS(样式)代码都是一直不变的(留在最终代码中的)，我们可以通过CSS的模板化来优化与解决这个问题
