这是我参与「第四届青训营 」笔记创作活动的的第1天
写好JS的三原则
- 各司其责——让HTML、CSS和JavaScript职能分离
- 组件封装——好的UI组件具备正确性、扩展性以及复用性
- 过程抽象——应用函数式的编程思想（编程范式）
Example
【各司其责】深夜食堂：写一段js让其支持浅色和深色模式
以下代码有什么问题呢？
- 过于冗杂
- 直接操作了body内的属性
- 背离了原则——“各司其责”，用JavaScript做了CSS的事情
改进如下：
控制样式直接用CSS会更好（伪类选择器checkbox）
最终版本：
【组件封装】轮播图
组件设计4原则：
- 封装性
- 正确性
- 扩展性
- 复用性
实现组件3步骤：
- 结构设计
- 展现效果
- 新闻给设计
3次重构：
- 插件化
- 模板化
- 抽象化（组件框架）
我们可以定义一个类实现其的不同API功能
可运用上述方法进行组件封装来进行改进。
【过程抽象】
高阶函数，该函数使得功能只被调用一次，不会重复调用
高阶函数
什么是高阶函数？
变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
本课程中，可以理解为，高阶函数可以返回一个函数，输入输出不是确定的。（个人理解）
常用的高阶函数
- Once 只调用一次
- Throttle 节流函数（只需要每隔多少ms调用一次）
- Debounce 防抖函数（例如鼠标停下多少ms才会触发）
- Consumer/2 延时调用
- Iterative 可迭代方法
纯函数
什么是纯函数？
一个函数的返回结果只依赖其参数，并且执行过程中没有副作用。
好处？
好处是可预期的。相同输入总是会返回相同的输出，不产生副作用，不依赖于外部状态。
- 加快运行速度： 纯函数可以根据输入来缓存结果，可以加快程序重复执行时的运算速度；
- 方便移植使用： 运行环境简单，挪到哪里都能用；
- 让测试更简单；
