这是我参与「第四届青训营 」笔记创作活动的第2天
写好JS的原则
- 各司其职：让HTML、CSS和JavaScript职能分离。
- 组件封装：好的UI组件具备正确性、扩展性、复用性。
- 过程抽象：应用函数式编程思想。
各司其职
在夜间模式模式的案例中，月影老师讲了3中切换夜间模式的方式：
- 第一种方式：通过JS代码直接控制页面元素对其CSS样式进行修改。JS与CSS的功能没有分离，代码可读性较差。
- 第二种方式：CSS将切换后的样式写为一个类，JS代码通过类名的添加移除对页面夜间模式进行切换。JS与CSS的职能分离，代码有更好的维护性和可读性。
- 第三种方式：页面作为纯展示型页面，只用了CSS与HTML对页面进行操作。
在夜间模式案例中得出的结论是：
- HTML/CSS/JS要各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
组件是指Web页面上抽出来一个个包含（HTML），功能（JS）和样式（CSS）的单元。
- 通过HTML进行结构设计
- 通过CSS展示效果
- 通过JavaScript进行行为设计
- API(功能)
- Event(事件流)
重构:插件化
解耦：
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
在插件化轮播图中，控制元素抽取成插件后，该插件不使用时，只要把插件不再注入即可。并且不影响其他插件的使用，但是残留的一个问题是该插件涉及的HTML部分依旧需要我们手动去移除。
重构:模板化
解耦：
- 将HTML模板化，更易于扩展
在模板化轮播图中，解决了上面插件化轮播图中的问题。我们将HTML部分模板化后放入每个插件中。这样在不使用该插件时，可不将该插件依赖注入；同时其他功能都可完整使用，并且也不用手动清除这部分的HTML。
组件框架
抽象:
- 将组件通用模型抽象出来
在抽象化轮播图中，将组件类中构建、注册插件和相关渲染的过程写入，成为可以被继承实现的整体，其中具体的渲染实现可由其继承者实现。
总结
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展示设计、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
