Créez un système PubSub simple à l'aide de JavaScript

Dans un projet récent que je construisais pour un service Web push, je voulais que mon interface utilisateur réponde aux événements au niveau de l'application (sémantiquement, si vous le pouvez) car plusieurs composants devaient obtenir des informations du système, mais pas dépendants les uns des autres, je veux qu'ils soient capables de gérer leur propre "logique métier" de manière indépendante

J'ai regardé autour de moi et plein d'outils différents pour m'aider, mais comme j'ai souvent un syndrome NIH sévère et je. pensez aux gens Étant capable d'implémenter rapidement les éléments de base moi-même, j'ai décidé de le relier rapidement à un simple service client PubSub - cela a très bien fonctionné et répondait à mes besoins.

Je me demandais si je devais en utiliser un Personnaliser les événements DOM et exploitez l'infrastructure que le DOM existant fournit déjà aux développeurs. En utilisant la fonction addEventListener, vous pouvez avoir la possibilité de publier des événements et de consommer des événements - le seul problème est que vous devez lier l'événement à un élément ou une fenêtre du DOM, car. vous n'avez pas de modèle qui hérite ou mélange EventTarget.

Réflexion : Avoir des cibles comme objets permettra d'éviter d'avoir à créer un système de publication-abonnement personnalisé

Avec cette contrainte, un morceau de code est apparu, qu'il soit erroné ou non. du moins pour moi Écrit par moi-même, j'ai dressé un plan approximatif :

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

Tout cela n'est pas nouveau Redux et bien d'autres systèmes font déjà ça pour la plupart, ils se chargent de le gérer. votre état d'application. Dans mon esprit, j'ai décidé qu'il n'était pas nécessaire d'avoir un modèle d'état pour gérer un état distinct de l'état dans le navigateur.

Il s'agit d'une implémentation très simple, mais l'abstraction est très importante. Du moins, c'est comme ça que ça marche pour moi.

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

Mon simple système PubSub est peut-être plein de bugs, mais je l'adore.