Erstellen Sie ein einfaches PubSub-System mit JavaScript

In einem aktuellen Projekt, das ich für einen Web-Push-Dienst erstellt habe, wollte ich meine Benutzeroberfläche auf Ereignisse auf Anwendungsebene reagieren lassen (semantisch, wenn möglich), weil es mehrere Komponenten gab, die Informationen vom System abrufen mussten, aber nicht Da ich voneinander abhängig bin, möchte ich, dass sie in der Lage sind, ihre eigene „Geschäftslogik“ unabhängig zu verwalten.

Ich habe mich umgesehen und viele verschiedene Tools gefunden, die mir helfen, aber da ich oft ein schweres NIH-Syndrom habe und ich Denken Sie Leute: Da ich die Grundelemente schnell selbst implementieren konnte, beschloss ich, es schnell in einen einfachen Client-PubSub-Dienst einzubinden – es funktionierte großartig und entsprach meinen Anforderungen.

Ich überlegte, ob ich DOM-Ereignisse anpassen sollte und nutzen Sie die Infrastruktur, die das vorhandene DOM den Entwicklern bereits bietet. Durch die Verwendung der Funktion „addEventListener“ können Sie Ereignisse veröffentlichen und konsumieren. Das einzige Problem besteht darin, dass Sie das Ereignis an ein DOM-Element oder ein Fenster binden müssen Sie haben kein Modell, das EventTarget erbt oder mischt.

Denken: Ziele als Objekte zu haben, wird dazu beitragen, die Notwendigkeit zu vermeiden, ein benutzerdefiniertes Publish-Subscribe-System zu erstellen

Mit dieser Einschränkung ist ein Teil des Codes aufgetaucht, egal ob er falsch ist oder nicht Zumindest für mich selbst geschrieben, habe ich einen groben Plan erstellt:

/* 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);
})

Das alles ist nicht neu. Redux und viele andere Systeme tun dies bereits größtenteils, sie kümmern sich um die Verwaltung Meiner Meinung nach ist kein Statusmodell erforderlich, um den Status zu verwalten, der sich vom Status im Browser unterscheidet.

Dies ist eine sehr einfache Implementierung, aber Abstraktion ist sehr wichtig. Zumindest funktioniert es bei mir so.

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);
  };
});

Mein einfaches Publish-Subscribe-System (PubSub) ist vielleicht voller Fehler, aber ich liebe es.