事件绑定。这个东西贯穿了整个JS的学习过程，无论是刚开始的自己获取DOM手动绑，还是后期vue的直接@click，所有的交互都离不开这个东西。
同样，在node中，事件绑定也贯穿了整个框架。基本上大多数的内置模块以events为原型，下面的代码随处可见：
EventEmitter.call(this);
不同的是，页面上DOM的事件绑定是由浏览器来实现，触发也是一些操作'间接'触发，并不需要去主动emit对应事件，并且有冒泡和捕获这两特殊的性质。
深入出不来的nodejs
在node中，不存在dom，绑定的目标是一个对象(dom本质上也是对象)，在内部node自己用纯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);
}
全栈开发交流群：864305860.png
一次绑定事件/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);
}
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
网友评论