JavaScript を使用してシンプルな PubSub システムを構築する

Web プッシュ サービスを構築する最近のプロジェクトでは、システムから情報を取得する必要があるコンポーネントがいくつかありましたが、相互の依存関係は必要なかったため、UI をアプリケーション レベルのイベントに (可能であれば意味的に) 応答させたいと考えていました。独自の「ビジネス ロジック」を独立して管理できるようにしてほしいです

私は役立つさまざまなツールを探しましたが、私は重度の NIH 症候群を患っていることが多く、人々は独自の基本要素をすぐに実装できると思います。 、私はそれを単純なクライアント側の PubSub サービスにすぐにバインドすることにしました — それは問題なく動作し、私のニーズを満たしていました

カスタム DOM イベントを使用して既存の DOM は開発者向けのインフラストラクチャを活用すべきかどうか疑問に思っていました。 addEventListener 関数を使用してイベントを公開したり、イベントを消費したりできるようになります。唯一の問題は、EventTarget のモデルの継承やミックスインがないため、イベントを DOM 要素またはウィンドウにバインドする必要があることです。

考え: ターゲットをオブジェクトとして持つと、カスタムのパブリッシュ/サブスクライブ システムを作成する必要性を回避できます。

この制約により、間違っているかどうかに関係なく、少なくとも自分でコードを作成しました。大まかな計画:

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

これはどれも新しいことではありません。Redux や他の多くのシステムはすでにこれを行っており、アプリケーションの状態の管理を行ってくれます。私の頭では、状態は必要ないと確信しています。モデルは状態を管理し、ブラウザ内の状態とは異なります。

これは非常に単純な実装ですが、抽象化は非常に重要です。少なくとも私にとってはそのように機能します。

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

私のシンプルな PubSub システムはバグだらけかもしれませんが、私はそれが大好きです。