Estoy escribiendo un proyecto de javascript de vainilla. Tengo varios componentes independientes. Me gusta que se comuniquen sin acoplarlos. El bus de mensajes basado en eventos es ideal para mí. Implementé algo trivial como lo siguiente y me gustaría preguntar si existe alguna biblioteca existente que pueda hacer esto de manera más eficiente o si el lenguaje en sí proporciona alguna capacidad para lograr esto o no.
PD: No tengo eventos dom en este caso. Me gustaría crear mis propios eventos para poder escribir componentes de manera bastante genérica y limpia. Creo que React tiene un concepto similar y lo comprobaré más adelante, pero por ahora me gusta usar javascript vainilla.
¡Gracias!
// event message bus interface define(function(require) { "use strict"; function CustomEventDispatcher() { this._subscribers = {} CustomEventDispatcher.prototype.on = function(event, callback) { if(!this._subscribers[event]) this._subscribers[event] = []; this._subscribers[event].push(callback); } CustomEventDispatcher.prototype.trigger = function(event, params) { if (this._subscribers[event]) { for (let i in this._subscribers[event]) { this._subscribers[event][i](params); } } } CustomEventDispatcher.Instance = null; CustomEventDispatcher.GetInstance = function () { if (!CustomEventDispatcher.Instance) { CustomEventDispatcher.Instance = new CustomEventDispatcher(); } return CustomEventDispatcher.Instance; } return CustomEventDispatcher; }); // UI interaction triggers or backend worker triggers event let params = { new_dir : '/dat', }; CustomEventDispatcher.GetInstance().trigger('onUpdateDataSource', params); // Directory Module registers directory update events and updates itself function DirectorLister() { CustomEventDispatcher.GetInstance().on('onUpdateDirectoryListing', (params) => this.change_content(params)); }