Build a simple PubSub system using JavaScript

In a recent build of a web push service project, I wanted to make my UI respond to application level events (semantically speaking, if you can) because there were several components that needed to get information from the system, but Not dependent on each other, I want them to be able to manage their own "business logic" independently.

I looked around at a lot of different tools to help me, but since I often have severe NIH syndrome and I think people Being able to quickly implement the basic elements myself, I decided to quickly tie it into a simple client PubSub service — it worked fine and met my needs.

I was debating whether I should use one Customize DOM events and leverage the infrastructure that the existing DOM already provides to developers. By using the addEventListener function, you can have the ability to publish events and consume events - the only problem is that you must bind the event to a DOM element. Or window, because you don't have a model that inherits or mixes EventTarget.

Thinking: Having targets as objects will help avoid the need to create a custom publish-subscribe system.

With this constraint, a piece of code has appeared, whether it is wrong or not at least for me Written by myself, I drew up a rough plan:

/* When a user is added, do something useful (like update UI) */EventManager.subscribe('useradded', function(user) { console.log(user) });/* The UI submits the data, lets publish the event. */form.onsubmit(function(e) { e.preventDefault(); // do something with user fields EventManager.publish('useradded', user); })

All of this is not new. Redux and many other systems already do this in most cases, they are responsible for managing application state for you In my mind, I decided that there was no need for a state model to manage state that was distinct from state in the browser.

This is a very simple implementation, but abstraction is very important. At least that's how it works for me.

var EventManager = new (function() { var events = {}; this.publish = function(name, data) { return new Promise(function(resolve, reject) { var handlers = events[name]; if(!!handlers === false) return; handlers.forEach(function(handler) { handler.call(this, data); }); resolve(); }); }; this.subscribe = function(name, handler) { var handlers = events[name]; if(!!handlers === false) { handlers = events[name] = []; } handlers.push(handler); }; this.unsubscribe = function(name, handler) { var handlers = events[name]; if(!!handlers === false) return; var handlerIdx = handlers.indexOf(handler); handlers.splice(handlerIdx); }; });

My simple publish-subscribe (PubSub) system may be full of bugs, but I love it.