實(shí)現(xiàn)一個(gè)發(fā)布訂閱

Aceyclee 發(fā)布于2019-08-22 16:09 / 3145人閱讀

摘要：表示事件類型回調(diào)函數(shù)，當(dāng)監(jiān)聽(tīng)的事件類型觸發(fā)時(shí)，執(zhí)行函數(shù)冒泡還是捕獲等參數(shù)原生中，我們通過(guò)注冊(cè)事件訂閱，比如鼠標(biāo)點(diǎn)擊，傳入回調(diào)函數(shù)在注冊(cè)的事件觸發(fā)時(shí)要執(zhí)行的函數(shù)，那么鼠標(biāo)點(diǎn)擊時(shí)發(fā)布，傳入的回調(diào)函數(shù)就會(huì)執(zhí)行。

在常用的MVVM框架比如vue，組件間通信可能會(huì)有以下三種情況：

1. 父子通信：通過(guò)props
2. 非父子組件組件用eventBus通信
3. 如果項(xiàng)目很大，數(shù)據(jù)需要共享到多個(gè)組件（跨組件通信，改同一個(gè)數(shù)據(jù)等），用vuex管理

那么文中的eventBus是怎么實(shí)現(xiàn)的呢，就是根據(jù)發(fā)布訂閱模式。發(fā)布訂閱模式應(yīng)用廣泛，js事件就是一個(gè)經(jīng)典的發(fā)布訂閱模式。看個(gè)例子addEventListener

EventTarget.addEventListener() 方法將指定的監(jiān)聽(tīng)器注冊(cè)到 EventTarget 上，當(dāng)該對(duì)象觸發(fā)指定的事件時(shí)，指定的回調(diào)函數(shù)就會(huì)被執(zhí)行，事件目標(biāo)可以是一個(gè)文檔上的元素 Document 本身。

target.addEventListener(type, listener, options);
//type 表示事件類型（eg:click）
//listener 回調(diào)函數(shù)，當(dāng)監(jiān)聽(tīng)的事件類型觸發(fā)時(shí)，執(zhí)行l(wèi)istener函數(shù)
//options 冒泡還是捕獲等參數(shù)

原生js中，我們通過(guò)addEventListener注冊(cè)事件（訂閱），比如鼠標(biāo)點(diǎn)擊，傳入回調(diào)函數(shù)（在注冊(cè)的事件觸發(fā)時(shí)要執(zhí)行的函數(shù)），那么鼠標(biāo)點(diǎn)擊時(shí)（發(fā)布），傳入的回調(diào)函數(shù)就會(huì)執(zhí)行。除了原生js事件。

那一個(gè)簡(jiǎn)單的發(fā)布訂閱模式怎么實(shí)現(xiàn)呢？定義一個(gè)EventEmitter類，它有以下幾個(gè)元素：

單例對(duì)象，維護(hù)訂閱者：?jiǎn)卫Ｊ骄褪菫楸ＷC不同的人實(shí)例化EventEmitter類之后，拿到的狀態(tài)是同一個(gè)。

訂閱方法：傳入訂閱的事件類型及回調(diào)函數(shù)，訂閱事件

發(fā)布方法：傳入發(fā)布的事件類型及參數(shù)（傳給回調(diào)函數(shù)的），發(fā)布事件。發(fā)布時(shí)，會(huì)執(zhí)行訂閱時(shí)傳入的回調(diào)函數(shù)

移除方法：移除訂閱（監(jiān)聽(tīng)）的回調(diào)函數(shù)

代碼如下：

class EventEmitter {
            constructor(){
                //單例模式
                this._events = this._events || new Map();
            }
            //發(fā)布（觸發(fā)事件）
            emit(type, ...args){
                //拿到訂閱者的回調(diào)函數(shù)
                var handler = this._events.get(type);
                if(!handler){
                    return;
                }
                
                //發(fā)布時(shí)，依次執(zhí)行訂閱者的回調(diào)
                for(var i = 0; i< handler.length; i++){
                    handler[i].apply(this, args);
                }
            }
            //訂閱（監(jiān)聽(tīng)事件）
            addListener(type, func){
                var handler = this._events.get(type);
                
                //如果還沒(méi)有同類型的訂閱，新創(chuàng)建一個(gè)
                if(!handler){
                    this._events.set(type, [func]);
                    return;
                }
                //把回調(diào)函數(shù)塞入數(shù)組
                handler.push(func);
            }
            //移除
            removeListener(type, func){
                var handler = this._events.get(type);
                if(!handler){
                    return;
                }
                
                for(var i = handler.length; i>0; i--){
                    //找到自己要移除的函數(shù)，匿名函數(shù)不能移除
                    if(handler[i] == func){
                        handler.splice(i, 1);
                    }
                } 
            }
        }

該實(shí)現(xiàn)只是探究原理，異常處理之類的都沒(méi)做。想了解單例模式可以看：《javaScript設(shè)計(jì)模式與開(kāi)發(fā)實(shí)踐》（我還沒(méi)看完emmm）

參考：