这是我参与【第五届青训营】笔记创作活动的第三天
原则：各司其职、组件封装、过程抽象
各司其职：
html/css/js各司其职
应当避免不必要的由js直接操作样式
可以用class来表示状态
纯展示类交互寻求零js方案
组件封装：
原则：封装性、正确性、扩展性、复用性
结构设计（html）、展现效果（css）、行为设计（js）：API（功能）、Event（控制流）。
例子：轮播图
结构html：列表结果，用无序列表ul；
表现css：绝对定位将图片重叠在一个地方，轮播图切换状态用修饰符modifier，切换动画使用CSS ；transition。
行为JS：API设计应保证原子操作，职责单一，满足灵活性（slider），控制流：自定义事件来解耦。
重构：
1、插件化：解耦
将控制元素抽取成插件，插件与组件之间通过依赖注入方式建立联系。
2、模板化：解耦
将HTML模板化，更利于扩展。 render()
3、组件框架：抽象
将组件通用模型抽象出来。render()、action()。
组件设计简单，但子组件不可作为父组件的插件。若要使子组件与父组件分开，也可设计将其联系起来。
虽然写在一个文件中，但html、css、js仍然各司其职。
过程抽象：
用来处理局部细节控制的一些方法；函数式编程思想的基础应用。
高阶函数：
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程我们称为过程抽象。
高阶函数HOF：以函数作为参数；以函数作为返回值；常用于作为函数装饰器。
常用高阶函数：Once
Throttle 使其以固定的频率变化
Debounce 防抖功能，鼠标固定时才会发生变化
Consumer/2 每隔一段时间出现下一个
Iterative 若是可迭代的则会迭代调用，例：使奇数行样式相同。
纯函数：
行为可预期，无副作用，可直接测试。
非纯函数：
改变函数外部值，需为其构造合适的环境（开始前初始化、结束后释放空间等），不便测试。
高阶函数是纯函数，尽量使用纯函数，少使用非纯函数。
编程范式：命令式和声明式。
命令式：面向对象/过程 “怎么做”
声明式：逻辑式和函数式 更简洁
