每日一条JS精华片段：创建一个发布/订阅事件器

本文链接：https://blog.csdn.net/u011519828/article/details/108476019

创建一个发布/订阅事件器,拥有emit，on和off方法。

Javascript方法

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);