@knighttower/js-event-bus

v3.3.9

Published

4 months ago

Event bus for your Javascript applications

Downloads

153

0High
0Medium
0Low

knighttower

event bus node nodejs browser javascript typescript DOM functions helper knighttower event-bus eventbus eventBus

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-bus

Using yarn

yarn add @knighttower/js-event-bus

Usage

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.x will trigger the callback ;
my-event.y will trigger the callback ;
my-event will not trigger the callback ;
my-event.x.y will 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.c will trigger the callback ;
my-event.a.name.b will trigger the callback ;
my-event.name.b will 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