-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
JavaScript EventEmitter #12
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2个多月前把 Github 上的 eventemitter3 和
Node.js
下的事件模块 events 的源码抄了一遍,才终于对JavaScript
事件有所了解。上个周末花点时间根据之前看源码的理解自己用 ES6 实现了一个 eventemitter8,然后也发布到 npm 上了,让我比较意外的是才发布两天在没有
readme
介绍,没有任何宣传的情况下居然有45个下载,我很好奇都是谁下载的,会不会用。我花了不少时间半抄半原创的一个JavaScript
时间处理库 now.js (npm
传送门:now.js) ,在我大力宣传的情况下,4个月的下载量才177。真是有心栽花花不开,无心插柳柳成荫
!eventemitter8
大部分是我根据看源码理解后写出来的,有一些方法如listeners
,listenerCount
和eventNames
一下子想不起来到底做什么,回头重查。测试用例不少是参考了eventemitter3
,在此对eventemitter3
的开发者们和Node.js
事件模块的开发者们表示感谢!下面来讲讲我对
JavaScript
事件的理解:从上图可以看出,
JavaScript
事件最核心的包括事件监听(addListener)
、事件触发(emit)
、事件删除(removeListener)
。事件监听(addListener)
首先,监听肯定要有监听的目标,或者说是对象,那为了达到区分目标的目的,名字是不可少的,我们定义为
type
。其次,监听的目标一定要有某种动作,对应到
JavaScript
里实际上就是某种方法,这里定义为fn
。譬如可以监听一个
type
为add
,方法为某一个变量a
值加1
的方法fn = () => a + 1
的事件。如果我们还想监听一个使变量b
加2
的方法,我们第一反应可能是创建一个type
为add2
,方法 为fn1 = () => b + 2
的事件。你可能会想,这太浪费了,我能不能只监听一个名字,让它执行多于一个方法的事件。当然是可以的。那么怎么做呢?
很简单,把监听的方法放在一个数组里,遍历数组顺序执行就可以了。以上例子变为
type
为add
,方法为[fn, fn1]
。如果要细分的话还可以分为可以无限次执行的事件
on
和 只允许执行一次的事件once
(执行完后立即将事件删除)。待后详述。事件触发(emit)
单有事件监听是不够的,必须要有事件触发才能算完成整个过程。
emit
就是去触发监听的特定type
对应的单个事件或者一系列事件。拿前面的例子来说单个事件就是去执行fn
,一系列事件就是去遍历执行fn
和fn1
。事件删除(removeListener)
严格意义上来讲,事件监听和事件触发已经能完成整个过程。事件删除可有可无。但很多时候,我们还是需要事件删除的。比如前面讲的只允许执行一次事件
once
,如果不提供删除方法,很难保证你什么时候会再次执行它。通常情况下,只要是不再需要的事件,我们都应该去删除它。核心部分讲完,下面简单的对
eventemitter8
的源码进行解析。源码解析
全部源码:
代码很少,只有151行,因为写的简单版,且用的
ES6
,所以才这么少;Node.js
的事件和eventemitter3
可比这多且复杂不少,有兴趣可自行深入研究。这4行就是一些工具函数,判断所属类型、判断是否是
null
或者undefined
。创建了一个
EventEmitter
类,然后在构造函数里初始化一个类的_events
属性,这个属性不需要要继承任何东西,所以用了Object.create(null)
。当然这里isNullOrUndefined(this._events)
还去判断了一下this._events
是否为undefined
或者null
,如果是才需要创建。但这不是必要的,因为实例化一个EventEmitter
都会调用构造函数,皆为初始状态,this._events
应该是不可能已经定义了的,可去掉。接下来是三个方法
addListener
、on
、once
,其中on
是addListener
的别名,可执行多次。once
只能执行一次。三个方法都用到了
_addListener
方法:方法有四个参数,
type
是监听事件的名称,fn
是监听事件对应的方法,context
俗称爸爸
,改变this
指向的,也就是执行的主体。once
是一个布尔型,用来标志是否只执行一次。首先判断
fn
的类型,如果不是方法,抛出一个类型错误。fn.context = context;fn.once = !!once
把执行主体和是否执行一次作为方法的属性。const event = this._events[type]
把该对应type
的所有已经监听的方法存到变量event
。如果
type
本身没有正在监听任何方法,this._events[type] = fn
直接把监听的方法fn
赋给type
属性 ;如果正在监听一个方法,则把要添加的fn
和之前的方法变成一个含有2个元素的数组[event, fn]
,然后再赋给type
属性,如果正在监听超过2个方法,直接push
即可。最后返回this
,也就是EventEmitter
实例本身。简单来讲不管是监听多少方法,都放到数组里是没必要像上面细分。但性能较差,只有一个方法时
key: fn
的效率比key: [fn]
要高。再回头看看三个方法:
addListener
需要用call
来改变this
指向,指到了类的实例。once
则多传了一个标志位true
来标志它只需要执行一次。这里你会看到我在addListener
并没有传false
作为标志位,主要是因为我懒,但并不会影响到程序的逻辑。因为前面的fn.once = !!once
已经能很好的处理不传值的情况。没传值!!once
为false
。接下来讲
emit
事件触发需要指定具体的
type
否则直接抛出错误。这个很容易理解,你都没有指定名称,我怎么知道该去执行谁的事件。if (isNullOrUndefined(events)) return false
,如果type
对应的方法是undefined
或者null
,直接返回false
。因为压根没有对应type
的方法可以执行。而emit
需要知道是否被成功触发。接着判断
evnts
是不是一个方法,如果是,events.call(events.context || null, rest)
执行该方法,如果指定了执行主体,用call
改变this
的指向指向events.context
主体,否则指向null
,全局环境。对于浏览器环境来说就是window
。差点忘了rest
,rest
是方法执行时的其他参数变量,可以不传,也可以为一个或多个。执行结束后判断events.once
,如果为true
,就用removeListener
移除该监听事件。如果
evnts
是数组,逻辑一样,只是需要遍历数组去执行所有的监听方法。成功执行结束后返回
true
。removeListener
接收一个事件名称type
和一个将要被移除的方法fn
。if (isNullOrUndefined(this._events)) return this
这里表示如果EventEmitter
实例本身的_events
为null
或者undefined
的话,没有任何事件监听,直接返回this
。if (isNullOrUndefined(type)) return this
如果没有提供事件名称,也直接返回this
。fn
如果不是一个方法,直接抛出错误,很好理解。接着判断
type
对应的events
是不是一个方法,是,并且events === fn
说明type
对应的方法有且仅有一个,等于我们指定要删除的方法。这个时候delete this._events[type]
直接删除掉this._events
对象里type
即可。所有的
type
对应的方法都被移除后。想一想this._events[type] = undefined
和delete this._events[type]
会有什么不同?差异是很大的,
this._events[type] = undefined
仅仅是将this._events
对象里的type
属性赋值为undefined
,type
这一属性依然占用内存空间,但其实已经没什么用了。如果这样的type
一多,有可能造成内存泄漏。delete this._events[type]
则直接删除,不占内存空间。前者也是Node.js
事件模块和eventemitter3
早期实现的做法。如果
events
是数组,这里我没有用isArray
进行判断,而是直接用一个else
,原因是this._events[type]
的输入限制在on
或者once
中,而它们已经限制了this._events[type]
只能是方法组成的数组或者是一个方法,最多加上不小心或者人为赋成undefined
或null
的情况,但这个情况我们也在前面判断过了。因为
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
对应的所有方法。参数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
对应的所有方法。结果都是一个数组,如果没有,返回空数组;如果只有一个,把它的方法放到一个数组中返回;如果本来就是一个数组,map
返回。之所以用map
返回而不是直接return this._events[type]
是因为map
返回一个新的数组,是深度复制,修改数组中的值不会影响到原数组。this._events[type]
则返回原数组的一个引用,是浅度复制,稍不小心改变值会影响到原数组。造成这个差异的底层原因是数组是一个引用类型,浅度复制只是指针拷贝。这可以单独写一篇文章,不展开了。listenerCount
返回的是type
对应的方法的个数,代码一眼就明白,不多说。eventNames
这个返回的是所有type
组成的数组,没有返回空数组,否则用Object.keys(this._events)
直接返回。最后的最后,
export default EventEmitter
把EventEmitter
导出。结语
我是先看了两个库才知道怎么写的,其实最好的学习方法是知道
EventEmitter
是干什么用的以后自己动手写,写完以后再和那些库进行对比,找出差距,修正再修正。但也不是说先看再写没有收获,至少比只看不写和看都没看的有收获不是。。。
水平有限,代码错漏或者文章讲不清楚之处在所难免,欢迎大家批评指正。
The text was updated successfully, but these errors were encountered: