最近、カスタムブラウザイベントのパワーを発見しました。これは、これまで探索したことのない驚くほど便利なツールです。 独自のカスタムイベントを作成してトリガーし、アプリケーション内でそれらを聞くことができます。 これにより、効率的なコミュニケーションの可能性が開かれます。
実際の例で説明しましょう。私は、複数のモジュールと独立したロジックを使用して、Reactを使用してChrome拡張機能を開発していました。 堅牢なモジュール間通信方法が必要でした
拡張機能の詳細は機密ですが、自動車メーカー(トヨタ、フォード、メルセデス)向けのサービスを想像してください。それぞれが一意の処理を必要とするため、反応コンポーネントではなく、個別のロジックファイルが得られます。、コンテキスト、またはredux/mobxなどの標準的な反応ツールは直接適用されませんでした。
useState
カスタムイベントがソリューションを提供しました
カスタムイベントで、イベントを作成、発送、リッスンし、カスタムデータを渡すことができます。 コア構文は簡単です:
リスナーの追加:
window.addEventListener(type, listener);
type
:イベントが派遣されたときに実行される関数。 オプションのlistener
options
<:イベント名(
const event = new CustomEvent(eventName, { detail }); window.dispatchEvent(event);
eventName
type
:リスナーに渡されたデータを含むオブジェクト。これにより、カスタムイベントが非常に柔軟になります
addEventListener
detail
useEffect(() => { const handleCustomEvent = (event: CustomEvent) => { console.log(event.detail); }; window.addEventListener(ADD_CUSTOM_EVENT, handleCustomEvent); return () => { window.removeEventListener(ADD_CUSTOM_EVENT, handleCustomEvent); }; }, []);
<code>* `ADD_CUSTOM_EVENT`: A constant (prevents typos). * `handleCustomEvent`: Logs the event's `detail` object (in this simplified example).</code>
以上がブラウザ内のカスタムイベント:あなたが必要としていなかった便利なツールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。