美文网首页
node api —— Events

node api —— Events

作者: 涯丨角 | 来源:发表于2019-01-05 23:32 被阅读0次

      在 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], ...]

    相关文章

      网友评论

          本文标题:node api —— Events

          本文链接:https://www.haomeiwen.com/subject/lktaoftx.html