JavaScriptで軽量ネイティブイベントバスを作成しましょう

イベントバスは、さまざまなコンポーネント間の通信を簡素化するために使用できるデザインパターン（ここではJavaScriptについて説明しますが、あらゆる言語のデザインパターンです）です。また、Publish/SubscribeまたはPubSubと見なすこともできます。

アイデアは、コンポーネントがイベントバスを聴くために、操作がいつ実行されるかを理解できるということです。たとえば、タブパネルコンポーネントは、アクティブタブが変更されたことを示すイベントを聞くことができます。もちろん、これはタブの1つをクリックすることによって引き起こされる可能性があるため、そのコンポーネント内で完全に処理されます。ただし、イベントバスでは、他の要素にはタブに変更を加えるように指示できます。フォームの送信によりユーザーが特定のタブでアラートを受信するエラーを想像してください。フォームはイベントバスにメッセージを送信し、タブコンポーネントにアクティブなタブをエラーを含むタブに変更するよう指示します。これがイベントバスでの見た目です。

このケースの擬似コードは次のとおりです…

 //タブコンポーネントタブ。CHANGETAB= ID => {
  //アクティブタブのDOM操作を変更します。
};
myeventbus.subscribe（ "change-tab"、tabs.changetab（id））;

//他のコンポーネント...
//何かが起こり、次に：
myeventbus.publish（ "change-tab"、2）;

これを実装するにはJavaScriptライブラリが必要ですか？ （ヒントの質問：JavaScriptライブラリは必要ありません）。まあ、多くの選択肢があります：

• pubsubjs
• eventemitter3
• Postal.js
• JQueryは、このパターンに非常に関連するカスタムイベントをサポートしています。

また、GZIPのわずか200バイトのライブラリであるMittをチェックしてください。このシンプルなパターンは、人々ができるだけ簡潔な方法でそれを自分で解決するように促しました。

自分でやりましょう！サードパーティライブラリはまったく使用していませんが、代わりに、すでにJavaScriptに組み込まれているイベントリスニングシステムを利用して、私たち全員がよく知っているaddEventListener 。

まず、いくつかのコンテキスト

JavaScriptのaddEventListener APIは、 EventTargetクラスのメンバー関数です。クリックイベントをボタンにバインドできる理由は、（ HTMLButtonElement ）のプロトタイプインターフェイスがEventTargetから間接的に継承されているためです。

他のほとんどのDOMインターフェイスとは異なり、 newキーワードを使用してEventTarget直接作成できます。すべての最新のブラウザでサポートされていますが、ごく最近です。上記のスクリーンショットでわかるように、 Node EventTargetを継承するため、すべてのDOMノードにはaddEventListenerメソッドがあります。

ヒント

イベントリスニングバスとして非常に軽量ノードタイプを使用することをお勧めします：HTMLコメント（ <!-- --> ）。

ブラウザのレンダリングエンジンの場合、HTMLコメントはコードに単なるコメントであり、開発者に説明的なテキストを提供する以外の機能はありません。ただし、コメントはまだHTMLで書かれているため、最終的にはdomに実際のノードとして表示され、 Nodeから継承する独自のプロトタイプインターフェイス（ Comment ）があります。

Commentクラスは、 EventTargetと同じように、 newから直接作成できます。

 const myeventbus = newコメント（ 'my-event-bus'）;

また、古代が広くサポートされているdocument.createComment APIを使用することもできます。データパラメーター、つまりコメントの内容が必要です。それは空の文字列でさえあり得ます：

 const myeventbus = document.createComment（ 'my-event-bus'）;

これで、 dispatchEventを使用して、 Eventオブジェクトを受け入れるイベントを発行できます。ユーザー定義のイベントデータに合格するには、 CustomEventを使用して、 detailフィールドを使用してデータを封じ込めることができます。

 myeventbus.dispatchevent（
  新しいCustomevent（ 'event-name'、{
    詳細： 'event-data'
  }）
）;

Internet Explorer 9-11はCustomEventをサポートしていますが、 new CustomEventをサポートするバージョンはありません。 document.createEventを使用してそれをシミュレートするために複雑であるため、IEサポートがあなたにとって重要である場合、それを入力する方法があります。

これで、イベントリスナーをバインドできます。

 myeventbus.addeventlistener（ 'event-name'、（{detail}）=> {
  console.log（詳細）; // => event-data
}）;

イベントが一度だけ発射することを目的としている場合、1回限りのバインディングに{ once: true }を使用できます。ここでは、他のオプションは適していません。イベントリスナーを削除するには、ネイティブのremoveEventListenerを使用できます。

デバッグ

単一のイベントバスに縛られたイベントの数は非常に大きい場合があります。それらを削除するのを忘れた場合、メモリリークもあるかもしれません。 myEventBusにバインドされているイベントの数を知りたい場合はどうなりますか？

myEventBusはDOMノードであるため、ブラウザ内のDevToolsが確認できます。そこでは、イベントを要素→イベントリスナータブで見つけることができます。 「祖先」をチェックして、 documentとwindowに縛られたイベントを非表示にしてください。

例

欠点の1つは、 EventTargetの構文がわずかに冗長であることです。シンプルなラッパーを書くことができます。タイプスクリプトのデモは次のとおりです。

クラスEventbus<detailtype any> {
  Private EventTarget：EventTarget;
  constructor（description = ''）{this.eventtarget = document.appendChild（document.createComment（description））; }
  on（タイプ：文字列、リスナー：（イベント：CustomeVent<detailtype> ）=> void）{this.eventtarget.addeventlistener（type、リスナー）; }
  一度（タイプ：文字列、リスナー：（イベント：CustomeVent」<detailtype> ）=> void）{this.eventtarget.addeventlistener（type、listener、{and：true}）; }
  off（タイプ：文字列、リスナー：（イベント：Customevent<detailtype> ）=> void）{this.eventTarget.RemoveEventListener（Type、リスナー）; }
  emit（type：string、detail？：detailtype）{return this.eventtarget.dispatchevent（new Customevent（type、{detail}））; }
}

// const myeventbus = new Eventbus<string> （ 'my-event-bus'）;
myeventbus.on（ 'event-name'、（{detail}）=> {
  console.log（詳細）;
}）;

myeventbus.once（ 'event-name'、（{detail}）=> {
  console.log（詳細）;
}）;

myeventbus.emit（ 'event-name'、 'hello'）; // =>こんにちはこんにちは
myeventbus.emit（ 'event-name'、 'world'）; // => world</string></detailtype></detailtype></detailtype></detailtype>

次のデモでは、コンパイルされたJavaScriptを提供します。

それでおしまい！ 1つのコンポーネントがアクションをトリガーするために別のコンポーネントを変更の別のコンポーネントに通知できる依存関係のないイベントリスニングバスを作成しました。そのような操作を行うことは完全なライブラリを必要とせず、それをオンにする可能性は無制限です。

以上がJavaScriptで軽量ネイティブイベントバスを作成しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。