@knighttower/js-event-bus v3.3.9
js-event-bus
Simple Event Bus library built for any JavaScript application.
Refactoring and Updates:
---- 2024 ----
- Distribution files are now in the root of the project
- Distribution builds to support node / browser / module and other environments
- Available via NPM (@knighttower/js-event-bus) && JsDelivr (https://cdn.jsdelivr.net/npm/@knighttower/js-event-bus@latest/dist/browser/eventBus.min.js)
---- 2023 ----
- Remove some unnecessary methods to make it SOLID
- Remove different file language versions to unify the code into one and ease maintenance
- Fixed and made the code JsDocs and Ts compliant
- Fixed minor code issues
- Added correct distribution files to modules and browser
- Added Vitest unit test (passed)
- Added terser, webpack (for browser window export) and ts (for module export)
- Removed examples folder, the examples are now in the JsDocs comments for Docs creation
- Bump the version to Major since there was a lot of refactoring and changes in the Class API
"emit" method now receives the 'context' as part of the 'args' only if set since it is not frequently used and allows to pass the data without the need to set "null" as the context, ex:
- eventBus.emit('event.name', arg1, arg2, arg3)
- eventBus.emit('event.name', arg1, arg2, {__context: YourInstance}, ...otherArgs) //order is not important
Fixes to the wild card event match. It now accepts correct wild card in the "on" or "emit" method:
- eventBus.emit('event.name.**') // matches on('event.name.hello') or on('event.name.hello.world')
- eventBus.emit('event.*.string') // matches on('event.name.string') but not on('event.name.hello.world')
- eventBus.on('event.*.string.**') // matches emit('event.name.string.emitter') or emit('event.name.string.hello.world')
(this is an updated and improved fork of js-event-bus by bcerati)
Installation
Using npm
npm i @knighttower/js-event-busUsing yarn
yarn add @knighttower/js-event-busUsage
This library was built so you can use it in any JS application like Node.js apps, browser apps etc. The API is always the same.
Importing in Node.js application
If you want to use it in your Node.js apps you can import the library like this:
import EventBus from '@knighttower/js-event-bus';Importing in browser application
If you want to use it in your Browser apps you can import the library like this:
<body>
<div>Put your content here</div>
<script src=" https://cdn.jsdelivr.net/npm/@knighttower/js-event-bus@latest/dist/browser/eventBus.min.js "></script>
<script>
_eventBus(); // global instance
// or if you want to use it with scope as
const EventBus = new EventBus();
// global and named scoped
const eventBus = _eventBus();
// then you can use it
window.eventBus.on('my-event', function () {
console.log('Inside `my-event`');
});
</script>
</body>Api of the library
Register to an event
eventBus.on('my-event', function () {
console.log('Inside `my-event`');
});With this code, each time my-event is emitted this function will be executed.
Register only one time to an event
eventBus.once('my-event', function () {
console.log("Inside `my-event`. It'll be executed only one time!");
});With this code, when my-event is emitted this function will be executed. The next triggers of this event won't execute the callback because it is a one time event.
Register several time to an event
eventBus.exactly(3, 'my-event', function () {
console.log("Inside `my-event`. It'll be executed only 3 times!");
});With this code, when my-event is emitted this function will be executed with a maximum of triggers of 3.
Register using wildcards
You can use wildcards to register listeners using a specific pattern.
eventBus.on('my-event.*', function () {
console.log('Inside `my-event.*`');
});The callback will be executed with the events like my-event.x.
my-event.xwill trigger the callback ;my-event.ywill trigger the callback ;my-eventwill not trigger the callback ;my-event.x.ywill not trigger the callback ;
You can also use multiple wildcards to register listeners using a specific pattern.
eventBus.on('my-event.*.name.**', function () {
console.log('my-event.*.name.**`');
});The callback will be executed with the events like my-event.a.name.b.c.
my-event.a.name.b.cwill trigger the callback ;my-event.a.name.bwill trigger the callback ;my-event.name.bwill not trigger the callback ;
Emit an event
You can emit an event by calling the emit function. The arguments are the following:
- the name of the event ;
- ... all the arguments. Note: In order to pass the "context" (ex: 'this', or ex: ObjectInstance) to the event, it can be easily added within an object containing the property "__context" as part of the arguments. This will be automatically injected into the event and removed from the Arguments, so no need of sanitation.
Here are some examples:
eventBus.emit('my-event');
eventBus.emit('my-event', 'a', 'b', {__context: someInstance}); // your callback sould be function (a, b) { ... }
eventBus.emit('my-event', 'a', 'b', 'c', {__context: new SomeObject()}); // your callback sould be function (a, b) { ... } and `this` will be set to the context of `SomeObject`. Order is not important.Detach an event
var callbackForMyEvent = function () {
console.log('Inside `my-event`.');
};
eventBus.on('my-event', callbackForMyEvent);
eventBus.emit('my-event');
eventBus.detach('my-event', callbackForMyEvent);This code will emit the event my-event and then detach the given callback for this event. So it'll not be executed anymore.
Detach an event for all the callbacks that have been set before
eventBus.detach('my-event');This code will remove the event my-event from the event bus.
Remove an event
eventBus.on('my-event', function () {
console.log('Inside `my-event`.');
});
eventBus.emit('my-event');
eventBus.off('my-event');This code will emit the event my-event and then detach all the callbacks for this event. So any of them won't be executed anymore.
License
MIT