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

2018-08-10 11:20:57来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

  这一节内容超级简单,纯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实现对数器