这是一个适用于 JavaScript 和 TypeScript 的全局事件总线仓库。
This is an event hus module for both JavaScript and TypeScript.
简体中文 —— 当前语言
npm i js-event-bus-lite
yarn add js-event-bus-lite
pnpm i js-event-bus-lite
下载在自己的文件夹中,使用 script src 进行引入。从 GitHub 上下载
<body>
<div>Put your content here</div>
<script src="你的存放位置/js-event-bus-lite.min.js"></script>
<script>
const eventBus = new EventBus();
</script>
</body>
import EventBus from 'js-event-bus-lite';
或者
const EventBus = require('js-event-bus-lite');
const bus = new EventBus();
capacity 表示该事件限定触发的次数,超过后不会再触发。如果没有设置 capacity,则可以无限次触发。
bus.on(eventName: string, handler: Function, capacity?: number);
只能被触发 1 次的事件,等价于 bus.on(eventName, handler, 1)。
bus.once(eventName: string, handler: Function);
可加参数。事件名称不能含有 *
号。
bus.emit(eventName: string, ...args: any);
注销事件和其对应的所有 handler,如果指定 handler 则只注销此事件下的特定 handler。 注意!注销事件不会进行通配符匹配,必须使用和注册的时候一样的事件名。 例如:注册用“evt.”,那么注销也要用“evt.”,用“evt.a”是不行的。
bus.off(eventName: string, handler?: Function);
bus.clear();
用事件名和处理函数来注册事件
bus.on('evt', () => {
console.log('evt triggered');
});
// 触发事件
bus.emit('evt');
// output: evt triggered
传递参数的情形
bus.on('evt', (arg1, arg2) => {
console.log({ arg1, arg2 });
});
bus.emit('evt', '参数1', '参数2');
// output: { arg1: '参数1', arg2: '参数2' }
指定次数的情形
let count = 0;
bus.on(
'evt',
() => {
count++;
console.log('count', count);
},
3
);
bus.emit('evt');
bus.emit('evt');
bus.emit('evt');
// 触发3次后,handler已经自动注销
// 再调用已经不再会触发
bus.emit('evt');
/* output:
count 1
count 2
count 3
*/
此时推荐使用普通函数,不要使用箭头函数。(如果使用会触发控制台警告)
与 emit 不同之处在于第二个参数是 thisArg。
bus.emitWithThisArg(eventName: string, thisArg: any, ...args: any);
// 不要使用箭头函数
const handler = function (arg) {
console.log(this.a + arg.b);
};
bus.on('evt', handler);
bus.emitWithThisArg('evt', { a: 3 }, { b: 2 });
// output: 5
支持使用通配符 *
来注册事件,需要使用 a.*
或者 a.*.a
这样的格式来指定事件名称。其中 *
可以匹配任何除了 *
和 .
以外的字符。
请不要使用类似于 *.*
或 *evt
这样的名称! 这样的名称也许能精确匹配但不属于通配范围,不一定能达到你期望的效果
bus.on('evt.*', () => {});
那么
evt.3
会触发evt.name
会触发evt.
不会触发
通配符会导致多重触发,例如我们注册如下两个事件
bus.on('evt.*.*', () => {}); // 第1个事件
bus.on('evt.3.*', () => {}); // 第2个事件
那么
evt.4.a
只会触发第一个事件evt.3.a
两个都会触发
同一个名字的事件重复添加同一个函数时,不会重复注册事件,只会更新 capacity。
此时会在控制台弹出 warn 警告。
const handler = () => {};
// 此时handler触发10次就会销毁
bus.on('evt', handler, 10);
// capacity会更新为undefined,从而handler可以无限次触发
bus.on('evt', handler);
// 开启日志
bus.turnOnLog();
// 关闭日志
bus.turnOffLog();
// 打印所有事件和其handler。日志关闭时不会打印,但可以设置forced=true来强制打印
bus.logEventMaps(forced?: boolean);
GPLv3