在 js 中事件驱动的代码随处可见,这篇文章就介绍一下 node 中的 Events 模块,以及理解如何实现。
-
所有 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。
-
疑问及解答
-
通过.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]中移除监听器,所以并不影响 监听器的执行。
-
通过.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 }),此函数中先移除监听器 ,再执行监听器函数,这就保证了此监听器只执行一次。 -
emitter.listeners(eventName)和 emitter.rawListeners(eventName)返回的数组的区别。
从问题 2 中已经知道,某些注册监听器的方法(如:.once), 实际是把包装过回调函数添加到监听器函数数组中。
emitter.rawListeners 函数返回就是实际存放的监听器函数数组:
[..., events[type][i], ...]emitter.listeners 函数返回的实际上就是各注册监听器函数中所写的回调函数:
[..., events[type][i].listener || events[type], ...]
-
网友评论