方法和属性
- events.MaxEventListNum
- events.getListenerCount([,type])
- events.emit(enentName, message)
- events.on(eventName, callback)
- events.once(eventName, callback)
- events.removeListener(eventName, callback)
- evetns.removeAllListener([,eventName])
node环境下
npm install --save events-manage
CMD、AMD模块化下
// CMD
var events = require('events-manage');
// AMD
define('events-manage', function (e) { ... })
浏览器模式下
<script src="http://119.27.182.76/myTools/events.min.js"></script>
// 个人的腾讯云
提示:
重要的事情说的第一遍:在CMD以及node环境下本模块直接返回对象实例(无需再new一个实例),而在AMD和浏览器环境下,则返回构造函数(需要通过new来创建实例)
js文件戳这里
简单使用
// 创建events实例
var myEvent = new events();
// 重要的事情说的第二遍:
// 在CMD以及node环境下本模块直接返回对象实例(无需再new一个实例),而在AMD和浏览器环境下,则返回构造函数(需要通过new来创建实例)
在Vue中使用
var myEvents = require('events-manage');
// 添加全局,会挂在在Vue.$ev下
Vue.use(myEvents);
// 全局监听
Vue.$ev.on('eatting', function (msg) {
console.log(msg);
})
// 发布
Vue.$ev.emit('eatting', '吃饭'); // 吃饭
...
...
...
// 重要的事情说的第三遍:
// 在CMD以及node环境下本模块直接返回对象实例(无需再new一个实例),而在AMD和浏览器环境下,则返回构造函数(需要通过new来创建实例)
每个事件的最大订阅数量
myEvent.MaxEventListNum = 5;// 每个事件的最多订阅数为 5
如果不设置MaxEventListNum, 则默认为 10
获得当前所有事件/某类型的事件的监听数量
myEvents.getListenerCount('eatting') // type 参数为可选参数
// 简单示例
// 添加监听事件
myEvents.on('eatting', function () { ... });
myEvents.on('sleeping', function () { ... });
myEvents.on('eatting', function () { ... });
// 获取事件数量
myEvents.getListenerCount('eatting'); // return: 2
myEvents.getListenerCount('sleeping'); // return: 1
myEvents.getListenerCount();
// return:
// {
// eatting: 2,
// sleeping: 1
//}
通过上面的简单示例,当使用getListenerCount方法获取监听事件数量时如果存在参数type(事件类型),则该方法会返回 此类型监听事件的数量(返回Number类型),当不存在参数type时,则返回当前myEvents实例所有监听事件,以对象的方式返回(键值对)。
发布事件
myEvent.emit('发布事件名', '发布信息'); // '发布信息' 给监听这的回调传参
// 简单示例
myEvent.emit('sleeping', '睡觉');
订阅 (监听) 事件
myEvent.on('订阅事件的名字', callback);
// 简单示例
myEvent.on('sleeping', function (msg) {
console.log('我正在' + msg + '...'); // 我正在睡觉...
})
只订阅一次事件 即当使用此方法订阅的事件,在接收到发布的事件执行后,立即删除当前订阅
面对各种各样的需求,比如,我们希望只监听一次事件,也就是说我们只需要第一次执行,而之后就不在监听此事件。
// 发布事件 第一次发布
myEvent.emit('eatting', '第一次-吃饭');
// 发布事件 的二次发布
myEvent.emit('eatting', '第二次-吃饭');
// 使用 once 方法订阅事件
myEvent.once('eatting', function (msg) {
console.log(msg); // 第一次-吃饭
})
当使用 once 方法订阅事件时,只对事件订阅一次,当第一次 emit 后,once 订阅的事件会立即被删除。所以以上代码实例中,第二次被 emit 后并没有监听到任何eatting事件,无任何输出。
删除指定事件的指定订阅(监听)方法
// 定义callback
function cb (msg) {
console.log('我正在' + msg + '...')
}
// 订阅(监听)eatting事件
myEvent.on('eatting', cb);
// 发布 eatting 事件
myEvent.emit('eatting', '吃饭'); // 我正在吃饭
// 删除 eatting事件中 回调为 cb 的监听
myEvent.removeListener('eatting', cb);
//
// 此次发布事件,去没有任何输出
myEvent.emit('eatting', '再一次,吃饭'); /*无任何输出,说明该监听已经被删除*/
当需要对都一个订阅(监听)删除时,参数中callback必须与订阅此事件的方法中的 callback 一致,否则无法删除。
// 订阅(监听)eatting事件
myEvent.on('eatting', function (msg) {
... // 相同内容
});
// 删除订阅事件
myEvent.removeListener('eatting', function (msg) {
... // 相同内容
})
此方式无法删除对应的订阅(监听事件),传入的 callback 为匿名函数,在 javascript 中,相同的书写形式的匿名函数是不相等的。所以导致无法删除。 提示: 为防止两个callback不一致导致无法删除,建议在订阅事件希望删除的事件时,最好不采用匿名函数的形式。
删除同一事件的所有订阅(监听),或者删除当前events对象的所有订阅(监听)
当传参数eventName时,只删除当前eventName的所有订阅(监听),不影响其他订阅(监听)事件
// 订阅
myEvent.on('eatting', function (msg) {
console.log(msg);
});
myEvent.on('eatting', function (msg) {
console.log(msg);
});
myEvent.on('sleeping', function (msg) {
console.log(msg);
});
// 发布
myEvent.emit('eatting', '吃饭'); // 吃饭
myEvent.emit('eatting', '第一次,吃饭'); // 第一次,吃饭
myevent.emit('sleeping', '睡觉'); // 睡觉
// 删除 eatting 监听
myEvent.removeAllListener(type);
myEvent.emit('eatting', '吃饭'); // warning 不存在此监听事件
myEvent.emit('sleeping', '睡觉'); // 睡觉
当没有传参数eventName时,删除当前events实例的所有订阅(监听)
// 订阅
myEvent.on('eatting', function (msg) {
console.log(msg);
});
myEvent.on('sleeping', function (msg) {
console.log(msg);
});
// 发布
myEvent.emit('eatting', '吃饭'); // 吃饭
myevent.emit('sleeping', '睡觉'); // 睡觉
// 删除所有
myEvent.removeAllListener();
// 再次发布
myEvent.emit('eatting', '吃饭'); // warning 不存在此监听事件
myevent.emit('sleeping', '睡觉'); // warning 不存在此监听事件
如果感觉对你有帮助,记着STAR:star:!!!:grin: