这是我参与「第五届青训营 」笔记创作活动的的第3天
一、重点内容回顾
- 学习了写好JS的三大原则
- 通过案例演示对三大原则加深理解
二、写好JS的一些原则
2.1 各司其职
- 各司其职
- HTML---Structural
- CSS---Presentational
- JavaScript---Behavioral
- 结论：
- HTML/CSS/JS各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
2.2 组件封装
- 组件
- 组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
- 组件封装基本方法：
- 结构设计
- 展现效果
- 行为设计
- API（功能）
- Event（控制流）
- 解耦：
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入方式建立联系
- 总结：
- 组件设计的原则：封装性、正确性、扩展性、复用性
- 实现组件的步骤：结构设计、展现效果、行为设计
- 三次重构：
- 插件化
- 模板化
- 抽象化（组件框架）
2.3 过程抽象
- 过程抽象：
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
- 操作次数限制
- 一些异步交互
- 一次性的HTTP请求
- Once
- 为了能让“只执行一次”的需求覆盖不同的事件处理，我们将这个需求剥离出来，这个过程称为过程抽象
- 高阶函数
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数修饰器
- 常用高阶函数
- Once
- Throttle
- Debounce
- Consumer/2
- Iterative
- 命令式与声明式
- 例子
- Toggle-命令式
- Toggle-声明式
- Toggle-三态
- 总结
- 过程抽象/HOF/装饰器
- 命令式/声明式
三、总结
写好JS的原则有各司其职、组件封装、过程抽象三个原则，在学习JS的过程中要细细领会。
