Open ccforward opened 8 years ago
EventFire仓库地址: https://github.com/ccforward/EventFire
事件的管理主要有三点:绑定(on)、触发(fire)、销毁(off);所以写一个自定义的事件库就从这三点出发。
下面一步一步来写
就像在各种js库里面监听DOM事件一样,会有下面几种方式:
event.on('someEvent', callback) // 绑定多个事件 event.on(['someEventA', 'someEventB'], callback) // 绑定一次 event.once('someEvent', callback) // .... 其他
PS: 触发的函数名可以是 trigger 或者 emmit,个人感觉 fire 像游戏一样,听起来更爽。
trigger
emmit
fire
event.fire('someEvent') // 触发时绑定数据 event.fire('someEvent', {weapon: 'machine gun'}) // 触发多个事件 event.fire(['someEventA', 'someEventB'], callback) // .... 其他
销毁肯定和事件绑定是对应关系
event.off('someEvent', callback) event.off('someEvent') event.off(['someEventA', 'someEventB'], callback) // .... 其他
一个简单的事件库应该有如下的方法:
on
once
off
offAll
listeners
enable
disable
destory
最开始时已经有了两个基本的用法,思考后想到一些新的传参方式来支持更加灵活的事件绑定:
on('event', callback, {once: true})
on(['event1', 'event2'], callback, {once: true})
事件和回调的键值对
on({ event1: function(){}, event2: function(){} }, {once: true});
绑定到所有事件上
on(function(){}, {once: true})
函数监听器的名字也应该能支持正则
on(/^event/) on(/event\d+/)
最后一个可选参数是考虑到 once 方法后来添加的,对于 on 方法直接单次的事件绑定会更灵活些
on 最后还应该返回 this 来支持链式调用
this
在 on 方法上添加了 {once: true} 这个可选参数后,这个方法就仅仅是 on 方法的一个变形了,不再多说。
{once: true}
once 可以和最后提到的 scope 统一放在配置项中
scope
off 很好理解, 它设计肯定和 on 是对应的,不过会多一种调用方式:
off('eventName') 解绑 eventName 事件
off('eventName')
fire 也是和 on 相对应的:
参数 data 可以用在回调函数中,用来传递状态、自定义数据等消息
这里需要创建三个内部变量,用来存储回调函数,从而在解绑的时候能够找到已经绑定的函数
on(function(){})
所以解绑所有事件就是把上面三个变量置为空
PS: 这个方法也可直接用在构造器中,初始化上面三个内部变量
listeners(eventName) 返回一个绑定在 eventName 上的所有函数的数组
listeners(eventName)
这两个方法最开始考虑叫 pause 和 goon 但只是个构思,后来看了其他的事件库后发现暂停绑定事件的执行是个很大的需求才改为更通用的名字
pause
goon
同样这里也需要引入一个内部变量 _enabled 来对应两个方法设置为 true 和 false
_enabled
true
false
这个方法实现起来最简单粗暴,三步:
null
Function.prototype
函数在绑定的时候可以添加一个作用域,类似添加 {once: true} 一样, 添加一个名为 scope 的配置来替代 this
on('event1', fn1, {scope: {hello: 'world'}}) on('event2', fn2, {scope: {hello: 'world'}, once: true})
fire 方法的最后一个参数 data, 但是在 fire 的时候需要传递数据,因此一个 data 变量就是个刚需了。
data
e.on('event', function(ev){ console.log(ev.data) }); e.fire('event', {a: 123});
最后添加 commonjs 和 AMD 规范的兼容,具体的代码在 index.js 最后
自定义事件库 EventFire
源码
EventFire仓库地址: https://github.com/ccforward/EventFire
事件的管理主要有三点:绑定(on)、触发(fire)、销毁(off);所以写一个自定义的事件库就从这三点出发。
下面一步一步来写
0、思考
绑定
就像在各种js库里面监听DOM事件一样,会有下面几种方式:
触发
PS: 触发的函数名可以是
trigger
或者emmit
,个人感觉fire
像游戏一样,听起来更爽。销毁
销毁肯定和事件绑定是对应关系
1、方法设计
一个简单的事件库应该有如下的方法:
on
事件绑定once
绑定一次off
事件解绑fire
触发事件offAll
解绑所有事件listeners
返回某一事件上的监听器enable
事件绑定和触发-可用disable
事件绑定和触发-暂停destory
解绑实例上的事件,并完全销毁这个实例(不能再继续绑定和触发事件)2、方法细节
on 方法
最开始时已经有了两个基本的用法,思考后想到一些新的传参方式来支持更加灵活的事件绑定:
on('event', callback, {once: true})
on(['event1', 'event2'], callback, {once: true})
事件和回调的键值对
绑定到所有事件上
函数监听器的名字也应该能支持正则
最后一个可选参数是考虑到
once
方法后来添加的,对于on
方法直接单次的事件绑定会更灵活些on
最后还应该返回this
来支持链式调用once 方法
在
on
方法上添加了{once: true}
这个可选参数后,这个方法就仅仅是on
方法的一个变形了,不再多说。once
可以和最后提到的scope
统一放在配置项中off 方法
off
很好理解, 它设计肯定和on
是对应的,不过会多一种调用方式:off('eventName')
解绑 eventName 事件fire 方法
fire
也是和on
相对应的:参数 data 可以用在回调函数中,用来传递状态、自定义数据等消息
offAll 方法
这里需要创建三个内部变量,用来存储回调函数,从而在解绑的时候能够找到已经绑定的函数
就是这种
on(function(){})
所以解绑所有事件就是把上面三个变量置为空
PS: 这个方法也可直接用在构造器中,初始化上面三个内部变量
listeners 方法
listeners(eventName)
返回一个绑定在 eventName 上的所有函数的数组enable disabled 方法
这两个方法最开始考虑叫
pause
和goon
但只是个构思,后来看了其他的事件库后发现暂停绑定事件的执行是个很大的需求才改为更通用的名字同样这里也需要引入一个内部变量
_enabled
来对应两个方法设置为true
和false
destory 方法
这个方法实现起来最简单粗暴,三步:
null
或false
Function.prototype
3、其他
作用域
函数在绑定的时候可以添加一个作用域,类似添加
{once: true}
一样, 添加一个名为scope
的配置来替代this
数据传递
fire
方法的最后一个参数data
, 但是在 fire 的时候需要传递数据,因此一个 data 变量就是个刚需了。兼容性
最后添加 commonjs 和 AMD 规范的兼容,具体的代码在 index.js 最后