[这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天]
1. 如何写好JS
写好JS的一些原则
- 各司其责： 让HTML、CSS和JS只能分离 （应当避免不必要的由js直接操作样式 | 纯展示需求尽量避免使用js）
- 封装组件： 好的UI组件具备正确性、扩展性、复用性
- 过程抽象： 应用函数式编程思想
2. 组件封装
组件是什么？
组件指的是web页面上抽出来一个个包含模板（HTML、JS、CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性
组件封装的基本方法
- 结构设计
- 展现效果
- 行为设计
重构：插件化
解耦
- 将控制元素的方法抽取成插件
- 插件与组件之间通过
注入依赖的方式建立连接重构：模板化
- 将html进行模板化，更好扩展
如何模板化
- 在html中只放置组件所需的‘盒子’，由JS来按需生成‘盒子’中的内容
抽象
- 将组件通用模型抽象出来，让自定义组件类去继承模型类
总结
- 组件设计的原则 ： 封装性、正确性、扩展性、复用性
- 实现组件的步骤 ： 结构设计、展现效果、行为设计
- 三次重构 ： 插件化、模板化、抽象化
- 如何实现组件的封装： 首先设计出组件的模型，交互效果以及展现效果；其次抽离插件，比如该组件中哪些地方需要可以让用户按需展示。我们可以将选择性展示的地方作为插件，通过
依赖注入的形式将插件与组件进行连接。在这个过程中，我们还需要考虑到html样式，比如无需展示的地方隐藏等。所以我们可以通过js去组成DOM结构（抽成函数/类）。根据用户传递的数据来决定是否调用特定的类/函。最后，我们可以将通用模型从组件中抽出，比如 将插件、渲染等部分抽成模型，由封装的组件类进行继承。
3.过程抽象
什么是过程抽象？
- 用来处理局部细节控制的一些方法，比如想要一个节流函数，我们可以在函数内部去实现。当然我们也可以将实现节流的过程抽象成一个函数，它接收一个参数（函数），返回一个节流函数
- 函数式编程思想的基础应用（用户只关注某个函数的输入和输出，不关注函数本身的实现方式）
4.高阶函数
什么是高阶函数(HOF)？
- 以函数最为参数
- 以函数作为返回值
- 常用于作为函数装饰器 上面提到的过程抽象其实就是实现一个高阶函数
5.纯函数
什么是纯函数?
一个无状态的幂等的函数。无论在什么时候调用，同一输入，其输出结果一定
6.命令式编程
在函数内部直接写实现过程
- 优点： 直白，易懂
- 缺点： 不利于多中样式来回切换的场景
7.声明式编程
将实现方法抽成一个单独的函数
- 优点： 利于多种样式来回切换的场景，提高代码可扩展性
