Create event hub

JavaScript, Browser, Event · Sep 15, 2020

Creates a pub/sub (publish–subscribe) event hub with emit, on, and off methods.

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);
    if (this.hub[event].length === 0) delete this.hub[event];
  }
});
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);

More like this

  • Observe element mutations

    Creates a new MutationObserver and runs the provided callback for each mutation on the specified element.

    JavaScript, Browser · Oct 22, 2020

  • Create HTML element

    Creates an element from a string (without appending it to the document). If the given string contains multiple elements, only the first one will be returned.

    JavaScript, Browser · Oct 19, 2020

  • URL parameters as object

    Creates an object containing the parameters of the current URL.

    JavaScript, Browser · Oct 22, 2020