node api —— Events

  在 js 中事件驱动的代码随处可见，这篇文章就介绍一下 node 中的 Events 模块，以及理解如何实现。

1. 所有 api

   emitter.addListener(eventName, listener) // 注册监听器
   emitter.emit(eventName[, ...args]) // 触发监听器
   emitter.eventNames() // 返回注册事件名数组
   emitter.getMaxListeners() // 返回最大可注册监听器数量
   emitter.listenerCount(eventName) // 返回某个事件的监听器数
   emitter.listeners(eventName) // 返回某个事件上所有监听器数组，按注册顺序
   emitter.off(eventName, listener) // 同 emitter.removeListener
   emitter.on(eventName, listener) // 同 addListener
   emitter.once(eventName, listener) //注册监听器，最多触发一次
   emitter.prependListener(eventName, listener) // 在监听器数组开头插入一个监听器
   emitter.prependOnceListener(eventName, listener) // 在监听器数组开头插入一个监听器，最多触发一次
   emitter.removeAllListeners([eventName]) // 移除所有监听器
   emitter.removeListener(eventName, listener) // 移除监听器
   emitter.setMaxListeners(n) // 设置最大可注册监听器数
   emitter.rawListeners(eventName）// 返回某个事件上所有监听器（被包装过的）数组，按注册顺序

   上面所示 api 基本上都可以很容易理解。下面我将通过几个问题来进一步理解这些 api。

2. 疑问及解答

   1. 通过.emit 会同步地按照注册顺序，依次执行监听器，并且在这些监听器执行完成之前，不会通过.removeListener 移除某个监听器而让其不执行。如下面的例子：

      const myEmitter = new MyEmitter()
      
      const callbackA = () => {
        console.log('A')
        myEmitter.removeListener('event', callbackB)
      }
      
      const callbackB = () => {
        console.log('B')
      }
      
      myEmitter.on('event', callbackA)
      
      myEmitter.on('event', callbackB)
      
      // callbackA 移除了监听器 callbackB，但它依然会被调用。
      // 触发时内部的监听器数组为 [callbackA, callbackB]
      myEmitter.emit('event')
      // 打印:
      // A
      // B
      
      // callbackB 现已被移除。
      // 内部的监听器数组为 [callbackA]
      myEmitter.emit('event')
      // 打印:
      // A
      

      我们看一下 源码中的写法，来理解为什么会这样。

      const handler = this._events[type] // type为事件名
      
      if (handler === undefined) return false
      
      if (typeof handler === 'function') {
        // 只注册了一个监听器
        Reflect.apply(handler, this, args)
      } else {
        const len = handler.length
        const listeners = arrayClone(handler, len) // 将监听器数组copy了一个副本
        for (var i = 0; i < len; ++i) Reflect.apply(listeners[i], this, args)
      }
      

      上面的代码可以看出，在 emit 函数中，是将监听器数组生成 一个副本，执行这个副本中的监听器，所以执行 removeListener 的时候，只是在 this._events[type]中移除监听器，所以并不影响 监听器的执行。

   2. 通过.once 注册的监听器仅执行一次，这是如何实现的？

      我们来看一下源码：

      EventEmitter.prototype.once = function once(type, listener) {
        checkListener(listener) // 检测监听器是否为函数
      
        this.on(type, _onceWrap(this, type, listener)) //将_onceWrap()的返回添加到监听器函数数组中
        return this
      }
      
      function _onceWrap(target, type, listener) {
        // 对监听器函数进行包装
        var state = { fired: false, wrapFn: undefined, target, type, listener }
        var wrapped = onceWrapper.bind(state)
        wrapped.listener = listener
        state.wrapFn = wrapped
        return wrapped // { [Function: bound onceWrapper] listener: [Function] }
      }
      
      function onceWrapper(...args) {
        // this指向 { fired: false, wrapFn: undefined, target, type, listener }
        if (!this.fired) {
          this.target.removeListener(this.type, this.wrapFn) // 移除监听器函数，保证此函数只执行一次
          this.fired = true
          Reflect.apply(this.listener, this.target, args) // 执行监听器函数
        }
      }
      

      可以看到，在 once 函数中 ，把监听器函数通过_onceWrap 函数进行了包装，把包装后的函数添加到监听器数组中。包装后的监听器函数为{ [Function: bound onceWrapper] listener: [Function] }，其中 listener 为.once 中的回调函数。
      所以在触发监听器的时候，实际上执行了 onceWrapper 函数（此函数中 this 指向{ fired: false, wrapFn: undefined, target, type, listener }），此函数中先移除监听器 ，再执行监听器函数，这就保证了此监听器只执行一次。

   3. emitter.listeners(eventName)和 emitter.rawListeners(eventName)返回的数组的区别。

      从问题 2 中已经知道，某些注册监听器的方法（如：.once）， 实际是把包装过回调函数添加到监听器函数数组中。

      emitter.rawListeners 函数返回就是实际存放的监听器函数数组:
      [..., events[type][i], ...]

      emitter.listeners 函数返回的实际上就是各注册监听器函数中所写的回调函数:
      [..., events[type][i].listener || events[type], ...]