vue通訊方法EventBus的實現

  vue通訊方式有不少，項目中用的比較多的的有pros、vuex、$emit/$on這3種，還有provide/inject(適合高階組件)、$attrs和$listeners(適合高階組件)以及$parent/$child/ref、eventBus等這3種方式。不少時候咱們都是隻會使用api，而懂得原理以及實現，但我就以爲懂得原理以及實現跟一個只會調用api的開發人員時不在同一層次的。因此這裏就像把跨組件通訊的eventBus通訊的原理給你們展現一下。這也是本身學到大佬的的東西后並在此記錄（轉載）一下。

class EventBus{
        constructor(){
            this.event=Object.create(null);
        };
        //註冊事件
        on(name,fn){
            if(!this.event[name]){
                //一個事件可能有多個監聽者
                this.event[name]=[];
            };
            this.event[name].push(fn);
        };
        //觸發事件
        emit(name,...args){
            //給回調函數傳參
            this.event[name]&&this.event[name].forEach(fn => {
                fn(...args)
            });
        };
        //只被觸發一次的事件
        once(name,fn){
            //在這裏同時完成了對該事件的註冊、對該事件的觸發，並在最後取消該事件。
            const cb=(...args)=>{
                //觸發
                fn(...args);
                //取消
                this.off(name,fn);
            };
            //監聽
            this.on(name,cb);
        };
        //取消事件
        off(name,offcb){
            if(this.event[name]){
                let index=this.event[name].findIndex((fn)=>{
                    return offcb===fn;
                })
                this.event[name].splice(index,1);
                if(!this.event[name].length){
                    delete this.event[name];
                }
            }
        }
    }
複製代碼

以上代碼用的是發佈訂閱模式。

參考連接：
一、面試官系列(2): Event Bus的實現
二、一個合格的中級前端工程師必需要掌握的 28 個 JavaScript 技巧