不依赖vue实例，怎么实现一个eventBus?

eventBus一直是vue中兄弟组件通信的最佳解决方案，具体实现不再赘述，本文介绍一种不依赖vue实例的方式实现一个eventBus的方式，同事文章的产出也是受到了与朋友交流的启发，在此致谢！

eventBus中常见的无非就是消息发布，消息监听，取消监听这几个常用的方法。通过事件监听与发布，可以实现复杂组件中的事件解耦。

// 实现一个enentBus类
class eventBus {
  constructor(){
    this.eventMap = new Map()
  }
  // 事件派发
  emit(key,payload){
    const handlers = this.eventMap.get(key)
    if(!Array.isArray(handlers)) return
    handlers.forEach(handler=>{
      handler(payload)
    })
  }
  // 事件监听
  on(key,handler){
    let handlers = this.eventMap.get(key) || []
    handlers.push(handler)
    this.eventMap.set(key,handlers)
  }
  // 单次事件监听
  once(key,handler){
    const handlers = [(payload) => {
      handler(payload)
      this.off(key)
    }]
    this.eventMap.set(key, handlers)
  }
  // 事件注销
  off(key,handler){
    let handler_arr = this.eventMap.get(key)
    if(!handler_arr) return
    if(handler){
      const index = handler_arr.indexOf(handler)
      index > -1 && handler_arr.splice(index, 1)
      this.eventMap.set(key, handler_arr)
    }else{
      this.eventMap.delete(key)
    }
  }
}

export default new eventBus()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42