createEventHub - 创建事件中转advanced
优质
小牛编辑
130浏览
2023-12-01
使用 emit
,on
和 off
方法创建一个 pub/sub (publish–subscribe) 事件中转。
使用 Object.create(null)
来创建一个空的 hub
对象,它不会从 Object.prototype
继承属性。 对于 emit
,根据 event
参数解析处理程序数组,然后通过传递数据作为参数来运行每个 Array.forEach()
。 对于 on
,如果事件不存在,则为事件创建一个数组,然后使用 Array.push()
来添加处理程序 到阵列。 对 off
,使用 Array.findIndex()
来查找事件数组中的处理程序的索引,并使用 Array.splice()
将其删除。
const createEventHub = () => ({ hub: Object.create(null), emit(event, data) { (this.hub[event] || []).forEach(handler => handler(data)); }, on(event, handler) { if (!this.hub[event]) this.hub[event] = []; this.hub[event].push(handler); }, off(event, handler) { const i = (this.hub[event] || []).findIndex(h => h === handler); if (i > -1) this.hub[event].splice(i, 1); } });
const handler = data => console.log(data); const hub = createEventHub(); let increment = 0; // Subscribe: listen for different types of events hub.on('message', handler); hub.on('message', () => console.log('Message event fired')); hub.on('increment', () => increment++); // Publish: emit events to invoke all handlers subscribed to them, passing the data to them as an argument hub.emit('message', 'hello world'); // logs 'hello world' and 'Message event fired' hub.emit('message', { hello: 'world' }); // logs the object and 'Message event fired' hub.emit('increment'); // `increment` variable is now 1 // Unsubscribe: stop a specific handler from listening to the 'message' event hub.off('message', handler);