发布订阅模式

发布订阅模式

• socket.io，发布订阅的实现
• node 的 Eventemitter模块
• Vue 中的 EventBus
• window.addEventListener()

优点：监听事件的位置和触发事件的位置不受限制。

写出一个具有事件监控（on，有的时候也叫做 subscribe），事件触发（emit, 有的时候也叫做 publish），删除事件（off）的 EventEmitter。
(同Vue中的EventBus实现)

class TestEventEmitter {
  // 存储事件类型及函数的对应关系
  constructor() {
    this.eventMap = {};
  }
  // type为事件类型名称
  on(type, handler) {
    if (!handler instanceof Function) {
      throw new Error('请传入一个函数');
    }
    // 当前事件类型对应的队列是否存在
    if (!this.eventMap[type]) {
      this.eventMap[type] = [];
    }
    this.eventMap[type].push(handler);
  }
  emit(type, params) {
    // 如果存在事件类型对应的队列，就挨个执行
    if (this.eventMap[type]) {
      this.eventMap[type].forEach((handler, index) => {
        handler(params);
      });
    }
  }
  off(type, handler) {
    if (this.eventMap[type]) {
      this.eventMap[type].splice(this.eventMap[type].indexOf(handler), 1);
    }
  }
}
const a = new TestEventEmitter();

function testHandler(params) {
  console.log(`test事件被触发，参数为${params}`);
}

a.on('test', testHandler);
a.emit('test', 'aaa');