EventEmitter3 初探

一、什么是EventEmitter？

EventEmitter（事件派发器）是一个对事件进行监听的对象，简单来说就是为事件写回调函数，当触发一个事件执行后，会执行为该事件绑定的回调函数。

JavaScript 事件最核心的包括事件监听 (addListener)、事件触发 (emit)、事件删除 (removeListener)，理解如下：

考虑一个DOM事件：

// Typescript
const button = document.querySelector('button');
button.addEventListener("click", (event) => {
    // do something with the event
})

我们向按钮单击事件添加了一个listener (监听器)，并且已经订阅了一个正在被发出的事件，当事件发生时会触发回调。每次单击该按钮时，都会发出该事件，而该事件会触发回调。

当处理现有代码库时，或许需要触发自定义事件。不像单击按钮这样的特定DOM事件，而是假设想基于其他触发器发出一个事件，并得到一个事件响应。我们需要一个自定义事件派发器来实现这一点。

事件派发器是一种模式，它监听一个已命名的事件，触发回调，然后发出该事件并附带一个值。有时这被称为“发布/订阅”模型或监听器。它们指的是同一件事。

二、相关知识

Symbol属性

---

Symbol是ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)，由于每一个Symbol值都是不相等的，这意味着Symbol值可以作为标识符，用于对象的属性名，就会保证不会出现同名的属性。

这对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或者覆盖。

用法举例：

let mySymbol = Symbol();
 
// 第一种写法
let a = {};
a[mySymbol] = 'Hello!';
 
// 第二种写法
let a = {
  [mySymbol]: 'Hello!'
};
 
// 第三种写法
let a = {};
Object.defineProperty(a, mySymbol, { value: 'Hello!' });
 
// 以上写法都得到同样结果
a[mySymbol] // "Hello!"

Object.getOwnPropertySymbols

---

Object.getOwnPropertySymbols()方法返回一个数组，包含给定对象所有自有的Symbol值的属性（包括不可枚举的Symbol值属性）。
语法

Object.getOwnPropertySymbols(obj); 
// 参数 obj：要获取自有Symbol值属性的对象；返回值一个包含给定对象所有自有的Symbol值的属性的数组。

所有的对象在初始化时都不会包含任何的Symbol值属性，除非在对象上显式定义了Symbol值属性，否则该方法会返回一个空数组。

例：获取对象自有的Symbol值属性

var a = Symbol('a');
var b = Symbol('b');
var obj = {};
obj[a] = 1;
obj[b] = 2;
Object.getOwnPropertySymbols(obj); // [Symbol(a), Symbol(b)]

var c = Symbol('c');
Object.defineProperty(obj, c, {
    value: 3,
    enumerate: false,
    writable: false,
    configuration: false
});
Object.getOwnPropertySymbols(obj); // [Symbol(a), Symbol(b), Symbol(c)]

三、源码分析

EventEmitter3是一个典型的第三方事件库，能够让我们自定义实现多个函数与组件间的通信。

1、项目主要内容

---

本项目的结构比较清晰，主要包括的内容是：

• 表示单个事件侦听器的EE
• Prototype属性：保存事件与监听器的_events属性

• 方法的定义

  1. 为给定事件添加侦听器的addListener方法
  2. 按名称清除事件的clearEvent方法
  3. 与Node.js EventEmitter接口兼容的最小的EventEmitter接口

• EventEmitter.prototype上的方法定义

  1. eventNames方法：该方法返回一个数组，该数组包含发射器emitter已为其注册侦听器的事件
  2. listeners方法：返回为给定事件注册的侦听器
  3. listenerCount：返回侦听给定事件的侦听器数
  4. emit：调用为给定事件注册的每个侦听器
  5. on：为给定事件添加侦听器
  6. once：为给定事件添加一次性侦听器
  7. removeListener：移除给定事件的侦听器
  8. removeAllListeners：删除所有侦听器或指定事件的侦听器
• 为removeListener和on方法别名
• prefix和EventEmitter导出

2、内容详解

---

下面对内容进行具体讲解

/**
 * Representation of a single event listener.
 *
 * @param {Function} fn The listener function.
 * @param {*} context The context to invoke the listener with.
 * @param {Boolean} [once=false] Specify if the listener is a one-time listener.
 * @constructor
 * @private
 */
function EE(fn, context, once) {
  this.fn = fn;
  this.context = context;
  this.once = once || false;
}

EE：

• 这个EventEmitter类保存了监听器方法、上下文和该监听器是否为一次性监听器的once标志（默认不是一次性监听器）

/**
 * Add a listener for a given event.
 *
 * @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
 * @param {(String|Symbol)} event The event name.
 * @param {Function} fn The listener function.
 * @param {*} context The context to invoke the listener with.
 * @param {Boolean} once Specify if the listener is a one-time listener.
 * @returns {EventEmitter}
 * @private
 */
function addListener(emitter, event, fn, context, once) {
  if (typeof fn !== 'function') {
    throw new TypeError('The listener must be a function');
  }

  var listener = new EE(fn, context || emitter, once)
    , evt = prefix ? prefix + event : event;

  if (!emitter._events[evt]) emitter._events[evt] = listener, emitter._eventsCount++;
  else if (!emitter._events[evt].fn) emitter._events[evt].push(listener);
  else emitter._events[evt] = [emitter._events[evt], listener];

  return emitter;
}

addListener：

• 通过调用EE类的new方法生成一个listener实例，判断Object.create()方法是否存在，存在则使用该方法创建属性，否则通过为事件增加前缀避免属性覆盖
• 判断发射器的_events的evt属性，如果该属性为undefined，直接给evt事件注册listener监听器,并增加事件个数
• 如果发射器_events的evt属性是一个对象，并且已经存在事件监听器，使用push方法将listener注册成为evt事件的监听器
• 如果发射器上存在给定的事件，事件存在一个与Listener不相等的监听器对象，将evt的监听器转化为包含这两个监听器的数组

/**
 * Clear event by name.
 *
 * @param {EventEmitter} emitter Reference to the `EventEmitter` instance.
 * @param {(String|Symbol)} evt The Event name.
 * @private
 */
function clearEvent(emitter, evt) {
  if (--emitter._eventsCount === 0) emitter._events = new Events();
  else delete emitter._events[evt];
}

clearEvent：

• 当发射器只有一个事件时，将事件数量设置为0，且重新生成一个事件
• 否则直接从发射器删除该事件

/**
 * Minimal `EventEmitter` interface that is molded against the Node.js
 * `EventEmitter` interface.
 *
 * @constructor
 * @public
 */
function EventEmitter() {
  this._events = new Events();
  this._eventsCount = 0;
}

EventEmitter：

• 定义与Node.js EventEmitter接口兼容的最小的EventEmitter接口，包含存储事件的内存空间和事件数量

/**
 * Return an array listing the events for which the emitter has registered
 * listeners.
 *
 * @returns {Array}
 * @public
 */
EventEmitter.prototype.eventNames = function eventNames() {
  var names = []
    , events
    , name;

  if (this._eventsCount === 0) return names;

  for (name in (events = this._events)) {
    if (has.call(events, name)) names.push(prefix ? name.slice(1) : name);
  }

  // Object.getOwnPropertySymbols()方法返回一个数组，包含给定对象所有自有的Symbol值的属性（包括不可枚举的Symbol值属性）
  if (Object.getOwnPropertySymbols) {
    return names.concat(Object.getOwnPropertySymbols(events));
  }

  return names;
};

EventEmitter.prototype.eventNames：

• 事件数量为0时返回空数组
• 否则返回发射器的_events属性中的事件（去除增加的prefix前缀）和_events属性上的Symbol属性事件

/**
 * Return the listeners registered for a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @returns {Array} The registered listeners.
 * @public
 */
EventEmitter.prototype.listeners = function listeners(event) {
  var evt = prefix ? prefix + event : event
    , handlers = this._events[evt];

  if (!handlers) return [];
  if (handlers.fn) return [handlers.fn];

  for (var i = 0, l = handlers.length, ee = new Array(l); i < l; i++) {
    ee[i] = handlers[i].fn;
  }

  return ee;
};

EventEmitter.prototype.listeners：

• 如果发射器上没有事件，返回空数组
• 如果事件上只注册了一个监听器，直接返回包含该监听器的数组
• 如果事件上注册了多个监听器，遍历存储所有监听器并返回

/**
 * Return the number of listeners listening to a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @returns {Number} The number of listeners.
 * @public
 */
EventEmitter.prototype.listenerCount = function listenerCount(event) {
  var evt = prefix ? prefix + event : event
    , listeners = this._events[evt];

  if (!listeners) return 0;
  if (listeners.fn) return 1;
  return listeners.length;
};

EventEmitter.prototype.listenerCount：

• 事件没有注册监听器时返回0，只有一个监听器时返回1，否则返回监听器数组的长度

/**
 * Calls each of the listeners registered for a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @returns {Boolean} `true` if the event had listeners, else `false`.
 * @public
 */
EventEmitter.prototype.emit = function emit(event, a1, a2, a3, a4, a5) {
  var evt = prefix ? prefix + event : event;

  if (!this._events[evt]) return false;

  var listeners = this._events[evt]
    , len = arguments.length
    , args
    , i;

  if (listeners.fn) {
    if (listeners.once) this.removeListener(event, listeners.fn, undefined, true);

    switch (len) {
      case 1: return listeners.fn.call(listeners.context), true;
      case 2: return listeners.fn.call(listeners.context, a1), true;
      case 3: return listeners.fn.call(listeners.context, a1, a2), true;
      case 4: return listeners.fn.call(listeners.context, a1, a2, a3), true;
      case 5: return listeners.fn.call(listeners.context, a1, a2, a3, a4), true;
      case 6: return listeners.fn.call(listeners.context, a1, a2, a3, a4, a5), true;
    }

    for (i = 1, args = new Array(len -1); i < len; i++) {
      args[i - 1] = arguments[i];
    }

    listeners.fn.apply(listeners.context, args);
  } else {
    var length = listeners.length
      , j;

    for (i = 0; i < length; i++) {
      if (listeners[i].once) this.removeListener(event, listeners[i].fn, undefined, true);

      switch (len) {
        case 1: listeners[i].fn.call(listeners[i].context); break;
        case 2: listeners[i].fn.call(listeners[i].context, a1); break;
        case 3: listeners[i].fn.call(listeners[i].context, a1, a2); break;
        case 4: listeners[i].fn.call(listeners[i].context, a1, a2, a3); break;
        default:
          if (!args) for (j = 1, args = new Array(len -1); j < len; j++) {
            args[j - 1] = arguments[j];
          }

          listeners[i].fn.apply(listeners[i].context, args);
      }
    }
  }

  return true;
};

EventEmitter.prototype.emit：

• 当触发给定事件时，只需要调用emit方法。该方法会自动检索事件event中所有的事件监听器，触发所有的事件监听函数，同时移除掉通过once添加的一次性监听器

/**
 * Add a listener for a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @param {Function} fn The listener function.
 * @param {*} [context=this] The context to invoke the listener with.
 * @returns {EventEmitter} `this`.
 * @public
 */
EventEmitter.prototype.on = function on(event, fn, context) {
  return addListener(this, event, fn, context, false);
};

EventEmitter.prototype.on：

• 通过调用addListener方法为指定的事件指定上下文并注册监听器

/**
 * Add a one-time listener for a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @param {Function} fn The listener function.
 * @param {*} [context=this] The context to invoke the listener with.
 * @returns {EventEmitter} `this`.
 * @public
 */
EventEmitter.prototype.once = function once(event, fn, context) {
  return addListener(this, event, fn, context, true);
};

EventEmitter.prototype.once：

• 通过调用addListener方法为指定的事件指定上下文并注册监听器，且通过设置once属性值为true将该监听器指定为一次性监听器

/**
 * Remove the listeners of a given event.
 *
 * @param {(String|Symbol)} event The event name.
 * @param {Function} fn Only remove the listeners that match this function.
 * @param {*} context Only remove the listeners that have this context.
 * @param {Boolean} once Only remove one-time listeners.
 * @returns {EventEmitter} `this`.
 * @public
 */
EventEmitter.prototype.removeListener = function removeListener(event, fn, context, once) {
  var evt = prefix ? prefix + event : event;

  if (!this._events[evt]) return this;
  if (!fn) {
    clearEvent(this, evt);
    return this;
  }

  var listeners = this._events[evt];

  if (listeners.fn) {
    if (
      listeners.fn === fn &&
      (!once || listeners.once) &&
      (!context || listeners.context === context)
    ) {
      clearEvent(this, evt);
    }
  } else {
    for (var i = 0, events = [], length = listeners.length; i < length; i++) {
      if (
        listeners[i].fn !== fn ||
        (once && !listeners[i].once) ||
        (context && listeners[i].context !== context)
      ) {
        events.push(listeners[i]);
      }
    }

    //
    // Reset the array, or remove it completely if we have no more listeners.
    //
    if (events.length) this._events[evt] = events.length === 1 ? events[0] : events;
    else clearEvent(this, evt);
  }

  return this;
};

EventEmitter.prototype.removeListener：

• 如果发射器上不存在该事件，直接返回发射器
• 事件只存在一个监听器时，调用clearEvent方法删除该监听器
• 否则使用一个event属性来保存不需要被移除的事件监听对象，然后遍历整个事件监听器数组，并且最后将event属性的值赋值给_event属性从而覆盖掉原有的属性来删除指定的监听器

/**
 * Remove all listeners, or those of the specified event.
 *
 * @param {(String|Symbol)} [event] The event name.
 * @returns {EventEmitter} `this`.
 * @public
 */
EventEmitter.prototype.removeAllListeners = function removeAllListeners(event) {
  var evt;

  if (event) {
    evt = prefix ? prefix + event : event;
    if (this._events[evt]) clearEvent(this, evt);
  } else {
    this._events = new Events();
    this._eventsCount = 0;
  }

  return this;
};

EventEmitter.prototype.removeAllListeners：

• 如果给定的事件存在，给该事件添加前缀，通过调用clearEvent方法将发射器上增加前缀的方法删除
• 否则直接给发射器的_events属性指定一个Events实例并设置事件数量为0

//
// Alias methods names because people roll like that.
//
EventEmitter.prototype.off = EventEmitter.prototype.removeListener;
EventEmitter.prototype.addListener = EventEmitter.prototype.on;

别名：

• 照顾用户习惯，方便用户使用，为EventEmitter.prototyp的removeListener和on方法别名

//
// Expose the prefix.
//
EventEmitter.prefixed = prefix;

//
// Allow `EventEmitter` to be imported as module namespace.
//
EventEmitter.EventEmitter = EventEmitter;

//
// Expose the module.
//
if ('undefined' !== typeof module) {
  module.exports = EventEmitter;
}

导出：

• 方便用户使用导出发射器的前缀，允许用户通过import引入EventEmitter并导出EventEmitter模块

四、总结

总体来说EventEmitter3的代码比较清晰简练，代码易懂，读完能够很好地帮助了解事件的“发布/订阅”原理。