手写事件总线eventBus

在vue中,我们有时会用eventBus进行简易组件通信,那么这个eventBus究竟是如何实现的呢?
eventBus其实是一个典型的观察订阅模式,我们需要实现:
1、订阅事件on
2、触发事件emit
3、移除事件off
思路还是很简单的,我们直接看一下代码:

class EventBus {
    constructor(){
        this.eventContainer = this.eventContainer || new Map() //用一个容器存放事件
    }
    on(type,callback){
        if(!this.eventContainer.has(type)){
            //如果容器里面没有这种类型的事件,就增加
            this.eventContainer.set(type,callback)

        }
    }
    off(type){
        if(this.eventContainer.has(type)){
          
            this.eventContainer.delete(type)

        }
    }
    emit(type){
        let fn = this.eventContainer.get(type)
        fn.apply(this,[...arguments].slice(1))
    }
}

let ev = new EventBus()
ev.on('myevent',name=>{console.log('hello,',name)})
ev.emit('myevent','jack')
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容