JavaScript 常用方法
ChenYang Lv1
  2022-02-19 17:09:37 2022-02-19 17:09    

整理JavaScript中常用的一些方法，方便工作中使用。

1. 防抖 & 节流

🪁 介绍： 防抖节流是JavaScript中常见的优化方式，用以减少函数触发次数。
🦌 区别： 防抖可以理解成坐电梯，只有没人按上下行按钮（触发事件）时，电梯（函数）才会运行。 节流是指函数间隔触发。
🐋 使用场景： 防抖常用于搜索框输入，手机号 / 邮箱检测，窗口Resize减少回流。 节流常用于滚动加载，表单提交等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 防抖: 最后执行
function debounce(fn, delay = 300) {
  let timer;
  return function () {
    // 如果timer存在，清除定时器
    timer && clearTimeout(timer);
    // 重新开启定时器
    setTimeout(fn, delay);
  };
}

// 节流: 间隔执行
function throttle(fn, delay) {
  let flag = true;
  return function () {
    if (!flag) return;
    flag = false;
    setTimeout(() => {
      fn();
      flag = true;
    }, delay);
};
1
2
3
4
5
6
7
8
9
10
11
12
// 示例
btn.addEventListener(
  "click",
  debounce(() => console.log("click"), 1000)
);
// 1000ms内连续点击，只触发一次。

btn.addEventListener(
  "click",
  throttle(() => console.log("click"), 1000)
);
// 3000ms内连续点击，只触发三次。

2. 数组去重

🪁 介绍： 实用的方法。
🐋 使用场景： 对返回数组进行去重。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 实现方法1：使用Set的去重功能，时间复杂度O(n!)
function unique(arr) {
    return [...new Set(arr)]
}

// 实现方法2：使用对象缓存，时间复杂度O(n)
function unique_(arr) {
    let obj = {}
    let res = []
    arr.forEach((item, index) => {
        if (!obj[item]) {
            obj[item] = true
            res.push(item)
        }
    })
    return res
}

3. 发布订阅模式

🪁 介绍： 发布订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。
🐋 使用场景： addEventListener，VUE 中的 $on $emit。
🦌 观察者模式和发布订阅模式区别：观察者模式中观察者指导观察目标，大多是同步的**，比如当事件触发，目标就会去调用观察者的方法。而发布-订阅模式大多数时候是异步的。只有没人按上下行按钮（触发事件）时，电梯（函数）才会运行。 发布订阅模式中，发布者和订阅者不知道对方存在，通过消息进行通行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
class EventEmitter {
    constructor() {
        // 用对象来存储回调，因为同一个事件可能有多个回调
        this.callBack = {}
    }
    // 为事件名增加事件
    on(type, fn) {
        if (!this.callBack[type]) this.callBack[type] = [fn]
        else this.callBack[type].push(fn)
    }
    off(type, fn) {
        if (!this.callBack[type]) return
        else this.callBack[type] = this.callBack[type].filter(item => item !== fn)
    }
    once(type, fn) {
        function func() {
            fn()
            this.off(type, fn)
        }
        this.on(type, func)
    }
    emit(type, ...rest) {
        this.callBack[type] && this.callBack[type].forEach(fn => fn.apply(this, rest))
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 示例
const event = new EventEmitter();
const handle = (...rest) => {
    console.log(rest);
};
event.on("click", handle);
event.emit("click", 1, 2, 3, 4);
event.off("click", handle);
event.emit("click", 1, 2);
event.once("dbClick", () => {
    console.log(123456);
});
event.emit("dbClick");
event.emit("dbClick");

// 输入结果
[ 1, 2, 3, 4 ]
123456
123456