这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天✌
课堂笔记
本堂课重点内容：
- JavaScript 好代码的标准
- HTML/CSS/JS 各司其责
详细知识点介绍
3. 过程抽象👌
- 用来处理局部细节控制
- 过程抽象是函数思想的基础
过程抽象过程即可视为函数的输入与输出。
- 应用举例：
设计一个to do list，完成某项任务后点击该任务前的✅，该任务即消失
bug：
问题：
假设用户手抖多次点击了任务行，会报错：
原因：
因为点击任务后触发了click事件，多次触发了click事件就会触发定时器setTimout()多次调用removeChild()，就会报错，因为该节点已经被移除了。
解决方案：
使用{once:true}代替定时器设定的时间,保证定时器中的函数只被执行一次。
高阶函数
-
Once
- 为了能够让“只执行一次”的需求覆盖不同的事件处理，我们将这个需求剥离处理。这个过程我们称为 过程抽离。
如上图：
将房间里的东西抽象成数据，例如门、冰箱、窗户等。 open是个动作，可以复用来操作上述数据。
可以通过高阶函数实现Once()抽象过程。
代码模板：
-
HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
-
常用高阶函数
- Once：让“只执行一次”的需求覆盖不同的事件处理
- Throttle：节流函数，n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。
- Debounce：防抖函数，n 秒后执行该事件，若在 n 秒内被重复触发，则重新计时。
- Consumer/2
- Iterative：迭代器，用于批量的操作元素
-
纯函数： 输入的值是唯一，且输出的值也是唯一
-
非纯函数： 输入的值不唯一，且输出的值也不唯一
纯函数优点：提高代码的可维护性和可扩展性。
- 编程范式
- 命令式
- 过程式
- 面向对象
- 声明式
- 逻辑式
- 函数式
- 命令式
命令式代码风格：
let list = [1, 2, 3, 4];
let map = [];
for (let i = 0; i < list.length; i++) {
map.push(list[i] * 2);
}
声明式代码风格：
let list = [1, 2, 3, 4];
let map = [];
for (let i = 0; i < list.length; i++) {
map.push(list[i] * 2);
}
应用实例
-
Toggle 命令式
-
Toggle 声明式
-
Toggle 三态
总结
- 过程抽象/HOF/装饰器
- 命令式/生命式
课后个人总结
前端不仅仅是技术代码上的实现，也应该遵守标准的编码原则和思维上的标准规范，才能降低差异性，更利于团队协作。
