EventBusJS
Simple but powerful event bus written in ES2015
Installation
The recommended and the most suitable way to install is through Yarn:
$ yarn add lin3s-event-bus
or alternatively through NPM:
$ npm install --save lin3s-event-bus
Basic Usage
// your-dom-js-file.js ; const onReady = { console;}; const onLoaded = { console;}; const onResized = { const newWindowHeight = windowResizedEventwindowWidth newWindowWidth = windowResizedEventwindowWidth; console;}; ;;;
onNodeAdded
This helper method will subscribe to the NodeAddedObserver for DOM injection lookups. Each time a
css selector
-matching DOM node is added to the document's body, your passed callback wil be called. In other words,
you will be notified if a DOM node is injected into the document's body and your provided css selector
matches that
DOM node.
This is really helpful for defining a component's behaviour independently of the time of the component being added to the page. For example, if we want to trigger some logic, or initialize a component after being injected to the DOM dinamically.
For instance:
// your-dom-js-file.js ;; const LOOKUP_CSS_SELECTOR = '.js-my-component'; const initMyComponent = { const myComponent = domNode; // Whatever...}; const onReady = { const myComponents = document; myComponents; // `rootNode` is the `document` by default. ;}; ;
Unsubscribing a subscriber
In the following example we are showing how to unsubscribe a previously subscribed subscriber. Every shortcut method returns the associated subscriber, so we can unsubscribe it later on via the LifeTimeEventPublisher or the OneTimeEventPublisher.
// your-dom-js-file.js ; const onResized = { const newWindowHeight = windowResizedEventwindowWidth newWindowWidth = windowResizedEventwindowWidth; console;}; const windowResizedSubscriber = ; // later on LifeTimeEventPublisher;
Usage with priorities
In the following example there are two modules that are listening the WindowResizedEvent
event, but the module-b.js
is listening the event with higher priority than the module-a.js
so, the module-b.js
's onResized subscriber
always is executed before the module-a.js
's subscriber.
// module-a.js ; const onResized = { // This will be called after module-a.js onResized callback const newWindowHeight = windowResizedEventwindowWidth newWindowWidth = windowResizedEventwindowWidth; console;}; ;
// module-b.js ; const onResized = { // This will be called before module-b.js onResized callback const newWindowHeight = windowResizedEventwindowWidth newWindowWidth = windowResizedEventwindowWidth; console;}; ;
Extending the EventBus - Custom Events
In order to extend the Core.Event
and publish/subscribe to them, you must firstly implement your custom Event:
// CustomEvent module ; Event static NAME = 'YOUR_CUSTOM_EVENT'; { superCustomEventNAME; thispayloadObject = payloadObject; } ;
After implementing CustomEvent
class, you should code the custom EventSubscriber
. Using the previously defined
CustomEvent
custom event:
// CustomEventSubscriber module ;; EventSubscriber { superaCallback aPriority; } { // You can define your own custom validation logic. But at least, the event's name must match. return anEvent === event; } ;
Finally, you should publish the CustomEvent
and subscribe to the CustomEvent
. If your event will be published
more than once you should publish it through the LifeTimeEventPublisher
instance. Otherwise, if you need to publish
the event just once (for example, a ComponentHasBeenInitializedEvent
), you should publish it through
the OneTimeEventPublisher
instance.
Publishing:
// Publishing the CustomEvent ;// or;; ; const payload = // ...; const customEvent = payload; CoreLifeTimeEventPublisher;CoreOneTimeEventPublisher;// orLifeTimeEventPublisher;OneTimeEventPublisher;
Subscribing:
// Subscribing to the CustomEvent ;// or;; ; const customEventSubscriber = { const payloadObject = customEventInstancepayloadObject; // Whatever...}; CoreLifeTimeEventPublisher;CoreOneTimeEventPublisher;// orLifeTimeEventPublisher;OneTimeEventPublisher;