手写事件监听模块

事件发布/订阅是常用的一种模式，可以通过监听触发事件降低代码的复杂度。有很多开源的npm库可以使用，也可以尝试手写一个。

常用方法

• on(eventName, listener): 注册事件
• off(eventName, listener): 删除事件
• dispatch(eventName, ...params): 触发事件

原理

原理主要是将事件回调添加(on)到事件名称对应的数组里面，一个事件名称可以对应多个回调；执行(dispatch)的时候通过事件名称找到对应的数组遍历执行即可;

代码

export class EventListener {
  eventStock = new Map();
	    
  on (eventName, listener) {
    const listeners = this.eventStock.get(eventName) || [];
    listeners.push(listener);
    this.eventStock.set(eventName, listeners);

    return () => {
      this.off(eventName, listener);
    };
  }

  off (eventName, listener) {
    const listeners = this.eventStock.get(eventName) || [];
    this.eventStock.set(
      eventName,
      listeners.filter((item) => item !== listener),
    );
  }

  dispatch (eventName, ...params) {
    const listeners = this.eventStock.get(eventName) || [];
    for (let i = 0; i < listeners.length; i++) {
      listeners[ i ](params);
    }
  }

一个简易版事件监听就完成，可以添加更多的方法来增强功能。