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()