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

写好 JS 的一些原则

各司其责
让 HTML 、 CSS 、 JavaScript 职能分离（结构、表现、行为分离是前端工程师需要掌握的一个基本原则）
       版本一：前端爱好者 code.juejin.cn/pen/7108183…        不足：让 JavaScript 做了 CSS 应该做的事情。
       后果：
              1. 需求更改，修改的是 JS 的代码；
              2. 如果项目换人，接手的程序员很难从代码中直观的理解原始需求本身的含义。

版本二：职业前端工程师 code.juejin.cn/pen/7108183… 一般来说，控制样式的代码可以靠纯 CSS 来实现。

       版本三：CSS 的高级功能 code.juejin.cn/pen/7108184…
       结论：
              1. HTML/CSS/JavaScript 各司其责；
              2. 应当避免不必要的由 JS 直接操作样式；
              3. 可以用 class 来表示状态；
              4. 纯展示类交互寻求零 JS 方案。

组件封装
组件：指 web 页面上抽出来一个个包含模板、功能和样式的单元，好的组件具备封装性、正确性、扩展性、复用性。
基本方法：
       1. 结构设计；
       2. 展现效果；
       3. 行为设计。
              •API （功能）
              •Event （控制流）
       版本一： code.juejin.cn/pen/7108187…        不足：不够灵活，需求发生小小的改变可能会导致 HTML 、 CSS 和 JavaScript 都要一起修改，控制点和组件本身绑定在一起了（例如：删除轮播图底部四个小圆点）。

改进方向：插件化 -> 模块化 -> 抽象。
       版本二：重构，插件化
       解耦：
              •将控制元素抽取成插件；
              •插件与组件之间通过依赖注入方式建立联系。
code.juejin.cn/pen/7108191…        好处：
              •slider 的构造方法变得简单了；
              •假设有一天不想要四个小圆点了，直接把小圆点的插件注释掉（slider.registerPlugins(/* pluginController, */pluginPrevious, pluginNext)），然后再把 html 中相关的代码给删除掉，这样就不需要修改很多地方了。

       版本三：重构，模块化
       JavaScript 的 UI 组件首先要做到数据驱动，根据数据生成 html 模板。
       解耦：
              将 HTML 模块化，更易于扩展。
code.juejin.cn/pen/7108191…        好处：
              •假设有一天不想要四个小圆点了，直接把小圆点的插件注释掉（slider.registerPlugins(/* pluginController, */pluginPrevious, pluginNext)），模板化后不需要手动删除 html 相关代码。

       这里没有违背各司其责的原则，各司其责不是固定死 HTML 、 CSS 、 JavaScript 写哪里。

版本四：重构，抽象
将组件通用模型抽象出来，这种抽象方法的好处是组件的设计都很简单。 code.juejin.cn/pen/7108185… 不足：没有考虑到嵌套，有些组件是可以嵌套起来的，它的子组件是可以作为父组件的插件来使用的（这里的 Component 和 Plugin 是分开的）。

总结：
       1. 组件设计的原则：封装性、正确性、扩展性、复用性；
       2. 实现组件的步骤：结构设计、展现效果、行为设计；
       3. 三次重构：
              •插件化；
              •模块化；
              •抽象化（组件框架）。

过程抽象
       应用函数式编程思想（处理 UI 交互的细节，抽象分为两类：数据抽象、过程抽象）。
       1. 用来处理局部细节控制的一些方法；
       2. 函数式编程思想的基础应用。

       高级函数（HOF）：
              1. 以函数作为参数；
              2. 以函数作为返回值；
              3. 常用于作为函数装饰器。
              作为返回值的函数的任何行为和作为参数的函数的行为是一样的。
                     •Once：某些内容只执行一次；
                     •Throttle：关注点是连续的执行间隔时间；
                     •Debounce：关注点是空闲的间隔时间；
                     •Consumer：
                     •Iterative：让函数支持多个参数迭代求解。

为什么要用高阶函数？

       1. 非纯函数的测试难度、成本都高于纯函数；
       2. 系统的非纯函数越多，系统的可维护性越差；
       3. 使用高阶函数可以大大的减少使用非纯函数的可能性。

       纯函数：函数是没有副作用的并且造成的行为结果是可预期的。

function add(x, y) {
    return x + y;
}
add(2, 3);

非纯函数：它是有副作用的，它会改变函数外界的值，测试它时，需要给它构造出特定的外部环境。

let idx = 0;
function count() {
    return ++idx;
}
// 每次调用 count 得到的结果都是不一样的。
count();
count();

编程范式

       1. 命令式：更趋向于怎么做
              面向对象
              面向过程
       2. 声明式：更趋向于做什么
              函数式
              逻辑式
JavaScript 兼具命令式和声明式的特点，意味着 JavaScript 可以使用两种分割写代码。
声明式比命令式具有更强的扩展性。

跟着月影学 JavaScript|青训营笔记

写好 JS 的一些原则

为什么要用高阶函数？

编程范式