深入出不来nodejs源码-events模块
2018-08-10 11:20:57来源:博客园 阅读 ()
这一节内容超级简单,纯JS,就当给自己放个假了,V8引擎和node的C++代码看得有点脑阔疼。
学过DOM的应该都知道一个API,叫addeventlistener,即事件绑定。这个东西贯穿了整个JS的学习过程,无论是刚开始的自己获取DOM手动绑,还是后期vue的直接@click,所有的交互都离不开这个东西。
同样,在node中,事件绑定也贯穿了整个框架。基本上大多数的内置模块以events为原型,下面的代码随处可见:
EventEmitter.call(this);
不同的是,页面上DOM的事件绑定是由浏览器来实现,触发也是一些操作'间接'触发,并不需要去主动emit对应事件,并且有冒泡和捕获这两特殊的性质。
但是在node中,不存在dom,绑定的目标是一个对象(dom本质上也是对象),在内部node自己用纯JS实现了一个事件绑定与事件触发类。
本文相关源码来源于https://github.com/nodejs/node/blob/master/lib/events.js。
首先看一下构造函数:
function EventEmitter() { EventEmitter.init.call(this); }
这里会调用一个init方法,this指向调用对象,初始化方法也很简单:
EventEmitter.init = function() { // 事件属性 if (this._events === undefined || this._events === Object.getPrototypeOf(this)._events) { this._events = Object.create(null); this._eventsCount = 0; } // 同类型事件最大监听数量 this._maxListeners = this._maxListeners || undefined; };
涉及的三个属性分别是:
1、_events => 一个挂载属性,空对象,负责收集所有类型的事件
2、_eventsCount => 记录目前绑定事件类型的数量
3、_maxListeners => 同类型事件listener数量限制
事件相关的主要操作有3个,依次来看。
绑定事件/on
虽然一般用的AP都是event.on,但是其实用addListener是一样的:
EventEmitter.prototype.on = EventEmitter.prototype.addListener;
EventEmitter.prototype.addListener = function addListener(type, listener) { return _addListener(this, type, listener, false); };
这个addListener跟DOM的addEventListener稍微有点不一样,前两个参数一致,分别代表类型、回调函数。
但是最后一个参数,这里代表的是否优先插入该事件,有一个方法就是做这个的:
EventEmitter.prototype.prependListener = function prependListener(type, listener) { return _addListener(this, type, listener, true); };
最终都指向这个_addListener,分步解释:
/** * 事件绑定方法 * @param {Object} target 目标对象 * @param {String} type 事件名称 * @param {Function} listener 回调函数 * @param {Boolean} prepend 是否插入 */ function _addListener(target, type, listener, prepend) { // 指定事件类型的回调函数数量 var m; // 事件属性对象 var events; // 对应类型的回调函数 var existing; if (typeof listener !== 'function') { const errors = lazyErrors(); throw new errors.ERR_INVALID_ARG_TYPE('listener', 'Function', listener); } // 尝试获取对应类型的事件 events = target._events; // 未找到对应的事件相关属性 if (events === undefined) { events = target._events = Object.create(null); target._eventsCount = 0; } // 当存在对象的事件属性对象时 else {} // more... return target; }
这里首先会尝试获取指定对象的_events属性,即构造函数中初始化的挂载对象属性。
由于无论是任意构造函数中调用EventEmitter.call(this)或者new EventEmitter()都会在生成对象上挂载一个_events对象,所以这个判断暂时找不到反例。
当不存在就手动初始化一个,并添加一个记数属性重置为0。
当存在时,处理代码如下:
events = target._events; if (events === undefined) { // ... } else { // To avoid recursion in the case that type === "newListener"! Before // adding it to the listeners, first emit "newListener". if (events.newListener !== undefined) { target.emit('newListener', type, listener.listener ? listener.listener : listener); // Re-assign `events` because a newListener handler could have caused the // this._events to be assigned to a new object events = target._events; } // 尝试获取对应类型的回调函数集合 existing = events[type]; }
这个地方的注释主要讲的是,当绑定了type为newListener的事件时,每次都会触发一次这个事件,如果再次绑定该事件会出现递归问题。所以要判断是否存在newListener事件类型,如果有就先触发一次newListener事件。
先不管这个,最后会尝试获取指定类型的事件listener容器,下面就是对existing的处理。
// 首次添加该类型事件时 if (existing === undefined) { // 直接把函数赋值给对应类型的key existing = events[type] = listener; // 记数+1 ++target._eventsCount; } else { // 1.已有对应类型 但是只有一个 if (typeof existing === 'function') { // 转换数组 根据prepend参数安排顺序 existing = events[type] = prepend ? [listener, existing] : [existing, listener]; // If we've already got an array, just append. } // 2.已有多个 判断是否有优先的flag进行前插或后插 else if (prepend) { existing.unshift(listener); } else { existing.push(listener); } // Check for listener leak // ... }
这里的处理就能很清楚的看到events模块对于事件绑定的处理,_events相当于一个总对象,属性的key就是对应的事件类型type,而key对应的value就是对应的listener。只有一个时,就直接用该listener做值。重复绑定同类型的事件,这时值会转换为数组保存所有的listener。这里prepend就是之前的最后一个参数,允许函数插入到队列的前面,优先触发。
最后还有一个绑定事件的数量判断:
// 获取_maxListeners参数 同类型事件listener最大绑定数量 m = $getMaxListeners(target); // 如果超出就发出可能有内存泄漏的警告 if (m > 0 && existing.length > m && !existing.warned) { existing.warned = true; // 因为是warning所以不会有error code 可以不理这个东西 // eslint-disable-next-line no-restricted-syntax const w = new Error('Possible EventEmitter memory leak detected. ' + `${existing.length} ${String(type)} listeners ` + 'added. Use emitter.setMaxListeners() to ' + 'increase limit'); w.name = 'MaxListenersExceededWarning'; w.emitter = target; w.type = type; w.count = existing.length; process.emitWarning(w); }
看看就好,程序员不用管warning,哈哈。
一次绑定事件/once
有些时候希望事件只触发一次,原生的API目前不存在该功能,当初jquery也是封装了一个once方法,对应的这个events模块也有。
EventEmitter.prototype.once = function once(type, listener) { if (typeof listener !== 'function') { const errors = lazyErrors(); throw new errors.ERR_INVALID_ARG_TYPE('listener', 'Function', listener); } this.on(type, _onceWrap(this, type, listener)); return this; };
除去那个判断,其实绑定的方法还是同一个,只是对应的listener变成了一个包装函数,来看看。
function _onceWrap(target, type, listener) { // this绑定对象 var state = { fired: false, wrapFn: undefined, target, type, listener }; var wrapped = onceWrapper.bind(state); // 原生的listener挂载到这个包装函数上 wrapped.listener = listener; // 处理完后更新state属性 state.wrapFn = wrapped; // 返回的是一个包装的函数 return wrapped; } function onceWrapper(...args) { // 这里所有的this指向上面的state对象 // args来源于触发时候给的参数 if (!this.fired) { // 解绑该包装后的listener this.target.removeListener(this.type, this.wrapFn); this.fired = true; // 触发listener Reflect.apply(this.listener, this.target, args); } }
思路其实跟jquery的源码差不多,也是包装listener,当触发一次事件时,先解绑这个listener再触发事件。
需要注意的是,这里存在两个listener,一个是原生的,一个是包装后的。绑定的是包装的,所以解绑的第二个参数也要是包装的。其中原生的作为listener属性挂载到包装后的函数上,实际上触发包装listener后内部会隐式调用原生listener。
事件触发/emit
看完绑定,来看触发。
EventEmitter.prototype.emit = function emit(type, ...args) { let doError = (type === 'error'); const events = this._events; // 判断是否触发的error类型事件 if (events !== undefined) doError = (doError && events.error === undefined); else if (!doError) return false; // If there is no 'error' event listener then throw. if (doError) { // 错误处理 不看 } // 跟之前的existing一个东西 const handler = events[type]; if (handler === undefined) return false; // 如果只有一个 直接调用 if (typeof handler === 'function') { Reflect.apply(handler, this, args); } else { // 多个listener 依次触发 const len = handler.length; const listeners = arrayClone(handler, len); for (var i = 0; i < len; ++i) Reflect.apply(listeners[i], this, args); } return true; };
太简单了,懒得解释。
事件解绑/removeListener
同样分几步来看解绑的过程,首先是参数声明:
// Emits a 'removeListener' event if and only if the listener was removed. EventEmitter.prototype.removeListener = function removeListener(type, listener) { // list => listener容器 // events => 事件根对象 // position => 记录删除listener位置 // i => 迭代参数 // originalListener => 原生listener 参考上面的once var list, events, position, i, originalListener; if (typeof listener !== 'function') { const errors = lazyErrors(); throw new errors.ERR_INVALID_ARG_TYPE('listener', 'Function', listener); } events = this._events; if (events === undefined) return this; list = events[type]; if (list === undefined) return this; // ... }
比较简单,每个参数的用处都很明显,错误判断后,下面有两种不同的情况。
当对应type的listener只有一个时:
EventEmitter.prototype.removeListener = function removeListener(type, listener) { // list => listener容器 // events => 事件根对象 // position => 记录删除listener位置 // i => 迭代参数 // originalListener => 原生listener 参考上面的once var list, events, position, i, originalListener; // ... // listener只有一个的情况 if (list === listener || list.listener === listener) { // 如果一个绑定事件都没了 直接重置_events对象 if (--this._eventsCount === 0) this._events = Object.create(null); else { // 删除对应的事件类型 delete events[type]; // 尝试触发一次removeListener事件 if (events.removeListener) this.emit('removeListener', type, list.listener || listener); } } else if (typeof list !== 'function') { // ... } return this; };
这里还分了两种情况,如果_eventsCount为0,即所有的type都被清完,会重置_events对象。
理论上来说,按照else分支的逻辑,当listener剩一个的时候都是直接delete对应的key,最后剩下的还是一个空对象,那这里的重重置似乎变得没有意义了。
我猜测估计是为了V8层面的优化,因为对象的属性在破坏性变动(添加属性、重复绑定同type事件导致函数变成函数数组)的时候,所需的内存会进行扩充,这个过程是不可逆的,就算最后只剩一个空壳对象,其实际占用也是相当大的。所以为了省空间,这里进行重置,用很小的空间初始化_events对象,原来的空间被回收。
当对应type的listener为多个时,就要遍历了。
if (list === listener || list.listener === listener) { // ... } else if (typeof list !== 'function') { position = -1; // 倒序遍历 for (i = list.length - 1; i >= 0; i--) { if (list[i] === listener || list[i].listener === listener) { // once绑定的事件有listener属性 originalListener = list[i].listener; // 记录位置 position = i; break; } } if (position < 0) return this; // 在第一个位置时 if (position === 0) list.shift(); else { // 删除数组对应索引的值 if (spliceOne === undefined) spliceOne = require('internal/util').spliceOne; spliceOne(list, position); } // 如果数组里只有一个值 转换为单个值 // 有点像HashMap的链表-红黑树转换…… if (list.length === 1) events[type] = list[0]; // 尝试触发removeListener if (events.removeListener !== undefined) this.emit('removeListener', type, originalListener || listener); }
太简单了,自己看吧。
其他还有诸如removeAllListeners、_listeners、eventNames等API,有兴趣的可以自行去看。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Node.js的线程和进程
下一篇:JS实现对数器
- 深入理解JavaScript是如何实现继承的 2020-02-25
- nodejs中如何使用async模块 2020-02-22
- nodejs的express自动生成项目框架的方法 2020-02-20
- 分享nodejs分页类代码 2019-12-02
- 七天学会NodeJS——第一天 2019-08-14
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash