JavaScript EventEmitter の背後にある秘密

ここでの目標は、独自のイベント エミッターを作成して、その背後にある秘密を理解することです。それでは、次のコードがどのように機能するかを見てみましょう。必要な友人はそれを参照してください。

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

イベント エミッターは、イベントをトリガーするだけのように思えます。

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

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

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

りー

始めましょう。

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

Subscribe関数

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

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

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

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

Call function

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 関数は最初のオブジェクトであるため、関数内で関数を返すことができるため、この登録解除を呼び出すことができます。次のような関数:

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

  this.events[eventName].push(fn);

  return () => {
    this.events[eventName] = this.events[eventName].filter(eventFn => fn !== eventFn);
  }
}

登録解除関数を呼び出すと、削除する関数はサブスクリプション関数コレクションのフィルタリング メソッド (配列フィルター) に依存します

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

以上がJavaScript EventEmitter の背後にある秘密の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。