點(diǎn)擊下載
本文文檔

當(dāng)前位置：首頁(yè) - 科技 - 知識(shí)百科 - 正文

理解 JavaScript EventEmitter

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:17:19

理解 JavaScript EventEmitter

理解 JavaScript EventEmitter:2個(gè)多月前把 Github 上的 eventemitter3 和 Node.js 下的事件模塊 events 的源碼抄了一遍，才終于對(duì) JavaScript 事件有所了解。上個(gè)周末花點(diǎn)時(shí)間根據(jù)之前看源碼的理解自己用 ES6 實(shí)現(xiàn)了一個(gè) eventemitter8，然后也發(fā)布到 npm 上了，讓我比

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀理解 JavaScript EventEmitter:2個(gè)多月前把 Github 上的 eventemitter3 和 Node.js 下的事件模塊 events 的源碼抄了一遍，才終于對(duì) JavaScript 事件有所了解。上個(gè)周末花點(diǎn)時(shí)間根據(jù)之前看源碼的理解自己用 ES6 實(shí)現(xiàn)了一個(gè) eventemitter8，然后也發(fā)布到 npm 上了，讓我比

2個(gè)多月前把 Github 上的 eventemitter3 和 Node.js 下的事件模塊 events 的源碼抄了一遍，才終于對(duì) JavaScript 事件有所了解。

上個(gè)周末花點(diǎn)時(shí)間根據(jù)之前看源碼的理解自己用 ES6 實(shí)現(xiàn)了一個(gè) eventemitter8，然后也發(fā)布到 npm 上了，讓我比較意外的是才發(fā)布兩天在沒(méi)有 readme 介紹，沒(méi)有任何宣傳的情況下居然有45個(gè)下載，我很好奇都是誰(shuí)下載的，會(huì)不會(huì)用。我花了不少時(shí)間半抄半原創(chuàng)的一個(gè) JavaScript 時(shí)間處理庫(kù) now.js (npm 傳送門：now.js) ，在我大力宣傳的情況下，4個(gè)月的下載量才177。真是有心栽花花不開(kāi)，無(wú)心插柳柳成蔭！

eventemitter8 大部分是我根據(jù)看源碼理解后寫出來(lái)的，有一些方法如listeners，listenerCount 和 eventNames 一下子想不起來(lái)到底做什么，回頭重查。測(cè)試用例不少是參考了 eventemitter3，在此對(duì) eventemitter3 的開(kāi)發(fā)者們和 Node.js 事件模塊的開(kāi)發(fā)者們表示感謝！

下面來(lái)講講我對(duì) JavaScript 事件的理解：

從上圖可以看出，JavaScript 事件最核心的包括事件監(jiān)聽(tīng) (addListener)、事件觸發(fā) (emit)、事件刪除 (removeListener)。

事件監(jiān)聽(tīng)(addListener)

首先，監(jiān)聽(tīng)肯定要有監(jiān)聽(tīng)的目標(biāo)，或者說(shuō)是對(duì)象，那為了達(dá)到區(qū)分目標(biāo)的目的，名字是不可少的，我們定義為 type。

其次，監(jiān)聽(tīng)的目標(biāo)一定要有某種動(dòng)作，對(duì)應(yīng)到 JavaScript 里實(shí)際上就是某種方法，這里定義為 fn。

譬如可以監(jiān)聽(tīng)一個(gè) type 為 add，方法為某一個(gè)變量 a 值加1的方法 fn = () => a + 1的事件。如果我們還想監(jiān)聽(tīng)一個(gè)使變量 b 加2的方法，我們第一反應(yīng)可能是創(chuàng)建一個(gè) type 為 add2，方法為 fn1 = () => b + 2 的事件。你可能會(huì)想，這太浪費(fèi)了，我能不能只監(jiān)聽(tīng)一個(gè)名字，讓它執(zhí)行多于一個(gè)方法的事件。當(dāng)然是可以的。

那么怎么做呢？

很簡(jiǎn)單，把監(jiān)聽(tīng)的方法放在一個(gè)數(shù)組里，遍歷數(shù)組順序執(zhí)行就可以了。以上例子變?yōu)?type 為 add，方法為[fn, fn1]。

如果要細(xì)分的話還可以分為可以無(wú)限次執(zhí)行的事件 on 和只允許執(zhí)行一次的事件 once (執(zhí)行完后立即將事件刪除)。待后詳述。

事件觸發(fā)(emit)

單有事件監(jiān)聽(tīng)是不夠的，必須要有事件觸發(fā)才能算完成整個(gè)過(guò)程。emit 就是去觸發(fā)監(jiān)聽(tīng)的特定 type 對(duì)應(yīng)的單個(gè)事件或者一系列事件。拿前面的例子來(lái)說(shuō)單個(gè)事件就是去執(zhí)行 fn，一系列事件就是去遍歷執(zhí)行 fn 和 fn1。

事件刪除(removeListener)

嚴(yán)格意義上來(lái)講，事件監(jiān)聽(tīng)和事件觸發(fā)已經(jīng)能完成整個(gè)過(guò)程。事件刪除可有可無(wú)。但很多時(shí)候，我們還是需要事件刪除的。比如前面講的只允許執(zhí)行一次事件 once，如果不提供刪除方法，很難保證你什么時(shí)候會(huì)再次執(zhí)行它。通常情況下，只要是不再需要的事件，我們都應(yīng)該去刪除它。

核心部分講完，下面簡(jiǎn)單的對(duì) eventemitter8的源碼進(jìn)行解析。

源碼解析

全部源碼:

const toString = Object.prototype.toString;
const isType = obj => toString.call(obj).slice(8, -1).toLowerCase();
const isArray = obj => Array.isArray(obj) || isType(obj) === 'array';
const isNullOrUndefined = obj => obj === null || obj === undefined;

const _addListener = function(type, fn, context, once) {
 if (typeof fn !== 'function') {
 throw new TypeError('fn must be a function');
 }

 fn.context = context;
 fn.once = !!once;

 const event = this._events[type];
 // only one, let `this._events[type]` to be a function
 if (isNullOrUndefined(event)) {
 this._events[type] = fn;
 } else if (typeof event === 'function') {
 // already has one function, `this._events[type]` must be a function before
 this._events[type] = [event, fn];
 } else if (isArray(event)) {
 // already has more than one function, just push
 this._events[type].push(fn);
 }

 return this;
};

class EventEmitter {
 constructor() {
 if (this._events === undefined) {
 this._events = Object.create(null);
 }
 }

 addListener(type, fn, context) {
 return _addListener.call(this, type, fn, context);
 }

 on(type, fn, context) {
 return this.addListener(type, fn, context);
 }

 once(type, fn, context) {
 return _addListener.call(this, type, fn, context, true);
 }

 emit(type, ...rest) {
 if (isNullOrUndefined(type)) {
 throw new Error('emit must receive at lease one argument');
 }

 const events = this._events[type];

 if (isNullOrUndefined(events)) return false;

 if (typeof events === 'function') {
 events.call(events.context || null, rest);
 if (events.once) {
 this.removeListener(type, events);
 }
 } else if (isArray(events)) {
 events.map(e => {
 e.call(e.context || null, rest);
 if (e.once) {
 this.removeListener(type, e);
 }
 });
 }

 return true;
 }

 removeListener(type, fn) {
 if (isNullOrUndefined(this._events)) return this;

 // if type is undefined or null, nothing to do, just return this
 if (isNullOrUndefined(type)) return this;

 if (typeof fn !== 'function') {
 throw new Error('fn must be a function');
 }

 const events = this._events[type];

 if (typeof events === 'function') {
 events === fn && delete this._events[type];
 } else {
 const findIndex = events.findIndex(e => e === fn);

 if (findIndex === -1) return this;

 // match the first one, shift faster than splice
 if (findIndex === 0) {
 events.shift();
 } else {
 events.splice(findIndex, 1);
 }

 // just left one listener, change Array to Function
 if (events.length === 1) {
 this._events[type] = events[0];
 }
 }

 return this;
 }

 removeAllListeners(type) {
 if (isNullOrUndefined(this._events)) return this;

 // if not provide type, remove all
 if (isNullOrUndefined(type)) this._events = Object.create(null);

 const events = this._events[type];
 if (!isNullOrUndefined(events)) {
 // check if `type` is the last one
 if (Object.keys(this._events).length === 1) {
 this._events = Object.create(null);
 } else {
 delete this._events[type];
 }
 }

 return this;
 }

 listeners(type) {
 if (isNullOrUndefined(this._events)) return [];

 const events = this._events[type];
 // use `map` because we need to return a new array
 return isNullOrUndefined(events) ? [] : (typeof events === 'function' ? [events] : events.map(o => o));
 }

 listenerCount(type) {
 if (isNullOrUndefined(this._events)) return 0;

 const events = this._events[type];

 return isNullOrUndefined(events) ? 0 : (typeof events === 'function' ? 1 : events.length);
 }

 eventNames() {
 if (isNullOrUndefined(this._events)) return [];

 return Object.keys(this._events);
 }
}

export default EventEmitter;

代碼很少，只有151行，因?yàn)閷懙暮?jiǎn)單版，且用的 ES6，所以才這么少；Node.js的事件和 eventemitter3可比這多且復(fù)雜不少，有興趣可自行深入研究。

const toString = Object.prototype.toString;
const isType = obj => toString.call(obj).slice(8, -1).toLowerCase();
const isArray = obj => Array.isArray(obj) || isType(obj) === 'array';
const isNullOrUndefined = obj => obj === null || obj === undefined;

這4行就是一些工具函數(shù)，判斷所屬類型、判斷是否是 null 或者 undefined。

constructor() {
 if (isNullOrUndefined(this._events)) {
 this._events = Object.create(null);
 }
}

創(chuàng)建了一個(gè) EventEmitter 類，然后在構(gòu)造函數(shù)里初始化一個(gè)類的 _events 屬性，這個(gè)屬性不需要要繼承任何東西，所以用了 Object.create(null)。當(dāng)然這里 isNullOrUndefined(this._events) 還去判斷了一下 this._events 是否為 undefined 或者 null，如果是才需要?jiǎng)?chuàng)建。但這不是必要的，因?yàn)閷?shí)例化一個(gè) EventEmitter 都會(huì)調(diào)用構(gòu)造函數(shù)，皆為初始狀態(tài)，this._events 應(yīng)該是不可能已經(jīng)定義了的，可去掉。

addListener(type, fn, context) {
 return _addListener.call(this, type, fn, context);
}

on(type, fn, context) {
 return this.addListener(type, fn, context);
}

once(type, fn, context) {
 return _addListener.call(this, type, fn, context, true);
}

接下來(lái)是三個(gè)方法 addListener、on、once ，其中 on 是 addListener 的別名，可執(zhí)行多次。once 只能執(zhí)行一次。

三個(gè)方法都用到了 _addListener 方法：

const _addListener = function(type, fn, context, once) {
 if (typeof fn !== 'function') {
 throw new TypeError('fn must be a function');
 }

 fn.context = context;
 fn.once = !!once;

 const event = this._events[type];
 // only one, let `this._events[type]` to be a function
 if (isNullOrUndefined(event)) {
 this._events[type] = fn;
 } else if (typeof event === 'function') {
 // already has one function, `this._events[type]` must be a function before
 this._events[type] = [event, fn];
 } else if (isArray(event)) {
 // already has more than one function, just push
 this._events[type].push(fn);
 }

 return this;
};

方法有四個(gè)參數(shù)，type 是監(jiān)聽(tīng)事件的名稱，fn 是監(jiān)聽(tīng)事件對(duì)應(yīng)的方法，context 俗稱爸爸，改變 this 指向的，也就是執(zhí)行的主體。once 是一個(gè)布爾型，用來(lái)標(biāo)志是否只執(zhí)行一次。
首先判斷 fn 的類型，如果不是方法，拋出一個(gè)類型錯(cuò)誤。fn.context = context;fn.once = !!once 把執(zhí)行主體和是否執(zhí)行一次作為方法的屬性。const event = this._events[type] 把該對(duì)應(yīng) type 的所有已經(jīng)監(jiān)聽(tīng)的方法存到變量 event。

// only one, let `this._events[type]` to be a function
if (isNullOrUndefined(event)) {
 this._events[type] = fn;
} else if (typeof event === 'function') {
 // already has one function, `this._events[type]` must be a function before
 this._events[type] = [event, fn];
} else if (isArray(event)) {
 // already has more than one function, just push
 this._events[type].push(fn);
}

return this;

如果 type 本身沒(méi)有正在監(jiān)聽(tīng)任何方法，this._events[type] = fn 直接把監(jiān)聽(tīng)的方法 fn 賦給 type 屬性；如果正在監(jiān)聽(tīng)一個(gè)方法，則把要添加的 fn 和之前的方法變成一個(gè)含有2個(gè)元素的數(shù)組 [event, fn]，然后再賦給 type 屬性，如果正在監(jiān)聽(tīng)超過(guò)2個(gè)方法，直接 push 即可。最后返回 this ，也就是 EventEmitter 實(shí)例本身。

簡(jiǎn)單來(lái)講不管是監(jiān)聽(tīng)多少方法，都放到數(shù)組里是沒(méi)必要像上面細(xì)分。但性能較差，只有一個(gè)方法時(shí) key: fn 的效率比 key: [fn] 要高。

再回頭看看三個(gè)方法:

addListener(type, fn, context) {
 return _addListener.call(this, type, fn, context);
}

on(type, fn, context) {
 return this.addListener(type, fn, context);
}

once(type, fn, context) {
 return _addListener.call(this, type, fn, context, true);
}

addListener 需要用 call 來(lái)改變 this 指向，指到了類的實(shí)例。once 則多傳了一個(gè)標(biāo)志位 true 來(lái)標(biāo)志它只需要執(zhí)行一次。這里你會(huì)看到我在 addListener 并沒(méi)有傳 false 作為標(biāo)志位，主要是因?yàn)槲覒校⒉粫?huì)影響到程序的邏輯。因?yàn)榍懊娴?fn.once = !!once 已經(jīng)能很好的處理不傳值的情況。沒(méi)傳值 !!once 為 false。

接下來(lái)講 emit

emit(type, ...rest) {
 if (isNullOrUndefined(type)) {
 throw new Error('emit must receive at lease one argument');
 }

 const events = this._events[type];

 if (isNullOrUndefined(events)) return false;

 if (typeof events === 'function') {
 events.call(events.context || null, rest);
 if (events.once) {
 this.removeListener(type, events);
 }
 } else if (isArray(events)) {
 events.map(e => {
 e.call(e.context || null, rest);
 if (e.once) {
 this.removeListener(type, e);
 }
 });
 }

 return true;
}

事件觸發(fā)需要指定具體的 type 否則直接拋出錯(cuò)誤。這個(gè)很容易理解，你都沒(méi)有指定名稱，我怎么知道該去執(zhí)行誰(shuí)的事件。if (isNullOrUndefined(events)) return false，如果 type 對(duì)應(yīng)的方法是 undefined 或者 null ，直接返回 false 。因?yàn)閴焊鶝](méi)有對(duì)應(yīng) type 的方法可以執(zhí)行。而 emit 需要知道是否被成功觸發(fā)。

接著判斷 evnts 是不是一個(gè)方法，如果是， events.call(events.context || null, rest) 執(zhí)行該方法，如果指定了執(zhí)行主體，用 call 改變 this 的指向指向 events.context 主體，否則指向 null ，全局環(huán)境。對(duì)于瀏覽器環(huán)境來(lái)說(shuō)就是 window。差點(diǎn)忘了 rest ，rest 是方法執(zhí)行時(shí)的其他參數(shù)變量，可以不傳，也可以為一個(gè)或多個(gè)。執(zhí)行結(jié)束后判斷 events.once ，如果為 true ，就用 removeListener 移除該監(jiān)聽(tīng)事件。

如果 evnts 是數(shù)組，邏輯一樣，只是需要遍歷數(shù)組去執(zhí)行所有的監(jiān)聽(tīng)方法。

成功執(zhí)行結(jié)束后返回 true 。

removeListener(type, fn) {
 if (isNullOrUndefined(this._events)) return this;
 // if type is undefined or null, nothing to do, just return this
 if (isNullOrUndefined(type)) return this;
 if (typeof fn !== 'function') {
 throw new Error('fn must be a function');
 }
 const events = this._events[type];
 if (typeof events === 'function') {
 events === fn && delete this._events[type];
 } else {
 const findIndex = events.findIndex(e => e === fn);
 if (findIndex === -1) return this;
 // match the first one, shift faster than splice
 if (findIndex === 0) {
 events.shift();
 } else {
 events.splice(findIndex, 1);
 }
 // just left one listener, change Array to Function
 if (events.length === 1) {
 this._events[type] = events[0];
 }
 }
 return this;
}

removeListener 接收一個(gè)事件名稱 type 和一個(gè)將要被移除的方法 fn 。if (isNullOrUndefined(this._events)) return this 這里表示如果 EventEmitter 實(shí)例本身的 _events 為 null 或者 undefined 的話，沒(méi)有任何事件監(jiān)聽(tīng)，直接返回 this 。

if (isNullOrUndefined(type)) return this 如果沒(méi)有提供事件名稱，也直接返回 this 。

if (typeof fn !== 'function') {
 throw new Error('fn must be a function');
}

fn 如果不是一個(gè)方法，直接拋出錯(cuò)誤，很好理解。

接著判斷 type 對(duì)應(yīng)的 events 是不是一個(gè)方法，是，并且 events === fn 說(shuō)明 type 對(duì)應(yīng)的方法有且僅有一個(gè)，等于我們指定要?jiǎng)h除的方法。這個(gè)時(shí)候 delete this._events[type] 直接刪除掉 this._events 對(duì)象里 type 即可。

所有的 type 對(duì)應(yīng)的方法都被移除后。想一想 this._events[type] = undefined 和 delete this._events[type] 會(huì)有什么不同？

差異是很大的，this._events[type] = undefined 僅僅是將 this._events 對(duì)象里的 type 屬性賦值為 undefined ，type 這一屬性依然占用內(nèi)存空間，但其實(shí)已經(jīng)沒(méi)什么用了。如果這樣的 type 一多，有可能造成內(nèi)存泄漏。delete this._events[type] 則直接刪除，不占內(nèi)存空間。前者也是 Node.js 事件模塊和 eventemitter3 早期實(shí)現(xiàn)的做法。

如果 events 是數(shù)組，這里我沒(méi)有用 isArray 進(jìn)行判斷，而是直接用一個(gè) else ，原因是 this._events[type] 的輸入限制在 on 或者 once 中，而它們已經(jīng)限制了 this._events[type] 只能是方法組成的數(shù)組或者是一個(gè)方法，最多加上不小心或者人為賦成 undefined 或 null 的情況，但這個(gè)情況我們也在前面判斷過(guò)了。

因?yàn)?isArray 這個(gè)工具方法其實(shí)運(yùn)行效率是不高的，為了追求一些效率，在不影響運(yùn)行邏輯情況下可以不用 isArray 。而且 typeof events === 'function' 用 typeof 判斷方法也比 isArray 的效率要高，這也是為什么不先判斷是否是數(shù)組的原因。用 typeof 去判斷一個(gè)方法也比 Object.prototype.toSting.call(events) === '[object Function] 效率要高。但數(shù)組不能用 typeof 進(jìn)行判斷，因?yàn)榉祷氐氖?object，這眾所周知。雖然如此，在我面試過(guò)的很多人中，仍然有很多人不知道。。

const findIndex = events.findIndex(e => e === fn) 此處用 ES6 的數(shù)組方法 findIndex 直接去查找 fn 在 events 中的索引。如果 findIndex === -1 說(shuō)明我們沒(méi)有找到要?jiǎng)h除的 fn ，直接返回 this 就好。如果 findIndex === 0 ，是數(shù)組第一個(gè)元素，shift 剔除，否則用 splice 剔除。因?yàn)?shift 比 splice 效率高。

findIndex 的效率其實(shí)沒(méi)有 for 循環(huán)去查找的高，所以 eventemitter8 的效率在我沒(méi)有做 benchmark 之前我就知道肯定會(huì)比 eventemitter3 效率要低不少。不那么追求執(zhí)行效率時(shí)當(dāng)然是用最懶的方式來(lái)寫最爽。所謂的懶即正義。。

最后還得判斷移除 fn 后 events 剩余的數(shù)量，如果只有一個(gè)，基于之前要做的優(yōu)化，this._events[type] = events[0] 把含有一個(gè)元素的數(shù)組變成一個(gè)方法，降維打擊一下。。

最后的最后 return this 返回自身，鏈?zhǔn)秸{(diào)用還能用得上。

removeAllListeners(type) {
 if (isNullOrUndefined(this._events)) return this;
 // if not provide type, remove all
 if (isNullOrUndefined(type)) this._events = Object.create(null);
 const events = this._events[type];
 if (!isNullOrUndefined(events)) {
 // check if type is the last one
 if (Object.keys(this._events).length === 1) {
 this._events = Object.create(null);
 } else {
 delete this._events[type];
 }
 }
 return this;
};

removeAllListeners 指的是要?jiǎng)h除一個(gè) type 對(duì)應(yīng)的所有方法。參數(shù) type 是可選的，如果未指定 type ，默認(rèn)把所有的監(jiān)聽(tīng)事件刪除，直接 this._events = Object.create(null) 操作即可，跟初始化 EventEmitter 類一樣。

如果 events 既不是 null 且不是 undefined 說(shuō)明有可刪除的 type ，先用 Object.keys(this._events).length === 1 判斷是不是最后一個(gè) type 了，如果是，直接初始化 this._events = Object.create(null)，否則 delete this._events[type] 直接刪除 type 屬性，一步到位。

最后返回 this 。

到目前為止，所有的核心功能已經(jīng)講完。

listeners(type) {
 if (isNullOrUndefined(this._events)) return [];
 const events = this._events[type];
 // use `map` because we need to return a new array
 return isNullOrUndefined(events) ? [] : (typeof events === 'function' ? [events] : events.map(o => o));
}

listenerCount(type) {
 if (isNullOrUndefined(this._events)) return 0;
 const events = this._events[type];
 return isNullOrUndefined(events) ? 0 : (typeof events === 'function' ? 1 : events.length);
}

eventNames() {
 if (isNullOrUndefined(this._events)) return [];
 return Object.keys(this._events);
}

listeners 返回的是 type 對(duì)應(yīng)的所有方法。結(jié)果都是一個(gè)數(shù)組，如果沒(méi)有，返回空數(shù)組；如果只有一個(gè)，把它的方法放到一個(gè)數(shù)組中返回；如果本來(lái)就是一個(gè)數(shù)組，map 返回。之所以用 map 返回而不是直接 return this._events[type] 是因?yàn)?map 返回一個(gè)新的數(shù)組，是深度復(fù)制，修改數(shù)組中的值不會(huì)影響到原數(shù)組。this._events[type] 則返回原數(shù)組的一個(gè)引用，是淺度復(fù)制，稍不小心改變值會(huì)影響到原數(shù)組。造成這個(gè)差異的底層原因是數(shù)組是一個(gè)引用類型，淺度復(fù)制只是指針拷貝。這可以單獨(dú)寫一篇文章，不展開(kāi)了。

listenerCount 返回的是 type 對(duì)應(yīng)的方法的個(gè)數(shù)，代碼一眼就明白，不多說(shuō)。

eventNames 這個(gè)返回的是所有 type 組成的數(shù)組，沒(méi)有返回空數(shù)組，否則用 Object.keys(this._events) 直接返回。

最后的最后，export default EventEmitter 把 EventEmitter 導(dǎo)出。

結(jié)語(yǔ)

我是先看了兩個(gè)庫(kù)才知道怎么寫的，其實(shí)最好的學(xué)習(xí)方法是知道 EventEmitter 是干什么用的以后自己動(dòng)手寫，寫完以后再和那些庫(kù)進(jìn)行對(duì)比，找出差距，修正再修正。

但也不是說(shuō)先看再寫沒(méi)有收獲，至少比只看不寫和看都沒(méi)看的有收獲不是。。

水平有限，代碼錯(cuò)漏或者文章講不清楚之處在所難免，歡迎大家批評(píng)指正。