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

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

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

前言

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

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

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

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

以下代碼均為簡(jiǎn)化的偽代碼

add方法

EventEmitter.prototype.add = function(type, fn) {
    if (!isFunction(fn)) return;//判斷是否在監(jiān)聽中添加的是合法的函數(shù)
    //判斷type是否添加過(guò)，添加過(guò)一個(gè)還是多個(gè)函數(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)行前需要對(duì)添加的監(jiān)聽進(jìn)行移除

delete

很簡(jiǎn)單理清楚幾種邊界情況就可以了

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

錯(cuò)誤處理

這里提一下node的event的錯(cuò)誤事件

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

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

總結(jié)

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/93996.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

CoreDump

男|高級(jí)講師

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

TA的文章

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

閱讀 2196·2021-11-11 16:54
在使用新的JavaScript庫(kù)時(shí)需要考慮的12件事

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

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

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

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

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

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

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

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

【Node事件模塊Events】

Node 之 Event 模塊

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

發(fā)表評(píng)論

0條評(píng)論

CoreDump

男|高級(jí)講師

TA的文章

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

在使用新的JavaScript庫(kù)時(shí)需要考慮的12件事

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

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

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

JavaScript自定義事件

重繪、回流

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

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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