欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

深入出不来nodejs源码-events模块

程序员文章站 2022-03-29 18:48:22
这一节内容超级简单,纯JS,就当给自己放个假了,V8引擎和node的C++代码看得有点脑阔疼。 学过DOM的应该都知道一个API,叫addeventlistener,即事件绑定。这个东西贯穿了整个JS的学习过程,无论是刚开始的自己获取DOM手动绑,还是后期vue的直接@click,所有的交互都离不开 ......

  这一节内容超级简单,纯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,有兴趣的可以自行去看。