今回は 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}`; });
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); }); } }
以上がJS EventEmitter ケースのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。