Skip to content

baendlorel/js-event-bus-lite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

40 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

js-event-bus-lite

这是一个适用于 JavaScript 和 TypeScript 的全局事件总线仓库。

This is an event hus module for both JavaScript and TypeScript.

文档语言 Document Language

简体中文 —— 当前语言

English

安装

使用 npm

npm i js-event-bus-lite

使用 yarn

yarn add js-event-bus-lite

使用 pnpm

pnpm i js-event-bus-lite

使用方法

引入

在 html 页面中直接引入

下载在自己的文件夹中,使用 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>

在 NodeJS、ES6 环境下引入(推荐)

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
*/

进阶使用

绑定 thisArg

此时推荐使用普通函数,不要使用箭头函数。(如果使用会触发控制台警告)

与 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);

Debug 时使用

// 开启日志
bus.turnOnLog();

// 关闭日志
bus.turnOffLog();

// 打印所有事件和其handler。日志关闭时不会打印,但可以设置forced=true来强制打印
bus.logEventMaps(forced?: boolean);

License 许可

GPLv3

About

event-hub for typescript(also compiled for javascript)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published