这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

JavaScript编码原则

一 各司其责

前端的三大技术HTML、CSS、JavaScript分别负责内容、样式、行为，它们应该各司其职，让HTML、CSS、JavaScript职能分离。

• HTML/CSS/JS各司其责

• 应当避免不必要的由JS直接操作样式

• 可以用class来表示状态

• 纯展示类交互寻求零JS方案

以下例子把CSS负责的样式写在了JavaScript代码中，这样子就没有把CSS和JavaScript的职能分离开，不利于代码管理，写的不优雅。

而下面这个例子经过修改，对比可以看出把CSS和JavaScript职能分离开了，也易于后续代码的管理。

该例子也可以只用HTML、CSS来做，而不用JavaScript，做到纯展示类交互用零JS方案。

二 组件封装

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

1 设计UI组件步骤

1. 结构设计（HTML）
2. 展现效果（CSS）
3. 行为设计（JS）

• API（功能）：设计接口，来操作
• Evenr（控制流）：用自定义事件来解耦

2 重构：插件化

解耦

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

例子如下：

这样子方便对插件进行管理，若不需要该插件，直接去掉该插件注册，并把HTML中对应代码去掉即可。

3 重构：模板化

将HTML模板化，更易于扩展

4 重构：组件框架

将组件通用模型抽象出来

三 过程抽象

1 什么是过程抽象

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

2 高阶函数 为了能够让只执行一次的需求覆盖不同的事件处理，我们可以将这个需求剥离出来，这个过程称为过程抽象。使用高阶函数来达到这个过程抽象。

高阶函数

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

例子：

上图的HOF0默认为等价高阶函数，即HOF0接受fn这个参数，返回return 的这个function的任何行为。

常用高阶函数

• Once
• Throttle
• Debounce
• Consumer/2
• Iterative

3 编程范式

• 命令式更强调怎么做
• 声明式更强调做什么，其代码更加简洁，具有更强的可扩展性。