理解 JavaScript EventEmitter(4)

因为 isArray 这个工具方法其实运行效率是不高的,为了追求一些效率,在不影响运行逻辑情况下可以不用 isArray 。而且 typeof events === 'function' 用 typeof 判断方法也比 isArray 的效率要高,这也是为什么不先判断是否是数组的原因。用 typeof 去判断一个方法也比 Object.prototype.toSting.call(events) === '[object Function] 效率要高。但数组不能用 typeof 进行判断,因为返回的是 object, 这众所周知。虽然如此,在我面试过的很多人中,仍然有很多人不知道。。。

const findIndex = events.findIndex(e => e === fn) 此处用 ES6 的数组方法 findIndex 直接去查找 fn 在 events 中的索引。如果 findIndex === -1 说明我们没有找到要删除的 fn ,直接返回 this 就好。如果 findIndex === 0 ,是数组第一个元素,shift 剔除,否则用 splice 剔除。因为 shift 比 splice 效率高。

findIndex 的效率其实没有 for 循环去查找的高,所以 eventemitter8 的效率在我没有做 benchmark 之前我就知道肯定会比 eventemitter3 效率要低不少。不那么追求执行效率时当然是用最懒的方式来写最爽。所谓的懒即正义。。。

最后还得判断移除 fn 后 events 剩余的数量,如果只有一个,基于之前要做的优化,this._events[type] = events[0] 把含有一个元素的数组变成一个方法,降维打击一下。。。

最后的最后 return this 返回自身,链式调用还能用得上。

removeAllListeners(type) { if (isNullOrUndefined(this._events)) return this; // if not provide type, remove all if (isNullOrUndefined(type)) this._events = Object.create(null); const events = this._events[type]; if (!isNullOrUndefined(events)) { // check if type is the last one if (Object.keys(this._events).length === 1) { this._events = Object.create(null); } else { delete this._events[type]; } } return this; };

removeAllListeners 指的是要删除一个 type 对应的所有方法。参数 type 是可选的,如果未指定 type ,默认把所有的监听事件删除,直接 this._events = Object.create(null) 操作即可,跟初始化 EventEmitter 类一样。

如果 events 既不是 null 且不是 undefined 说明有可删除的 type ,先用 Object.keys(this._events).length === 1 判断是不是最后一个 type 了,如果是,直接初始化 this._events = Object.create(null),否则 delete this._events[type] 直接删除 type 属性,一步到位。

最后返回 this 。

到目前为止,所有的核心功能已经讲完。

listeners(type) { if (isNullOrUndefined(this._events)) return []; const events = this._events[type]; // use `map` because we need to return a new array return isNullOrUndefined(events) ? [] : (typeof events === 'function' ? [events] : events.map(o => o)); } listenerCount(type) { if (isNullOrUndefined(this._events)) return 0; const events = this._events[type]; return isNullOrUndefined(events) ? 0 : (typeof events === 'function' ? 1 : events.length); } eventNames() { if (isNullOrUndefined(this._events)) return []; return Object.keys(this._events); }

listeners 返回的是 type 对应的所有方法。结果都是一个数组,如果没有,返回空数组;如果只有一个,把它的方法放到一个数组中返回;如果本来就是一个数组,map 返回。之所以用 map 返回而不是直接 return this._events[type] 是因为 map 返回一个新的数组,是深度复制,修改数组中的值不会影响到原数组。this._events[type] 则返回原数组的一个引用,是浅度复制,稍不小心改变值会影响到原数组。造成这个差异的底层原因是数组是一个引用类型,浅度复制只是指针拷贝。这可以单独写一篇文章,不展开了。

listenerCount 返回的是 type 对应的方法的个数,代码一眼就明白,不多说。

eventNames 这个返回的是所有 type 组成的数组,没有返回空数组,否则用 Object.keys(this._events) 直接返回。

最后的最后,export default EventEmitter 把 EventEmitter 导出。

结语

我是先看了两个库才知道怎么写的,其实最好的学习方法是知道 EventEmitter 是干什么用的以后自己动手写,写完以后再和那些库进行对比,找出差距,修正再修正。

但也不是说先看再写没有收获,至少比只看不写和看都没看的有收获不是。。。

水平有限,代码错漏或者文章讲不清楚之处在所难免,欢迎大家批评指正。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/pxgyf.html