add custom event

Blog/39.写一个支持Node.js&浏览器的自定义事件库.md

@@ -0,0 +1,119 @@
+# 自定义事件 EventFire
+
+事件的管理主要有三点：绑定(on)、触发(fire)、销毁(off)；所以写一个自定义的事件库就从这三点出发。
+
+下面一步一步来写
+
+## 0、思考
+
+#### 绑定
+就像在各种js库里面监听DOM事件一样，会有下面几种方式：
+
+```js
+event.on('someEvent', callback)
+// 绑定多个事件
+event.on(['someEventA', 'someEventB'], callback)
+// 绑定一次
+event.once('someEvent', callback)
+// ....  其他
+```
+
+#### 触发
+
+PS: 触发的函数名可以是 `trigger` 或者 `emmit`，个人感觉 `fire` 像玩游戏一样，更爽。
+
+```js
+event.fire('someEvent')
+// 触发时绑定数据
+event.fire('someEvent', {weapon: 'machine gun'})
+// 触发多个事件
+event.fire(['someEventA', 'someEventB'], callback)
+
+// ....  其他
+```
+
+
+#### 销毁
+
+销毁肯定和事件绑定是对应关系
+
+```js
+event.off('someEvent', callback)
+event.off('someEvent')
+event.off(['someEventA', 'someEventB'], callback)
+
+// ....  其他
+```
+
+## 1、方法设计
+
+一个简单的事件库应该有如下的方法：
+
+* `on` 事件绑定
+* `once` 绑定一次
+* `off` 事件解绑
+* `fire` 触发事件
+* `offAll` 解绑所有事件
+* `listeners` 返回某一事件上的监听器
+* `enable` 事件绑定和触发-可用  
+  `disable` 事件绑定和触发-暂停
+* `destory` 解绑实例上的事件，并完全销毁这个实例(不能再继续绑定和触发事件)
+
+## 2、方法细节
+
+#### on 方法
+
+最开始时已经有了两个基本的用法，思考后想到一些新的传参方式来支持更加灵活的事件绑定：
+
+* 字符串参数，单个事件  
+  `on('event', callback, {once: true})`
+* 数组参数，事件集合  
+  `on(['event1', 'event2'], callback, {once: true})`
+* 事件和回调的键值对
+
+  ```js
+  on({
+    event1: function(){},
+    event2: function(){}
+  }, {once: true});
+  ```
+* 绑定到所有事件上  
+
+  ```js
+  on(function(){}, {once: true})
+  ```
+* 函数监听器的名字也应该能支持正则
+
+  ```js
+  on(/^event/)
+  on(/event\d+/)
+  ```
+
+最后一个可选参数是考虑到 `once` 方法后来添加的，对于 `on` 方法直接单次的事件绑定会更灵活些
+
+`on` 最后还应该返回 `this` 来支持链式调用
+
+
+#### once 方法
+
+在 `on` 方法上添加了 `{once: true}` 这个可选参数后，这个方法就仅仅是 `on` 方法的一个变形了，不再多说。
+
+#### off 方法
+
+`off` 很好理解, 它设计肯定和 `on` 是对应的，不过会多一中调用方式：
+
+`off('eventName')` 解绑 eventName 事件
+
+#### fire 方法
+
+`fire` 也是和 `on` 相对应的：
+
+* fire('event');
+* fire('event', data);
+* fire(['event1', 'event2']);
+* fire(['event1', 'event2'], data);
+* fire({event1: data, event2: data});
+
+参数 data 可以用在回调函数中，用来传递状态、自定义数据等消息
+
+