这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天。
本节课我们学习的内容是如何写好JS，什么样的JavaScript代码能称之为“好代码”，HTML/CSS/JS是怎样各司其职的。
写好JS的一些原则
- 各司其责
- 组件封装
- 过程抽象
- HTML/CSS/JS各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件是指web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。
好的组件具备封装性，正确性，扩展性，复用性。
结构设计：HTML
轮播图是一个典型的列表结构，我们可以使用无序列表<ul>元素来实现。
展现效果：CSS
- 使用CSS绝对定位将图片重叠在同一个位置
- 轮播图切换的状态使用修饰符（modifier）
- 轮播图的切换动画使用CSS transition
行为设计：API
行为：JS
- API设计应保证原子操作，职责单一，满足灵活性。
行为：控制流
- 使用自定义事件来解耦。
组件封装总结：基本方法
- 结构设计
- 展现效果
- 行为设计
- API（功能）
- Event（控制流）
重构：插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
重构：模板化
解耦
- 将HTML模板化，更易于扩展
重构：组件框架
抽象
- 将通用的组件模型抽象出来
组件封装总结
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象画（组件框架）
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
例子
操作次数限制
- 一些异步交互
- 一次性的HTTP请求
Once
- 为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
常用高阶函数
- Once
- Throttle
- Debounce
- Consumer/2
- Iterative
编程范式
- 过程抽象/HOF/装饰器
- 命令式/声明式
