Merge pull request #498 from atomiks/eventhub
[FEATURE] Add createEventHub
This commit is contained in:
45
snippets/createEventHub.md
Normal file
45
snippets/createEventHub.md
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
### createEventHub
|
||||||
|
|
||||||
|
Creates a pub/sub ([publish–subscribe](https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern)) event hub with `emit`, `on`, and `off` methods.
|
||||||
|
|
||||||
|
Use `Object.create(null)` to create an empty `hub` object that does not inherit properties from `Object.prototype`.
|
||||||
|
For `emit`, resolve the array of handlers based on the `event` argument and then run each one with `Array.forEach()` by passing in the data as an argument.
|
||||||
|
For `on`, create an array for the event if it does not yet exist, then use `Array.push()` to add the handler
|
||||||
|
to the array.
|
||||||
|
For `off`, use `Array.findIndex()` to find the index of the handler in the event array and remove it using `Array.splice()`.
|
||||||
|
|
||||||
|
```js
|
||||||
|
const createEventHub = () => ({
|
||||||
|
hub: Object.create(null),
|
||||||
|
emit(event, data) {
|
||||||
|
(this.hub[event] || []).forEach(handler => handler(data));
|
||||||
|
},
|
||||||
|
on(event, handler) {
|
||||||
|
if (!this.hub[event]) this.hub[event] = [];
|
||||||
|
this.hub[event].push(handler);
|
||||||
|
},
|
||||||
|
off(event, handler) {
|
||||||
|
const i = (this.hub[event] || []).findIndex(h => h === handler);
|
||||||
|
if (i > -1) this.hub[event].splice(i, 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
```js
|
||||||
|
const handler = data => console.log(data);
|
||||||
|
const hub = createEventHub();
|
||||||
|
let increment = 0;
|
||||||
|
|
||||||
|
// Subscribe: listen for different types of events
|
||||||
|
hub.on('message', handler);
|
||||||
|
hub.on('message', () => console.log('Message event fired'));
|
||||||
|
hub.on('increment', () => increment++);
|
||||||
|
|
||||||
|
// Publish: emit events to invoke all handlers subscribed to them, passing the data to them as an argument
|
||||||
|
hub.emit('message', 'hello world'); // logs 'hello world' and 'Message event fired'
|
||||||
|
hub.emit('message', { hello: 'world' }); // logs the object and 'Message event fired'
|
||||||
|
hub.emit('increment'); // `increment` variable is now 1
|
||||||
|
|
||||||
|
// Unsubscribe: stop a specific handler from listening to the 'message' event
|
||||||
|
hub.off('message', handler);
|
||||||
|
```
|
||||||
@ -22,6 +22,7 @@ countVowels:string
|
|||||||
createElement:browser,utility
|
createElement:browser,utility
|
||||||
currentURL:browser,url
|
currentURL:browser,url
|
||||||
curry:function,recursion
|
curry:function,recursion
|
||||||
|
createEventHub:browser,event,advanced
|
||||||
deepFlatten:array,recursion
|
deepFlatten:array,recursion
|
||||||
defer:function
|
defer:function
|
||||||
detectDeviceType:browser
|
detectDeviceType:browser
|
||||||
|
|||||||
Reference in New Issue
Block a user