手写一个简单的event模块

其实这个问题要从另外一个问题引申

Vue不同组件之间怎么通信?

1. $dispatch(已经废除)和$broadcast(已经废除)
2. 父子组件用Props通信
3. 简单项目非父子组件用Event Bus通信
4. 复杂项目用Vuex全局状态管理库通信

vue有一个event bus库，node中有一个event模块，都是比较典型的发布订阅模式应用

我们实现其核心方法来窥见其大致原理

// 初始化
class EventEmeitter {
  constructor() {
    this._events = this._events || new Map()
  }
}

// 监听与触发
EventEmeitter.prototype.emit = function(type, ...args) {
  let handler
  handler = this._events.get(type)
  if (args.length > 0) {
    handler.apply(this, args)
  } else {
    handler.call(args)
  }
}
// 监听名为type的事件
EventEmeitter.prototype.addListener = function(type, fn) {
  // 讲type事件以及对应的fn放入this.events中存储
  if (!this._events.get(type)) {
    this._events.set(type, fn)
  }
}

实践：

// 实例化
const emitter = new EventEmeitter();

// 监听一个名为arson的事件对应一个回调函数
emitter.addListener('console', num => {
  console.log(`console ${num}`);
});

// 我们触发arson事件,发现回调成功执行
emitter.emit('console', 666); // 666