abonnement
v1.0.0
Published
A JavaScript mixin to handle callback registration.
Downloads
11
Readme
abonnement
Tiny JavaScript library to handle event callback registration.
Highlights:
- No dependencies
- Usable in vanilla JavaScript, even ES5
- Tiny! Weighs under 1kB
Usage
Install the library:
npm install abonnement --save
Use it in any JavaScript object:
// Create a new context
const events = abonnement();
// Get an registering function
const onNewData = events.getRegisterHandler('newData');
// Subscribe to "newData" events
onNewData(data => console.log(data));
// Trigger a newData event
events.trigger('newData');
Modular Architecture Example
The main purpose of abonnement is to simplify modular architecture in an ES5 context.
The event handler pattern allow us to connect modules without having explicit dependencies.
// First, I create one module that will handle some data
function createBack() {
const events = abonnement();
setTimeout(() => events.trigger('end'), 3000);
return {
onEnd: events.getRegisterHandler('end')
};
}
// Then, I create another module that will handle the output
function createFront() {
function display(message) {
console.log(message);
}
return {
display
};
}
// Finally, I create the App that will links the modules together
const back = createBack();
const front = createFront();
back.onEnd(function() {
front.display("Time out!");
});
API
Event triggering
const events = abonnement();
// Trigger an event
events.trigger('end');
// Trigger an event with data
events.trigger('newData', { id: 'john' });
Event subscription
const events = abonnement();
// Subscribe to an event
const onEnd = events.getRegisterHandler('end');
onEnd(() => console.log('Time out!'));
// Treat event data
const onNewData = events.getRegisterHandler('newData');
onNewData(data => console.log(`New user connected: ${data.id}`));
// Filtering events by the data
onNewData({ id: 'john' }, data => console.log('John is connected'));
// Filtering events by id
onNewData('john', data => console.log('John is connected'));
// Declare a custom id field
const onNewData = events.getRegisterHandler('newData', 'name');
onNewData('John', data => console.log('John is connected'));
events.trigger('newData', { id: 76, name: 'John' });
License
MIT. Copyright (c) Thomas Zilliox.