EventHub-任意组件通信

什么是EventHub

EventHub 是用于多个模块之间进行信息通信的，本质上是基于发布订阅模式来实现的，可以将EventHub理解为发布订阅模式实现的一个实例

例子

DOM2级事件绑定：

const div = document.getElementById('app')
// 订阅点击事件
div.addEventListener('click', function(){})
// 可以订阅多个相同事件
div.addEventListener('click', function(){})
// 可以取消订阅，这里必须要使用与订阅时相同的函数
ele.removeEventListener('click',handler)

上边的这段代码就使用了发布订阅模式，我们可以订阅DOM元素的一些事件，当用户执行相应的操作时会发布事件。当然我们也可以手动来取消对事件的订阅。

实现EventHub

class EventHub {
  event = {}
  on = (eventName, fn) => {
    if (this.event[eventName] === undefined) {
      this.event[eventName] = []
    }
    this.event[eventName].push(fn)
  }
  emit = (eventName) => {
    if (this.event[eventName] === undefined) {
      this.event[eventName] = []
    }
    this.event[eventName].forEach(fn => {
      fn()
    })
  }
  off = (eventName, fn) => {
    if (this.event[eventName] === undefined) {
      this.event[eventName] = []
    }
    const index = this.event[eventName].indexOf(fn)
    if( index !== -1) {
      this.event[eventName].splice(index, 1)
    }
  }
}