EventEmitter的實(shí)現(xiàn)

CoreDump 發(fā)布于2019-08-22 16:02 / 2089人閱讀

摘要：實(shí)例方法的話，最核心的就是分別是添加事件，刪除事件，發(fā)布事件。為了防止進(jìn)程崩潰，可以在對象的事件上注冊監(jiān)聽器，或使用模塊。注意，模塊已被廢棄。作為最佳實(shí)踐，應(yīng)該始終為事件注冊監(jiān)聽器。

前言

事件在js中非常的常見，不管是瀏覽器還是node，這種事件發(fā)布/訂閱模式的應(yīng)用都是很常見的。至于發(fā)布/訂閱模式和觀察者模式是否是同一種設(shè)計模式說法都有，這里不做具體的討論。在之前的項(xiàng)目中也曾自己實(shí)現(xiàn)過一個事件模塊，核心還是一個EventEmitter。下文就要結(jié)合node中的event模塊分析一下，一個EventEmitter應(yīng)該如何實(shí)現(xiàn)，有什么注意點(diǎn)。
源碼地址
https://github.com/nodejs/nod...

基礎(chǔ)的結(jié)構(gòu)和設(shè)計

首先第一步就是一個EventEmitter的類，然后考慮一下這個類的實(shí)例屬性和實(shí)例方法。
實(shí)例屬性的話最基礎(chǔ)的就是一個eventMap，可以是一個空對象，當(dāng)然也可以這樣創(chuàng)建Object.create(null)。如果需要還可以增加maxListener之類的屬性。
實(shí)例方法的話，最核心的就是add delete emit分別是添加事件，刪除事件，發(fā)布事件。當(dāng)然實(shí)際實(shí)現(xiàn)的時候，例如count，has，once（一次性添加），preAdd（添加在事件隊(duì)列最前面），這些方法則是可以根據(jù)實(shí)際需求去添加。

具體實(shí)現(xiàn)及注意點(diǎn)

以下代碼均為簡化的偽代碼

add方法

EventEmitter.prototype.add = function(type, fn) {
    if (!isFunction(fn)) return;//判斷是否在監(jiān)聽中添加的是合法的函數(shù)
    //判斷type是否添加過，添加過一個還是多個函數(shù)
    if (this.event[type]) {
        if (isArray(this.event[type])){
            //如果想要實(shí)現(xiàn)preadd將push改為unshift即可
            this.event[type].push(fn);
        } else {
            //如果想要實(shí)現(xiàn)preadd改變順序
            this.event[type] = [this.event[type], fn];
        }
    } else {
        this.event[type] = fn;
    }
}

once方法

參考一下node的once方法

function onceWrapper(...args) {
  if (!this.fired) {
    this.target.removeListener(this.type, this.wrapFn);
    this.fired = true;
    Reflect.apply(this.listener, this.target, args);
  }
}

function _onceWrap(target, type, listener) {
  var state = { fired: false, wrapFn: undefined, target, type, listener };
  var wrapped = onceWrapper.bind(state);
  wrapped.listener = listener;
  state.wrapFn = wrapped;
  return wrapped;
}

EventEmitter.prototype.once = function once(type, listener) {
  this.on(type, _onceWrap(this, type, listener));
  return this;
};

函數(shù)用onceWrap包裹，運(yùn)行前需要對添加的監(jiān)聽進(jìn)行移除

delete

很簡單理清楚幾種邊界情況就可以了

EventEmitter.prototype.delete = function(type, fn) {
    //直接刪除整類監(jiān)聽
    if(fn === undefined){
        this.events[type] && delete this.events[type];
    }else{
        //判斷fn合法性就省了
        if(this.events[type]) {
            if (this.events[type] === fn) {
                delete this.events[type];
            } else {
                for (var i in this.events[type]) {
                    if（this.events[type][i] === fn）{
                        if (i === 0) {
                            this.events[type].shift();
                        } else {
                            this.events[type].splice(i,1);
                        }
                    }
                }
                if(this.events[type].length === 1) this.events[type] = this.events[type][0];
            }
        }
    }
    
}

emit

EventEmitter.prototype.emit = function(type) {
    //獲取參數(shù)
    var args = [].slice.call(arguments, 1);
    var handler = events[type];

    if (handler === undefined) return false;

    if (typeof handler === "function") {
        handle.apply(this, args);
    } else {
        var len = handler.length;
        const listeners = arrayClone(handler, len);
        for (var i = 0; i < len; ++i)
             handle[i].apply(this, args);
   }
}

發(fā)布事件有兩個注意點(diǎn)，一個是注意參數(shù)的保留，另一個則是上下文，這里上下文是直接取了event實(shí)例的上下文，也可以考慮一下手動傳入上下文的形式，或者說fn在定義的時候直接寫成箭頭函數(shù)，也可以避免上下文成為eventEmit實(shí)例的上下文。

錯誤處理

這里提一下node的event的錯誤事件

當(dāng) EventEmitter 實(shí)例中發(fā)生錯誤時，會觸發(fā)一個 "error" 事件。 這在 Node.js 中是特殊情況。
如果 EventEmitter 沒有為 "error" 事件注冊至少一個監(jiān)聽器，則當(dāng) "error" 事件觸發(fā)時，會拋出錯誤、打印堆棧跟蹤、且退出 Node.js 進(jìn)程。
為了防止 Node.js 進(jìn)程崩潰，可以在 process 對象的 uncaughtException 事件上注冊監(jiān)聽器，或使用 domain 模塊。 （注意，domain 模塊已被廢棄。）
作為最佳實(shí)踐，應(yīng)該始終為 "error" 事件注冊監(jiān)聽器。

如果有需要在自己的實(shí)踐中也可以增加一個錯誤處理的機(jī)制，保證event實(shí)例的穩(wěn)定性

總結(jié)

一個事件訂閱發(fā)布類其實(shí)不難實(shí)現(xiàn)，而在node中有很多厲害的類都是繼承的事件類，而之后我會接著對node文件系統(tǒng)進(jìn)行學(xué)習(xí)

GPU云服務(wù)器云服務(wù)器 EventEmitter 類的實(shí)現(xiàn) 云計算的實(shí)現(xiàn) webrtc的實(shí)現(xiàn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/93996.html

發(fā)表評論

登陸后可評論

0條評論

CoreDump

男|高級講師

我要關(guān)注我要私信

TA的文章

鴻蒙之后，華為宣布再將捐贈歐拉，鴻蒙和歐拉的捐贈預(yù)計將給業(yè)界帶來哪些影響？

閱讀 2045·2021-11-11 16:54
在使用新的JavaScript庫時需要考慮的12件事

閱讀 2124·2019-08-30 15:55
前端面試題整理（定期更新）

閱讀 3623·2019-08-30 15:54
編寫可維護(hù)的前端代碼

閱讀 400·2019-08-30 15:44
css繪制各種形狀圖形（第二版）

閱讀 2241·2019-08-30 10:58
JavaScript自定義事件

閱讀 434·2019-08-26 10:30
重繪、回流

閱讀 3056·2019-08-23 14:46
Mac聯(lián)機(jī)調(diào)試移動端頁面方法和移動端IOS遇到的兼容性問題

閱讀 3208·2019-08-23 13:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

EventEmitter的實(shí)現(xiàn)

相關(guān)文章

**循序漸進(jìn)教你實(shí)現(xiàn)一個完整的node的EventEmitter模塊**

**【node不完全指西】EventEmitter （事件發(fā)布/訂閱模式）解析**

【Node事件模塊Events】

Node 之 Event 模塊

**從觀察者模式到手寫EventEmitter源碼**

發(fā)表評論

0條評論

CoreDump

男|高級講師

TA的文章

鴻蒙之后，華為宣布再將捐贈歐拉，鴻蒙和歐拉的捐贈預(yù)計將給業(yè)界帶來哪些影響？

在使用新的JavaScript庫時需要考慮的12件事

前端面試題整理（定期更新）

編寫可維護(hù)的前端代碼

css繪制各種形狀圖形（第二版）

JavaScript自定義事件

重繪、回流

Mac聯(lián)機(jī)調(diào)試移動端頁面方法和移動端IOS遇到的兼容性問題

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

EventEmitter的實(shí)現(xiàn)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！