事件总线-(EventBus)

自定义事件总线

自定义事件总线属于一种观察者模式，其中包括三个角色：

口发布者（Publisher）：发出事件（Event）；

口订阅者（Subscriber）：订阅事件（Event），并且会进行响应（Handler）；

口事件总线（EventBus）：无论是发布者还是订阅者都是通过事件总线作为中台的；

 

当然我们可以选择一些第三方的库：

口Vue2默认是带有事件总线的功能；

口Vue3中推荐一些第三方库，比如mitt；

 

当然我们也可以实现自己的事件总线：

口事件的监听方法on；口事件的发射方法emit；口事件的取消监听off；

class EventBus{
    constructor(){
        this.eventBus={}
    }
    on(eventName,eventCallback,thisArg){
        let handlers=this.eventBus[eventName]
        if(!handlers){
            handlers=[]
            this.eventBus[eventName]=handlers
        }
        handlers.push({
            eventCallback,
            thisArg
        })
    }
    off(eventName,eventCallback){
        const handlers=this.eventBus[eventName]
        if(!handlers)return
        const newHandlers=[...handlers]
        for(let i=0;i<newHandlers.length;i++){
            const handler=newHandlers[i]
            if(handler.eventCallback===eventCallback){
                const index=handlers.indexOf(handler)
                handlers.splice(index,1)
            }
        }
    }
    emit(eventName,...payload){
        const handlers=this.eventBus[eventName]
        if(!handlers)return
        handlers.forEach(handler => {
            handler.eventCallback.apply(handler.thisArg,payload)
        });
    }
}
const eventBus=new EventBus()

//main.js
eventBus.on('abc',function(){
    console.log('watch abc1',this)
},{name:'koo'})
const handleCallback=function(){
    console.log('watch abc2',this)
}
eventBus.on('abc',handleCallback,{name:'koo'})

//utils.js
eventBus.emit('abc',123)

//移除监听
eventBus.off('abc',handleCallback)
eventBus.emit('abc',123)