这是我参与「第五届青训营 」笔记创作活动的第14天，关于跟着月影学好JavaScript的知识点总结，包括：如何写好JS？、各司其职和组件封装等知识点。
———Zy_Thomas
如何写好JS
各司其职
- HTML、CSS、和JavaScript各司其职
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
组件封装
组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
组件封装基本方法
-
结构设计
-
展现效果
-
行为设计
- API(功能)
- Event(控制流)
三次重构
插件化（解耦）
- 将控制元素抽取成插件
- 插件和组件之间通过依赖注入方式建立联系 模版化（解耦）
- 将HTML模板化，更易于扩展 抽象化（组件框架）
- 将组件通用模型抽象出来
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
高阶函数HOF(Higher-Order Function)
JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
function HOF0(fn) {
return function(...args) {
return fn.apply(this, args);
}
}
复制代码
常用高阶函数
- Once
- Throttle
- Debounce
- Consumer/2
- Iterative
为什么要使用高阶函数？
纯函数与非纯函数
1. 纯函数 (pure function)
- 对外部没有副作用
- 效果可预期
2. 非纯函数 (inpure function)
- 对外部有副作用
- 测试时要构造特定的环境、初始化和还原
- 测试难度更大
使用高阶函数的好处
-
过程抽象
-
高阶函数都是纯函数，效果可预期
-
提升代码的可维护性
