“这是我参与「第四届青训营 」笔记创作活动的的第3天
组件封装
- 结构设计
- 展现效果
- 行为设计
- API （功能）
- Event （控制流
重构：插件化
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
重构：模板化
- 将HTML模板化，更易于扩展
组件框架
抽象
- 将组件通用模型抽象出来
组件封装
总结
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构
- 插件化
- 模板化
- 抽象化（组件框架） 组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
高阶函数
Once
为了能够让“只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
HOF
- Once
- Throttle
- Debounce
- Consumer 2
- Iterative
编程范式
命令式与声明式
例子
- Toggle - 命令式
- Toggle - 声明式
- Toggle - 三态
总结
- 过程抽象 / HOF / 装饰器
- 命令式 / 声明式
当年的Leftpad事件
事件本身的槽点：
- NPM 模块粒度
- 代码风格
- 代码质量/效率
- 代码更简洁
- 效率提升
