一文聊聊Node.js中的EventEmitter模組-js教程-PHP中文網

EventEmitter是 Node.js 的內建模組，為我們提供了事件訂閱機制。以下這篇文章就來帶大家了解Node.js中的EventEmitter模組，介紹一下它的用法，希望對大家有幫助！

一文聊聊Node.js中的EventEmitter模組

EventEmitter 的使用

EventEmitter 為我們提供了事件訂閱機制，透過引入 events 模組來使用它。

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

// 监听 data 事件
eventEmitter.on("data", () => {
    console.log("data");
});

// 触发 data 事件
eventEmitter.emit("data");

登入後複製

上述程式碼我們使用 on 方法來為事件綁定回呼函數，使用 emit 方法來觸發一個事件。

on、addListener

我們可以透過on 和addListener 方法來為某事件新增一個監聽器，二者的使用是一樣

eventEmitter.on("data", () => {
    console.log("data");
});

eventEmitter.addListener("data", () => {
    console.log("data");
});

登入後複製

第一個參數為事件名，第二個參數為對應的回呼函數，當EventEmitter 實例物件呼叫emit 觸發對應的事件時便會呼叫該回呼函數，如

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.on("data", () => {
    console.log("data");
});

eventEmitter.addListener("data", () => {
    console.log("data");
});

eventEmitter.emit("data");

登入後複製

在控制台會印出兩次data

data
data

登入後複製

#從上面的例子也可以看出，可以為相同事件綁定多個回呼函數。

執行順序

當使用on 或addListener 綁定多個回呼函數時，觸發的順序就是新增的順序，如

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.on("data", () => {
    console.log("data 1");
});

eventEmitter.on("data", () => {
    console.log("data 2");
});

eventEmitter.on("data", () => {
    console.log("data 3");
});

eventEmitter.emit("data");

登入後複製

會在控制台依序列印出

data 1
data 2
data 3

登入後複製

重複新增

並且使用on 方法綁定事件時，並不會做去重檢查

const {EventEmitter} = require(&#39;events&#39;);
const eventEmitter = new EventEmitter();

const listener = () => {
    console.log("lsitener");
}

eventEmitter.on("data", listener);
eventEmitter.on("data", listener);
eventEmitter.emit("data");

登入後複製

控制台的列印結果為

lsitener
lsitener

登入後複製

上面的程式為事件綁定了兩次listener 這個函數，但是內部並不會檢查是否已經新增過這個回呼函數，然後去重，所以上面在控制台印出了兩次listener。

傳遞參數

另外回呼函數也可以接收參數，參數透過emit 觸發事件時傳入，如

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.on("data", data => {
    console.log(data);
});

// 为回调函数传入参数 HelloWorld!
eventEmitter.emit("data", "HelloWorld!");

登入後複製

上面我們使用emit 觸發事件時，也傳遞了額外的參數，這個參數會被傳遞給回呼函數。

同步執行

另外一個比較關心的問題，事件的觸發是同步的還是異步的，我們做一個實驗

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.on("data", () => {
    console.log("触发了 data 事件！");
});

console.log("start");
eventEmitter.emit("data");
console.log("end");

登入後複製

上面我們我們在觸發事件前後都向控制台列印了訊息，如果觸發事件後面是非同步執行的，那麼後面的列印語句就會先執行，否則如果是同步的話，就會先執行事件綁定的回呼函數。執行結果如下

start
触发了 data 事件！
end

登入後複製

可見事件觸發是同步執行的。

off、removeListener

off 與removeListener 方法的作用同on 和addLsitener 的作用是相反的，它們的作用是為某個事件刪除對應的回調函數

const {EventEmitter} = require(&#39;events&#39;);
const eventEmitter = new EventEmitter();

let listener1 = () => {
    console.log("listener1");
}
let listener2 = () => {
    console.log("listener2");
}

eventEmitter.on("data", listener1);
eventEmitter.on("data", listener2);

// 第一次触发，两个回调函数否会执行
eventEmitter.emit("data");

eventEmitter.off("data", listener1);
// 第二次触发，只会执行 listener2
eventEmitter.emit("data");

登入後複製

控制台打印結果為

listener1
listener2
listener2

登入後複製

第一次觸發事件時，兩個事件都會觸發，然後我們為事件刪除了listener1 這個回呼函數，所以第二次觸發時，只會觸發listener2。

注意：如果我們使用on 或addListener 綁定的是一個匿名函數，那麼便無法透過off 和removeListener 去解綁一個回呼函數，因為它會透過比較兩個函數的參考是否相同來解綁函數的。

once

使用once 可以綁定一個只執行一次的回呼函數，當觸發一次之後，該回呼函數會自動被解綁

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.once("data", () => {
    console.log("data");
});

eventEmitter.emit("data");
eventEmitter.emit("data");

登入後複製

上述程式碼我們使用once 為data 事件綁定了一個回呼函數，然後使用emit 方法觸發了兩次，因為使用once 綁定的回呼函數只會被觸發一次，所以第二次觸發，回呼函數不會執行，所以在控制台只列印了一次data。

另外同on 綁定的回呼函數一樣，我們同樣可以透過emit 方法向回呼函數傳遞參數

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.once("data", data => {
    console.log(data);
});

eventEmitter.emit("data", "Hello");

登入後複製

控制台列印結果

Hello

登入後複製

prependListener、prependOnceListener

使用on 或addListener 為事件綁定的回呼函數會被依照新增的順序執行，而使用prependLsitener 綁定的事件回呼函數會在其他回呼函數之前執行

const {EventEmitter} = require(&#39;events&#39;);
const eventEmitter = new EventEmitter();

eventEmitter.on("data", () => {
    console.log("on");
});

eventEmitter.prependListener("data", () => {
    console.log("prepend");
});

eventEmitter.emit("data");

登入後複製

上述代打我們先用控制台的列印結果為

prepend
on

登入後複製

#prependOnceListener 同prependListener，不過它所綁定的回呼函數只會被執行一次

const {EventEmitter} = require(&#39;events&#39;);
const eventEmitter = new EventEmitter();

eventEmitter.on("data", () => {
    console.log("on");
});

eventEmitter.prependOnceListener("data", () => {
    console.log("prepend once");
});

eventEmitter.emit("data");
eventEmitter.emit("data");

登入後複製

上面我們使用prependOnceListener 綁定了一個回呼函數，當觸發事件時，該回呼函數會在其他函數之前執行，並且只會執行一次，所以當第二次我們觸發函數時，該回調函數不會執行，控制台列印結果為

prepend once
on
on

登入後複製

removeAllListeners

removeAllListeners([event]) 方法可以删除事件 event 绑定的所有回调函数，如果没有传入 event 参数的话，那么该方法就会删除所有事件绑定的回调函数

const {EventEmitter} = require(&#39;events&#39;);
const eventEmitter = new EventEmitter();

eventEmitter.on("data", () => {
    console.log("data 1");
});

eventEmitter.on("data", () => {
    console.log("data 2");
});

eventEmitter.emit("data");
eventEmitter.removeAllListeners("data");
eventEmitter.emit("data");

登入後複製

上面程序为 data 事件绑定了两个回调函数，并且在调用 removeAllListeners 方法之前分别触发了一次 data 事件，第二次触发 data 事件时，不会有任何的回调函数被执行，removeAllListeners 删除了 data 事件绑定的所有回调函数。控制台的打印结果为：

data 1
data 2

登入後複製

eventNames

通过 eventNames 方法我们可以知道为哪些事件绑定了回调函数，它返回一个数组

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.on("start", () => {
    console.log("start");
});
eventEmitter.on("end", () => {
    console.log("end");
});
eventEmitter.on("error", () => {
    console.log("error");
});

console.log(eventEmitter.eventNames()); // [ &#39;start&#39;, &#39;end&#39;, &#39;error&#39; ]

登入後複製

如果我们将某事件的所有回调函数删除后，此时 eventNames 便不会返回该事件了

eventEmitter.removeAllListeners("error");
console.log(eventEmitter.eventNames()); // [ &#39;start&#39;, &#39;end&#39; ]

登入後複製

listenerCount

listenerCount 方法可以得到某个事件绑定了多少个回调函数

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.on("data", () => {

});
eventEmitter.on("data", () => {

});

console.log(eventEmitter.listenerCount("data")); // 2

登入後複製

setMaxLsiteners、getMaxListeners

setMaxListeners 是用来设置最多为每个事件绑定多少个回调函数，但是实际上是可以绑定超过设置的数目的回调函数的，不过当你绑定超过指定数目的回调函数时，会在控制台给出一个警告

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

// 设置只能为每个回调函数绑定 1 个回调函数
eventEmitter.setMaxListeners(1);

// 为 data 事件绑定了三个回调函数
eventEmitter.on("data", () => {
    console.log("data 1");
});
eventEmitter.on("data", () => {
    console.log("data 2");
});
eventEmitter.on("data", () => {
    console.log("data 3");
});

登入後複製

运行上述程序，控制台打印结果为

data 1
data 2
data 3
(node:36928) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 2 data listeners added to [EventEmitter]. Use emitter.setMaxListeners() to increase limit

登入後複製

可见事件绑定的三个回调函数都可以被触发，并且在控制台打印出了一条警告信息。

getMaxListeners 是获得能为每个事件绑定多少个回调函数的方法，使用 setMaxListeners 设置的值时多少，返回的值就是多少

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.setMaxListeners(1);

console.log(eventEmitter.getMaxListeners()); // 1

登入後複製

如果没有使用 setMaxLsiteners 进行设置，那么默认能够为每个事件最多绑定 10 个回调函数，可以通过 EventEmitter 的 defaultMaxListeners 属性获得该值

const {EventEmitter} = require("events");

console.log(EventEmitter.defaultMaxListeners); // 10

登入後複製

listeners、rawListeners

当我们使用 once 绑定一个回调函数时，不会直接为该事件绑定该函数，而是会使用一个函数包装该函数，这个包装函数称为 wrapper，然后为该事件绑定 wrapper 函数，在 wrapper 函数内部，设定了当执行一次之后将自己解绑的逻辑。

listeners 返回指定事件绑定的回调函数组成的数组，而 rawListeners 也是返回指定事件绑定的回调函数组成的数组，与 listeners 不同的是，对于 once 绑定的回调函数返回的是 wrapper，而不是原生绑定的函数。

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.once("data", () => {
    console.log("once");
})

let fns = eventEmitter.listeners("data");
// once 绑定的函数，不是 wrapper，内部没有解绑的逻辑，所以后面触发 data 事件时还会执行 once 绑定的函数
fns[0]()
eventEmitter.emit("data");

登入後複製

控制台打印结果为

once
once

登入後複製

下面将上面的 listeners 替换为 rawListeners

const {EventEmitter} = require("events");
const eventEmitter = new EventEmitter();

eventEmitter.once("data", () => {
    console.log("once");
})


let fns = eventEmitter.rawListeners("data");
// 因为返回的是 once 绑定函数的 wrapper，其内部有执行一次后解绑的逻辑
// 所以后面触发事件时 once 绑定的函数不会再执行
fns[0]()
eventEmitter.emit("data");

登入後複製

控制台的打印结果为

once

登入後複製

实现一个 EventEmitter

在这个小节将从零实现一个 EventEmitter，来加深对该模块的理解。首先我们需要准备一个 listeners 来存储所有绑定的回调函数，它是一个 Map 对象，键是事件名，而值是一个数组，数组中保存的是该事件绑定的回调函数。

class EventEmitter {
    constructor() {
        this.listeners = new Map();
    }
}

登入後複製

on、addListener

使用 on 绑定回调函数时，我们先判断 Map 集合中是否有为该事件绑定回调函数，如果有取出对应数组，并添加该回调函数进数组，没有则新建一个数组，添加该回调函数，并添加进 Map 集合

on(event, callback) {
    if(!this.listeners.has(event)) {
        this.listeners.set(event, []);
    }
    let fns = this.listeners.get(event);
    fns.push(callback);
}

登入後複製

addListener 的功能与 on 是一样的，我们直接调用 on 方法即可

addListener(event, callback) {
    this.on(event, callback);
}

登入後複製

emit

当我们使用 emit 触发事件时，我们从 Map 取出对应的回调函数组成的数组，然后依次取出函数执行。另外我们还可以通过 emit 传递参数

emit(event, ...args) {
    if(!this.listeners.has(event)) {
        return;
    }
    let fns = this.listeners.get(event);
    let values = [];
    for(let fn of fns) {
        values.push(fn);
    }
    for (let fn of values) {
        fn(...args);
    }
}

登入後複製

这里你可能会觉得我写的有点复杂，所以你会觉得直接这么写更好
emit(event, ...args) {
    if(!this.listeners.has(event)) {
        return;
    }
    for (let fn of fns) {
        fn(...args);
    }
}
登入後複製
一开始我也是这么写的，但是因为 once 绑定的函数它在执行完毕后将自己从数组中移除，并且是同步的，所以在执行循环的时候，数组是在不断变化的，使用上述的方式会使得一些回调函数会被漏掉，所以我才会先将数组中的函数复制到另一个数组，然后遍历这个新的数组，因为 once 绑定的函数它只会删除原数组中的函数，而不会删除新的这个数组，所以新数组的长度在遍历的过程不会改变，也就不会发生漏掉函数未执行的情况。

prependListener

实现 prependListener 的逻辑同 on 一样，不过我们是往数组的最前方添加回调函数

prependListener(event, callback) {
    if(!this.listeners.has(event)) {
        this.listeners.set(event, []);
    }
    let fns = this.listeners.get(event);
    fns.unshift(callback);
}

登入後複製

off、removeListener

使用 off 方法是用来解绑事件的，在数组中找到指定的函数，然后删除即可

off(event, callback) {
    if(!this.listeners.has(event)) {
        return;
    }
    let fns = this.listeners.get(event);
    // 找出数组中的回调函数，然后删除
    for (let i = 0; i < fns.length; i++) {
        if(fns[i] === callback) {
            fns.splice(i, 1);
            break;
        }
    }
    // 如果删除回调函数后，数组为空，则删除该事件
    if (fns.length === 0) {
        this.listeners.delete(event);
    }
}

登入後複製

removeListener 同 off 的作用一样，我们在内部直接调用 off 方法即可

removeListener(event, callback) {
    this.off(event, callback);
}

登入後複製

once、prependOnceListener

使用 once 绑定一个只执行一次的函数，所以我们需要将绑定的回调函数使用一个函数包装一下，然后添加进数组中，这个包装函数我们称之为 wrapper。在包装函数中，当执行一遍后会将自己从数组中删除

once(event, callback) {
    let wrapper = (...args) => {
        callback(...args);
        this.off(event, wrapper);
    }
    if(!this.listeners.has(event)) {
        this.listeners.set(event, []);
    }
    let fns = this.listeners.get(event);
    fns.push(wrapper);
}

登入後複製

prependOnceListener 的实现同 once，只是向数组的开头插入函数，将上面代码中的 push 换为 unshift 即可

prependOnceListener(event, callback) {
    let wrapper = (...args) => {
        callback(...args);
        this.off(event, wrapper);
    }
    if(!this.listeners.has(event)) {
        this.listeners.set(event, []);
    }
    let fns = this.listeners.get(event);
    fns.unshift(wrapper);
}

登入後複製

removeAllListeners

直接从删除对应的事件，如果没有传入具体事件的话，则需要删除所有的事件

removeAllListeners(event) {
    // 如果没有传入 event，则删除所有事件
    if (event === undefined) {
        this.listeners = new Map();
        return;
    }
    this.listeners.delete(event);
}

登入後複製

eventNames

获得已经绑定了哪些事件

eventNames() {
    return [...this.listeners.keys()];
}

登入後複製

listenerCount

获得某事件绑定可多少个回调函数

listenerCount(event) {
    return this.listeners.get(event).length;
}

登入後複製

上述的实现有一个 bug，那就是无法删除使用 once 绑定的函数，我的想法是使用一个 Map 将 once 绑定的函数同对应的 wrapper 对应，删除时即可根据 once 的回调函数找到对应的 wrapper 然后删除

constructor() {
    this.listeners = new Map();
    // 保存 once 的回调函数与对应的 wrapper 
    this.onceToWrapper = new Map();
}

once(event, callback) {
    let wrapper = (...args) => {
        callback(...args);
        // 删除之前，删除 callback 和 wrapper 的关系
        this.onceToWrapper.delete(callback);
        this.off(event, wrapper);
    }
    if(!this.listeners.has(event)) {
        this.listeners.set(event, []);
    }
    let fns = this.listeners.get(event);
    // 添加之前，绑定 callback 和 wrapper 的关系
    this.onceToWrapper.set(callback, wrapper);
    fns.push(wrapper);
}

prependOnceListener(event, callback) {
    let wrapper = (...args) => {
        callback(...args);
        // 同上
        this.onceToWrapper.delete(callback);
        this.off(event, wrapper);
    }
    if(!this.listeners.has(event)) {
        this.listeners.set(event, []);
    }
    let fns = this.listeners.get(event);
    // 同上
    this.onceToWrapper.set(callback, wrapper);
    fns.unshift(wrapper);
}

off(event, callback) {
    if(!this.listeners.has(event)) {
        return;
    }
    let fns = this.listeners.get(event);
    // 先从 onceToWrapper 中查找是否有对应的 wrapper，如果有说明是 once 绑定的
    callback = this.onceToWrapper.get(callback) || callback;
    for (let i = 0; i < fns.length; i++) {
        if(fns[i] === callback) {
            fns.splice(i, 1);
            break;
        }
    }
    if (fns.length === 0) {
        this.listeners.delete(event);
    }
}

登入後複製

全部代码如下

class EventEmitter {
    constructor() {
        this.listeners = new Map();
        this.onceToWrapper = new Map();
    }

    on(event, callback) {
        if(!this.listeners.has(event)) {
            this.listeners.set(event, []);
        }
        let fns = this.listeners.get(event);
        fns.push(callback);
    }

    addListener(event, callback) {
        this.on(event, callback);
    }

    emit(event, ...args) {
        if(!this.listeners.has(event)) {
            return;
        }
        let fns = this.listeners.get(event);
        let values = [];
        for(let fn of fns) {
            values.push(fn);
        }
        for (let fn of values) {
            fn(...args);
        }
    }

    prependListener(event, callback) {
        if(!this.listeners.has(event)) {
            this.listeners.set(event, []);
        }
        let fns = this.listeners.get(event);
        fns.unshift(callback);
        
    }

    off(event, callback) {
        if(!this.listeners.has(event)) {
            return;
        }
        let fns = this.listeners.get(event);
        callback = this.onceToWrapper.get(callback) || callback;
        for (let i = 0; i < fns.length; i++) {
            if(fns[i] === callback) {
                fns.splice(i, 1);
                break;
            }
        }
        if (fns.length === 0) {
            this.listeners.delete(event);
        }
    }

    removeListener(event, callback) {
        this.off(event, callback);
    }

    once(event, callback) {
        let wrapper = (...args) => {
            callback(...args);
            this.onceToWrapper.delete(callback);
            this.off(event, wrapper);   
        }
        if(!this.listeners.has(event)) {
            this.listeners.set(event, []);
        }
        let fns = this.listeners.get(event);
        this.onceToWrapper.set(callback, wrapper);
        fns.push(wrapper);
    }

    prependOnceListener(event, callback) {
        let wrapper = (...args) => {
            callback(...args);
            this.onceToWrapper.delete(callback);
            this.off(event, wrapper);
        }
        if(!this.listeners.has(event)) {
            this.listeners.set(event, []);
        }
        let fns = this.listeners.get(event);
        this.onceToWrapper.set(callback, wrapper);
        
        fns.unshift(wrapper);
    }

    removeAllListeners(event) {
        if (event === undefined) {
            this.listeners = new Map();
            return;
        }
        this.listeners.delete(event);
    }

    eventNames() {
        return [...this.listeners.keys()];
    }

    listenerCount(event) {
        return this.listeners.get(event).length;
    }
}

登入後複製

更多node相关知识，请访问：nodejs 教程！！

以上是一文聊聊Node.js中的EventEmitter模組的詳細內容。更多資訊請關注PHP中文網其他相關文章！