手写事件监听模块

这篇文章发表于 2022年06月21日,星期二,15:07
手写事件监听模块

事件发布/订阅是常用的一种模式,可以通过监听触发事件降低代码的复杂度。有很多开源的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); } }

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