EventHub-任意のコンポーネント通信

EventHub

EventHubは複数のモジュール間で情報を伝達するために使用され、基本的にパブリッシュ・サブスクライブモデルに基づいており、これはパブリッシュ・サブスクライブモデルの一例として理解することができます。

例

DOM2 レベルのイベントバインディング：

const b = document.getElementById('app');
b.addEventListener('click', function () {
});
b.addEventListener('click', function () {
});
ele.removeEventListener('click', handler);

上記のコードでは、Publish-Subscribe パターンを使用して DOM 要素のイベントを購読し、ユーザーが対応するアクションを実行したときに発行しています。もちろん、手動でイベントの購読を解除することも可能です。

EventHub

class EventHub {
 event = {}
 on = (eventName, fn) => {
 if (this.event[eventName] === undefined) {
 this.event[eventName] = []
 }
 this.event[eventName].push(fn)
 }
 emit = (eventName) => {
 if (this.event[eventName] === undefined) {
 this.event[eventName] = []
 }
 this.event[eventName].forEach(fn => {
 fn()
 })
 }
 off = (eventName, fn) => {
 if (this.event[eventName] === undefined) {
 this.event[eventName] = []
 }
 const index = this.event[eventName].indexOf(fn)
 if( index !== -1) {
 this.event[eventName].splice(index, 1)
 }
 }
}