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