创建事件中心

创建一个具有emit、on和off方法的发布/订阅(发布-订阅模式)事件中心。

  • 使用Object.create(null)创建一个不继承自Object.prototype的空hub对象。
  • 对于emit,根据event参数解析处理程序数组,然后使用Array.prototype.forEach()将数据作为参数传递给每个处理程序。
  • 对于on,如果事件尚不存在,则创建一个事件数组,然后使用Array.prototype.push()将处理程序添加到数组中。
  • 对于off,使用Array.prototype.findIndex()在事件数组中找到处理程序的索引,并使用Array.prototype.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);
    if (this.hub[event].length === 0) delete this.hub[event];
  }
});

const handler = data => console.log(data);
const hub = createEventHub();
let increment = 0;

// 订阅:监听不同类型的事件
hub.on('message', handler);
hub.on('message', () => console.log('Message event fired'));
hub.on('increment', () => increment++);

// 发布:触发所有订阅它们的处理程序的事件,并将数据作为参数传递给它们
hub.emit('message', 'hello world'); // 输出 'hello world' 和 'Message event fired'
hub.emit('message', { hello: 'world' }); // 输出对象和 'Message event fired'
hub.emit('increment'); // `increment` 变量现在为 1

// 取消订阅:停止特定处理程序监听 'message' 事件
hub.off('message', handler);