标题：「跟着月影学 JavaScript 」第四届字节跳动青训营 - 前端专场
这是我参与「第四届青训营 」笔记创作活动的的第3天
1、写好JS的一些原则
- 各司其责
- 组件封装
- 过程抽象
各司其责
- 让HTML、CSS和JavaScript职能分离
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互求零JS方案
解耦
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入的方式建立联系
组件封装
- 好的UI组件具备正确性、扩展性、复用性
- 基本方法：结构设计 -> 展现效果 -> 行为设计（功能和控制流）
- 重构
- 插件化
- 模块化
- 抽象化（组件框架）
过程抽象
- 用来处理局部细节控制的一些方法
- 函数式编程思想的基础应用
2、高阶函数
1、HOF
- 以函数作为参数
- 以函数作为返回值
- 常用于作为函数装饰器
function HOF0(fn) {
return function(...args) {
return fn.apply(this,args);
}
}
2、常用高阶函数
- Once
- Throttle
- Debounce
- Consumer
- Iterative
3、Once
为了能够让“只执行一次”的需求覆盖不同的事件处理，我们可以将这个需求剥离出来。这个过程我们成为过程抽象
4、Throttle 节流函数
函数节流指的是某个函数在一定时间间隔内（例如 3 秒）只执行一次，在这 3 秒内 无视后来产生的函数调用请求，也不会延长时间间隔。3 秒间隔结束后第一次遇到新的函数调用会触发执行，然后在这新的 3 秒内依旧无视后来产生的函数调用请求，以此类推。
const throttle = (fn, wait) => {
// 上一次执行该函数的时间
let previous = 0
return function(...args) {
console.log(previous)
...
}
}
5、Debounce 防抖函数
防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时。
6、Iterative函数
定义迭代器函数，这样我们就可以将一个操作函数包装成可以迭代使用的操作
为什么要使用高阶函数呢，在解决这个问题之前，我们先来学习纯函数的概念。
一个严格的纯函数，是具有确定性、无副作用，幂等的特点。也就是说，纯函数不依赖外部环境，也不改变外部环境，不管调用几次，不管什么时候调用，只要参数确定，返回值就确定。这样的函数，就是纯函数。
3、编程范式
命令式
switcher.onclick = function(evt){
if(evt.target.className === 'on'){
evt.target.className = 'off';
}else{
evt.target.className = 'on';
}
}
function toggle(...actions){
return function(...args){
let action = actions.shift();
actions.push(action);
return action.apply(this, args);
}
}
switcher.onclick = toggle(
evt => evt.target.className = 'off',
evt => evt.target.className = 'on'
);
