不依赖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()
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值