这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
写好js的一些原则
在课上月影讲述了以下三个原则：
- 各司其职
- 组件封装
- 过程抽象
1.各司其职
各司其职就是每个技负责自己所能实现的职责，HTML是整个页面的一个框架，CSS负责美化这个框架，而JavaScript是负责元素之间的互动。我们要写出高质量的代码，就应该让其各司其职互不干扰或尽量不干扰。
- 不要用js去做css该做的事
- 应当避免不必要的js直接操作样式
- 可以用class来表示样式
- 纯展示类交互寻求零js方案
2.组件封装
组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
- 结构设计
- 展现效果
- 行为设计 API（功能） Event（控制流）
3.过程抽象（启用函数式编程思想）
过程抽象⽤来处理局部细节控制的⼀些⽅法，是函数式编程思想的基础应⽤。
现在有以下需求，勾选任务前的复选框后该任务就会消失，过程中有过渡动画。
以下代码虽然可以实现需求，但是多次点击复选框的话会报错。所以我们要改进该代码，使其点击一次时再触发。
const list = document.querySelector('ul');
const buttons = list.querySelectorAll('button');
buttons.forEach((button) => {
button.addEventListener('click', (evt) => {
const target = evt.target;
target.parentNode.className = 'completed';
setTimeout(() => {
list.removeChild(target.parentNode);
}, 2000);
});
});
为了能够让“只执⾏⼀次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们称为过程抽象。
高阶函数
高阶函数就是可以将另一个函数作为参数的函数，或者返回**一个函数作为结果**的函数.
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
function HOF0(fn) {
return function(...args) {
return fn.apply(this, args);
}
}
常用高阶函数
- Once
- Throttle
- Debounce
- Consumer/2
- Iterative
纯函数与非纯函数
1. 纯函数 (pure function)
- 对外部没有副作用
- 效果可预期
2. 非纯函数 (inpure function)
- 对外部有副作用
- 测试时要构造特定的环境、初始化和还原
- 测试难度更大
使用高阶函数的好处
- 过程抽象
- 高阶函数都是纯函数，效果可预期
- 提升代码的可维护性
在使用高阶函数的时候可以避免多余的分支，也遵循了代码的尽量不改变的原则。
