JS EventEmitter ケースのチュートリアル

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

サブスクリプション関数

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 関数を呼び出します。削除する関数は、サブスクリプション関数コレクション (配列フィルター) のフィルター方法によって異なります

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

以上がJS EventEmitter ケースのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。