摘要:為什么把叫做集合而不能稱為嚴(yán)格意義上的對象,來看這個集合的構(gòu)造函數(shù)可以見得,是與處于同一層級的而非是繼承自,所以說由實(shí)例出來的對象更加的純凈,并沒有諸如等方法,更像是一個集合。
寫在前面
事件的編程方式具有輕量級、松耦合、只關(guān)注事務(wù)點(diǎn)等優(yōu)勢,在瀏覽器端,有著自己的一套DOM事件機(jī)制,其中含包括這諸如事件冒泡,事件捕獲等;然而Node的事件機(jī)制沒有事件冒泡等,其原理就是設(shè)計(jì)模式中的觀察者模式。Node很多的模塊繼承這個事件模塊,下面我們就來根據(jù)源碼來學(xué)習(xí)下其API,做到知其然更知其所以然。
引入模塊const EventEmitter = require("events"); const EventEmitter = require("events").EventEmitter;
經(jīng)常會看到這種兩種方式來引入我們的events模塊,但是在Node的高版本中可以直接使用第一種方式,高版本也支持下面這種方式,下面的這種方式主是在Node的0.10.x版本時使用,源碼中也是很清楚,之所以這么做就是為了兼容低版本時寫下的Node代碼:
module.exports = EventEmitter; EventEmitter.EventEmitter = EventEmitter;
注:之后提到的obj為EventEmitter的實(shí)例對象,也就是obj = new EventEmitter()
基本使用得到我們的事件構(gòu)造函數(shù)后,我們就可以來實(shí)例化一個事件對象:
const EventEmitter = require("events"), follow = new EventEmitter(); follow.on("node", question => { console.log(`有一個關(guān)于node的問題: ${question}`); }); follow.emit("node", "jade與ejs選擇哪個?");
這是一個簡單的使用,下面我們就來看看我們所用到的API以及它們的實(shí)現(xiàn):
訂閱事件on(type, listener)來訂閱事件,傳入的type參數(shù)為事件名,listener為待發(fā)布函數(shù)。同時addListener方法和on方法有著同樣的效果,指向的是內(nèi)存的同一塊:
EventEmitter.prototype.on = EventEmitter.prototype.addListener;
在調(diào)用on時,假若我們訂閱了newListener事件,該事件會先被發(fā)布。
那么問題來了?訂閱的事件被存儲在了哪里呢?
答案就是obj._events,這是一個事件集合,事件名就是該集合的鍵名,當(dāng)事件的待補(bǔ)發(fā)函數(shù)只有一個時,鍵值為函數(shù);當(dāng)有多個時,鍵值為數(shù)組。為什么把obj._events叫做集合而不能稱為嚴(yán)格意義上的對象,來看這個集合的構(gòu)造函數(shù):
function EventHandlers () {} EventHandlers.prototype = Object.create(null);
可以見得,EventHandlers.prototype是與Object.prototype處于同一層級的而非是繼承自Object.prototype,所以說由EventHandlers實(shí)例出來的對象更加的"純凈",并沒有諸如toString等方法,更像是一個集合。
隨著給一個事件添加待發(fā)布函數(shù),當(dāng)添加的數(shù)量超過10條是,會發(fā)現(xiàn)有警告:
(node) warning: possible EventEmitter memory leak detected. 11 git listeners added. Use emitter.setMaxListeners() to increase limit.
產(chǎn)生警告的原因就是事件待發(fā)布函數(shù)數(shù)組的長度超過了默認(rèn)的最大容量,默認(rèn)的最大容量是EventEmitter.defaultMaxListeners,而這個屬性是一個getter/setter訪問器,訪問的是變量defaultMaxListeners的值,也就是10。
// 得到最大容量 function $getMaxListeners (that) { if (that._maxListeners === undefined) return EventEmitter.defaultMaxListeners; return that._maxListeners; } // 發(fā)出警告代碼: if (!existing.warned) { m = $getMaxListeners(target); if (m && m > 0 && existing.length > m) { existing.warned = true; process.emitWarning("Possible EventEmitter memory leak detected. " + `${existing.length} ${type} listeners added. ` + "Use emitter.setMaxListeners() to increase limit"); } }
觀察獲得最大容量函數(shù)可以發(fā)現(xiàn),給obj._maxListeners賦值可以提升我們的最大容量(obj._maxListeners初始化時被賦值為undefined),可以利用setMaxListeners(n)方法來進(jìn)行賦值:
EventEmitter.prototype.setMaxListeners = function (n) { if (typeof n !== "number" || n < 0 || isNaN(n)) throw new TypeError("n must be a position number"); this._maxListeners = n; return this; };
看源碼可以發(fā)現(xiàn),訂閱事件其實(shí)是用的_addListener函數(shù),其最后一個參數(shù)為prepend,代表著是否將待發(fā)布函數(shù)添加到事件數(shù)組的第一個,所以應(yīng)該還有一個prependListener(type, listener)函數(shù),可以將listener添加到obj.events.type的第一個位置。
once(type, listener),通過這種方式添加的待發(fā)布函數(shù),只能被發(fā)布一次,發(fā)布一次后就會被移除。
// 將listener包裹在一個g函數(shù)中,在每次執(zhí)行時,現(xiàn)將該函數(shù)從事件數(shù)組中移除 // 真正的待發(fā)布函數(shù)成為了g函數(shù)的屬性 function _onceWrap (target, type, listener) { var fired = false; function g () { target.removeListener(type, g); // 先移除 if (!fired) { fired = true; listener.apply(target, arguments); // 再發(fā)布 } } g.listener = listener; return g; }
于此對應(yīng)的還有prependOnceListener方法,下面來看一個例子:
work.once("git", pull); work.on("git", () => { console.log("git status"); }); work.emit("git"); console.log("第二次"); work.emit("git"); // git pull // git status // 第二次 // git status發(fā)布事件
emit(type, args)來進(jìn)行事件的發(fā)布,在實(shí)現(xiàn)上也很簡單就是執(zhí)行obj.events.type的函數(shù)或者遍歷obj.events.type數(shù)組一次執(zhí)行函數(shù),需要注意的是error事件的發(fā)布,如果沒有訂閱error事件的話,發(fā)布時,就會用到throw new Error()。
移除事件removeListener(type, listener)來移除${type}事件的listener函數(shù)
removeAllListeners(type),當(dāng)傳入type時會將type事件全部移除;不傳入?yún)?shù)時,會將obj._events重置。
在移除時,假若給obj訂閱了removeListener事件的話,那么在每移除一個待發(fā)布函數(shù)時,會發(fā)布一次該事件,在將obj重置時,也會最后將該事件移除。
function pull () { console.log("git pull"); }; work.on("removeListener", (type, fn) => { console.log(`remove ${type} ${fn.name} event`); }) work.on("git", pull); work.on("git", () => { console.log("git status"); }); work.removeListener("git", pull); work.emit("git"); // 依次輸出 // remove git pull event // git status其余API
eventNames,返回實(shí)例對象所有的事件名數(shù)組或者一個空數(shù)組,源碼中利用了ES6的新方法Reflect.ownKeys來獲得obj._events對象的自身屬性:
EventEmitter.prototype.eventNames = function eventNames() { return this._eventsCount > 0 ? Reflect.ownKeys(this._events) : []; };
listenerCount(type)返回事件的待發(fā)布函數(shù)的的數(shù)量,也就是obj._events.length or 1,這個方法在obj上和EventEmitter都有,本質(zhì)上都是調(diào)用下面這個方法,實(shí)現(xiàn)也是很明了:
function listenerCount (type) { const events = this._events; if (events) { const evlistener = events[type]; if (typeof evlistener === "function") { return 1; } else if (evlistener) { return evlistener.length; } } }
listeners(type),返回${type}事件的待發(fā)布函數(shù)數(shù)組或者空數(shù)組,需要注意是這個數(shù)組并不是obj.events.type的引用。
總結(jié)這次閱讀Node的源代碼發(fā)現(xiàn),Node源碼中對于原生的slice和splice并沒有使用,而是自己寫了一個針對性更加強(qiáng)的arrayClone和spliceOne函數(shù),不知這樣寫的原因是不是要將速度提升,因?yàn)榭碫8源碼會發(fā)現(xiàn),slice和splice的實(shí)現(xiàn)有一些復(fù)雜,都有額外的判斷來對參數(shù)進(jìn)行規(guī)范化,像Node源碼自己寫的話,減少了這些無用的判斷,從而提升了效率。當(dāng)然這只是我個人的一些理解,如有錯誤還請大家指出。
附:解析的events.js
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/87862.html
摘要:實(shí)現(xiàn)的效果如下界面可能不是太好看,考慮到容器的高度會被拉長,因此沒有用圖片做背景。 實(shí)現(xiàn)的效果如下: showImg(https://segmentfault.com/img/remote/1460000011155402); 界面可能不是太好看?,考慮到容器的高度會被拉長,因此沒有用圖片做背景。 預(yù)覽 便利貼 涉及的知識點(diǎn) sass(css 預(yù)編譯器) webpack(自動化構(gòu)...
摘要:前言以異步和事件驅(qū)動的特性著稱但異步是怎么實(shí)現(xiàn)的呢其中核心的一部分就是下文中內(nèi)容基本來自于文檔有不準(zhǔn)確地方請指出什么是能讓的操作表現(xiàn)得無阻塞盡管是單線程的但通過盡可能的將操作放到操作系統(tǒng)內(nèi)核由于現(xiàn)在大多數(shù)內(nèi)核都是多線程的它們可以在后臺執(zhí)行多 前言 Node.js以異步I/O和事件驅(qū)動的特性著稱,但異步I/O是怎么實(shí)現(xiàn)的呢?其中核心的一部分就是event loop,下文中內(nèi)容基本來自于N...
摘要:當(dāng)其就緒時,會調(diào)用執(zhí)行定時函數(shù)。進(jìn)程超時停止進(jìn)程將要停止時,并不會立刻停止,而是會等待事件循環(huán)結(jié)束后停止,這時為了防止進(jìn)程不退出,還設(shè)置了的延遲,超過就會停止該進(jìn)程。當(dāng)允許空閑時間小于時,統(tǒng)一每隔檢測空閑連接。 前言 swoole 的 timer 模塊功能有三個:用戶定時任務(wù)、剔除空閑連接、更新 server 時間。timer 模塊的底層有兩種,一種是基于 alarm 信號,一種是基于...
摘要:模塊基于上的事件的封裝,利用屬性,封裝出系列事件。這個判斷需要引入設(shè)備偵測模塊。然后是監(jiān)測事件,根據(jù)這三個事件,可以組合出和事件。其中變量對象和模塊中的對象的作用差不多,可以先看看讀源碼之模塊對模塊的分析。 Gesture 模塊基于 IOS 上的 Gesture 事件的封裝,利用 scale 屬性,封裝出 pinch 系列事件。 讀 Zepto 源碼系列文章已經(jīng)放到了github上,歡...
摘要:定時器在和瀏覽器中的表現(xiàn)形式是相同的。關(guān)于定時器的一個重要的事情是,我們提供的延遲不代表在這個時間之后回調(diào)就會被執(zhí)行。它的真正含義是,一旦主線程完成所有操作包括微任務(wù)并且沒有其它具有更高優(yōu)先級的定時器,將在此時間之后執(zhí)行回調(diào)。 眾成翻譯 原文鏈接 關(guān)于作者 2018年6月21日出版? 本指南面向了解Javascript但尚未十分熟悉Node.js的前端開發(fā)人員。我這里不專注于語言本身...
閱讀 5257·2021-10-15 09:42
閱讀 1621·2021-09-22 16:05
閱讀 3280·2021-09-22 15:57
閱讀 3418·2019-12-27 12:06
閱讀 978·2019-08-29 15:16
閱讀 2888·2019-08-26 12:24
閱讀 391·2019-08-26 12:02
閱讀 1897·2019-08-23 16:00