イベントエミッターのリスニングイベント

今回はイベントエミッターのイベント監視についてご紹介します。イベントエミッターを使用してイベントを監視する場合の注意事項を以下に示します。

イベント エミッターとは何ですか?

イベント エミッターは、イベントをトリガーするだけのように聞こえますが、あらゆるものがこのイベントをリッスンできます。

このシナリオを想像してください。非同期コードで、いくつかのイベントが発生するように「呼び出し」、あなたの他の部分にあなたの「呼び出し」を聞いてその考えを記録させます。

さまざまな目的に合わせて、イベント エミッター パターンのさまざまな実装が多数ありますが、基本的なアイデアは、イベント管理とイベントをサブスクライブする機能を備えたフレームワークを提供することです。

ここでの目標は、独自のイベント エミッターを作成して、その背後にある秘密を理解することです。それでは、以下のコードがどのように機能するかを見てみましょう。

えー

始めましょう。

let input = document.querySelector("input[type="text"]");
let button = document.querySelector("button");
let h1 = document.querySelector("h1");
button.addEventListener("click", () => {
  emitter.emit("event:name-changed", { name: input.value });
});
let emitter = new EventEmitter();
emitter.subscribe("event:name-changed", data => {
  h1.innerHTML = `Your name is: ${data.name}`;
});

最初に EventEmiiter クラスを作成し、イベントの空のオブジェクト プロパティを初期化します。このイベント属性の目的は、イベント コレクションを保存することです。このイベント オブジェクトは、イベント名をキーとして使用し、サブスクライバー コレクションを値として使用します。 (各サブスクライバーを関数として考えることができます)。

サブスクリプション関数

class EventEmitter {
  constructor() {
    this.events = {};
  }
}

このサブスクリプション関数はイベント名を取得します。前の例では、イベントが呼び出されたときの「event:name-changed" 以及传入一个回调，当有人调用 emit(またはスクリーム) コールバック」でした。

JavaScript の関数の利点の 1 つは、 function は最初のオブジェクトなので、前のサブスクリプション メソッドと同じように、関数を別の function のパラメーターとして渡すことができます

このイベントが登録されていない場合は、最初に初期値を設定する必要があります。イベント名をキーとして空の配列を初期化し、それに割り当てます。その後、関数をこの配列に配置して、このイベントを Emit を通じて呼び出します

関数を呼び出します

subscribe(eventName, fn) {
  if (!this.events[eventName]) {
    this.events[eventName] = [];
  }
  this.events[eventName].push(fn);
}

この呼び出し関数は、イベント名 (「呼び出し」たいイベント名)、およびこのイベントに渡したいデータ。このイベントがイベントに存在する場合、そのデータを使用してサブスクライブされたすべてのメソッドをループします。上記のコードは、前述したことをすべて実行できますが、必要がなくなったときにこれらのサブスクリプションを登録解除する方法が必要です。そうしないと、メモリ リークが発生してしまいます。サブスクリプション関数で未登録のメソッドを返すことで、この問題を修正しましょう。

emit(eventName, data) {
  const event = this.events[eventName];
  if (event) {
    event.forEach(fn => {
      fn.call(null, data);
    });
  }
}

JavaScript 関数は最初のオブジェクトであるため、次のように未登録の関数を呼び出すことができます。 unregister 関数を呼び出します。削除する関数は、サブスクリプション関数コレクション (配列フィルター) のフィルター方法によって異なります

メモリ リークに別れを告げましょう!

以上がイベントエミッターのリスニングイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。