摘要：從異步編程解決方案說起吧事件發(fā)布訂閱模式模式流程控制庫事件發(fā)布訂閱模式事件監(jiān)聽器模式是一種廣泛運(yùn)用于異步編程的模式，是回調(diào)函數(shù)的事件話，又稱發(fā)布訂閱模式。

從node異步編程解決方案說起吧：

事件發(fā)布/訂閱模式

Promise/deferred模式

流程控制庫

事件監(jiān)聽器模式是一種廣泛運(yùn)用于異步編程的模式，是回調(diào)函數(shù)的事件話，又稱發(fā)布/訂閱模式。

主要實(shí)現(xiàn)的幾個(gè)功能包括

on

remove

once

emit

廢話少說，我們來簡(jiǎn)單的實(shí)現(xiàn)一個(gè)事件監(jiān)聽函數(shù)吧

首先創(chuàng)建一個(gè)eventEmitter函數(shù)

function EventEmitter() {
    // 用Object.create(null)代替空對(duì)象{}
    // 好處是無雜質(zhì)，不繼承原型鏈
    // _events來保存觀察著隊(duì)列的信息
    this._events = Object.create(null);
}

因?yàn)檫^多的偵聽器占用大量?jī)?nèi)存，導(dǎo)致內(nèi)存泄漏，所以偵聽器的個(gè)數(shù)一般不會(huì)超過10個(gè)，否則會(huì)有warnning警告??
接下來是一些默認(rèn)的設(shè)置

// 默認(rèn)最多的綁定次數(shù)
EventEmitter.defaultMaxListeners = 10;
// 同on方法
EventEmitter.prototype.addListener = EventEmitter.prototype.on;
// 返回監(jiān)聽的事件名
EventEmitter.prototype.eventNames = function () {
    return Object.keys(this._events);
};
// 設(shè)置最大監(jiān)聽數(shù)
EventEmitter.prototype.setMaxListeners = function (n) {
    this._count = n;
};
// 返回監(jiān)聽數(shù)
EventEmitter.prototype.getMaxListeners = function () {
    return this._count ? this._count : this.defaultMaxListeners;
};

接下來是on函數(shù)的實(shí)現(xiàn)

EventEmitter.prototype.on = function (type, cb, flag) {
    // 不是newListener 就應(yīng)該讓newListener執(zhí)行以下
    if (type !== "newListener") {
        this._events["newListener"] && this._events["newListener"].forEach(listener => {
            listener(type);
        });
    }
    if (this._events[type]) {
        // 根據(jù)傳入的flag來決定是向前還是向后添加
        if (flag) {
            this._events[type].unshift(cb);
        } else {
            this._events[type].push(cb);
        }
    } else {
        this._events[type] = [cb];
    }
    // 監(jiān)聽的事件不能超過了設(shè)置的最大監(jiān)聽數(shù)
    if (this._events[type].length === this.getMaxListeners()) {
        console.warn("警告-監(jiān)聽器Number過大");
    }
};

解析：
on函數(shù)是幫定的初始函數(shù)，首先判斷是否是首次進(jìn)行偵聽，如果是的話，先進(jìn)行一遍初始化函數(shù)
接下來在——events隊(duì)列里找到指針為type的地方，根據(jù)flag判斷是在隊(duì)列尾還是頭加入callback函數(shù)

接下來是once監(jiān)聽一次的實(shí)現(xiàn)方法

// 監(jiān)聽一次
EventEmitter.prototype.once = function (type, cb, flag) {
    // 先綁定，調(diào)用后刪除
    function wrap() {
        cb(...arguments);
        this.removeListener(type, wrap);
    }
    // 自定義屬性
    wrap.listen = cb;
    this.on(type, wrap, flag);
};

解析：
實(shí)現(xiàn)為在callback上包裝一層remove操作，再當(dāng)做一個(gè)新的callback傳入on函數(shù)
這樣的的話在首次執(zhí)行回調(diào)的時(shí)候就會(huì)執(zhí)行remove操作，達(dá)到執(zhí)行一次就刪除的操作

接下來是remove函數(shù)，刪除一個(gè)type的偵聽器

EventEmitter.prototype.removeListener = function (type, cb) {
    if (this._events[type]) {
        this._events[type] = this._events[type].filter(listener => {
            return cb !== listener && cb !== listener.listen;
        });
    }
};

解析：
傳入type和要?jiǎng)h除的callback，對(duì)type標(biāo)記的數(shù)組進(jìn)行 filter操作，假如cb cb === listener則過濾掉

刪除所有

EventEmitter.prototype.removeAllListener = function () {
    this._events = Object.create(null);
};

接下來是發(fā)布函數(shù) emit

EventEmitter.prototype.emit = function (type, ...args) {
    if (this._events[type]) {
        this._events[type].forEach(listener => {
            listener.call(this, ...args);
        });
    }
};

解析：
也比較直觀，如果events里面存在type的監(jiān)聽器隊(duì)列，則隊(duì)列里的每個(gè)回調(diào)都執(zhí)行一遍，并且用call函數(shù)綁定this和arg

//EventEmitter.js


function EventEmitter() {
    // 用Object.create(null)代替空對(duì)象{}
    // 好處是無雜質(zhì)，不繼承原型鏈的東東
    this._events = Object.create(null);
}
// 默認(rèn)最多的綁定次數(shù)
EventEmitter.defaultMaxListeners = 10;
// 同on方法
EventEmitter.prototype.addListener = EventEmitter.prototype.on;
// 返回監(jiān)聽的事件名
EventEmitter.prototype.eventNames = function () {
    return Object.keys(this._events);
};
// 設(shè)置最大監(jiān)聽數(shù)
EventEmitter.prototype.setMaxListeners = function (n) {
    this._count = n;
};
// 返回監(jiān)聽數(shù)
EventEmitter.prototype.getMaxListeners = function () {
    return this._count ? this._count : this.defaultMaxListeners;
};
// 監(jiān)聽
EventEmitter.prototype.on = function (type, cb, flag) {
    // 默認(rèn)值，如果沒有_events的話，就給它創(chuàng)建一個(gè)
    if (!this._events) {
        this._events = Object.create(null);
    }
    // 不是newListener 就應(yīng)該讓newListener執(zhí)行以下
    if (type !== "newListener") {
        this._events["newListener"] && this._events["newListener"].forEach(listener => {
            listener(type);
        });
    }
    if (this._events[type]) {
        // 根據(jù)傳入的flag來決定是向前還是向后添加
        if (flag) {
            this._events[type].unshift(cb);
        } else {
            this._events[type].push(cb);
        }
    } else {
        this._events[type] = [cb];
    }
    // 監(jiān)聽的事件不能超過了設(shè)置的最大監(jiān)聽數(shù)
    if (this._events[type].length === this.getMaxListeners()) {
        console.warn("警告-警告-警告");
    }
};
// 向前添加
EventEmitter.prototype.prependListener = function (type, cb) {
    this.on(type, cb, true);
};
EventEmitter.prototype.prependOnceListener = function (type, cb) {
    this.once(type, cb, true);
};
// 監(jiān)聽一次
EventEmitter.prototype.once = function (type, cb, flag) {
    // 先綁定，調(diào)用后刪除
    function wrap() {
        cb(...arguments);
        this.removeListener(type, wrap);
    }
    // 自定義屬性
    wrap.listen = cb;
    this.on(type, wrap, flag);
};
// 刪除監(jiān)聽類型
EventEmitter.prototype.removeListener = function (type, cb) {
    if (this._events[type]) {
        this._events[type] = this._events[type].filter(listener => {
            return cb !== listener && cb !== listener.listen;
        });
    }
};
EventEmitter.prototype.removeAllListener = function () {
    this._events = Object.create(null);
};
// 返回所有的監(jiān)聽類型
EventEmitter.prototype.listeners = function (type) {
    return this._events[type];
};
// 發(fā)布
EventEmitter.prototype.emit = function (type, ...args) {
    if (this._events[type]) {
        this._events[type].forEach(listener => {
            listener.call(this, ...args);
        });
    }
};

module.exports = EventEmitter;

我的博客即將同步至騰訊云+社區(qū)，邀請(qǐng)大家一同入駐：https://cloud.tencent.com/dev...