如何写好JavaScript|青训营笔记

这是我参与「第四届青训营」笔记创作活动的的第4天。

各种语言之间都有共通的地方，在各种应用场景下都有可相互借鉴之处。本篇整理了青训营「跟着月影学 JavaScript 」课程的部分知识点，着重讨论写好JavaScript的三个原则：各司其责、组件封装、过程抽象。

各司其责

让HTML、CSS和JavaScript职能分离。

1. HTML/CSS/JS各司其责
2. 应当避免不必要的由JS直接操作样式
3. 可以用class来表示状态
4. 纯展示类交互寻求零JS方案

组件封装

组件是指Web页面上抽出来一个个包含模板（HTML）。功能（JS）和样式（CSS）的单元。好的UI组件具备正确性、扩展性、复用性。

组件设计原则：

1. 封装性
2. 正确性
3. 扩展性
4. 复用性

基本方法：

1. 结构设计
2. 展现效果
3. 行为设计：API（功能）、Event（控制流）

重构

插件化：

1. 将控制元素抽取成插件
2. 插件和组件之间通过依赖注入方式建立联系

模板化：

1. 将HTML模板化，更易于扩展

抽象化（组件框架）：

1. 将组件通用模型抽象出来

过程抽象

应用函数式编程思想。用来处理局部细节控制的一些方法。函数式编程思想的基础应用。

高阶函数

Once

为了能够让”只执行一次“的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。

HOF

1. 以函数作为参数
2. 以函数作为返回值
3. 常用于作为函数装饰器

常用高阶函数

1. Once
2. Throttle
3. Debounce
4. Consumer/2
5. Iterative

编程范式

命令式与声明式

let list = [1, 2, 3, 4];
let mapl = [];
for(let i = 0; i < list.length; i++) {
    mapl.push(list[i] * 2);
}

let list = [1, 2, 3, 4];
const double = x => x*2;
list.map(double);

其他

写代码最应该关注使用场景。