这是我参与「 第四届青训营 」笔记创作活动的第四天
如何写好JavaScript
写好JS的一些原则
- 各司其职：让HTML、CSS和JavaScript职能分离。
- 组件封装：好的UI组件具备正确性、扩展性、复用性。
- 过程抽象：应用函数式编程思想。
深夜食堂案例
- 写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。如果是你来实现，你会怎么做？
版本一
通过JS获取DOM元素，改变元素样式。
版本二
通过JS为click事件添加事件监听器，切换类名来达到效果。
版本三
应用单选框和伪元素，直接使用CSS实现需求，不使用JS。
深夜食堂——结论
- HTML/CSS/JS 各司其责
- 应当避免不必要的由 JS 直接操作样式
- 可以用 class 来表示状态
- 纯展示类交互寻求零 JS 方案
组件封装
什么是组件？
组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
[重构：插件化]
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
[重构：模板化]
解耦
- 将HTML模板化，更易于扩展
[组件框架]
抽象
- 将组件通用模型抽象出来
组件封装
总结
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化（组件框架）
