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