Événements personnalisés dans le navigateur: un outil pratique que vous ne savez pas que vous aviez besoin

Récemment, j'ai découvert la puissance des événements du navigateur personnalisé - un outil étonnamment pratique que je n'avais pas exploré auparavant. Vous pouvez créer et déclencher vos propres événements personnalisés, puis les écouter dans votre application. Cela ouvre des possibilités de communication efficaces.

Pourquoi utiliser des événements personnalisés?

illustrons avec un exemple réel. Je développais une extension chromée en utilisant React, avec plusieurs modules et une logique indépendante, certains composants REACT extérieurs (dans des fichiers typique autonomes). J'avais besoin d'une méthode de communication intermodule robuste.

Bien que les détails de l'extension soient confidentiels, imaginez un service pour les constructeurs automobiles (Toyota, Ford, Mercedes). Chacun nécessite une manipulation unique, résultant en des fichiers logiques séparés - pas des composants réagis. Des outils de réaction standard comme useState, le contexte ou redux / mobx n'étaient pas directement applicables.

Les événements personnalisés ont fourni la solution.

Comment fonctionnent les événements personnalisés

Les événements personnalisés vous permettent de créer, de répartir et d'écouter des événements, de passer des données personnalisées. La syntaxe centrale est simple:

Ajout d'un auditeur:

<code class="language-javascript">window.addEventListener(type, listener);</code>

• type: une chaîne sensible à la casse (le nom de l'événement).
• listener: La fonction exécutée lorsque l'événement est expédié. Un objet facultatif options peut être ajouté (voir la documentation pour plus de détails).

Envoiant un événement:

<code class="language-javascript">const event = new CustomEvent(eventName, { detail });
window.dispatchEvent(event);</code>

• eventName: le nom de l'événement (doit correspondre à la type dans addEventListener).
• detail: Un objet contenant des données transmis à l'auditeur. Cela rend les événements personnalisés très flexibles.

Exemple du monde réel: réagir et événements personnalisés

dans mon extension chromée:

1. Écouteur d'événements (Utilisez Effecte dans App.TSX):

<code class="language-javascript">useEffect(() => {
    const handleCustomEvent = (event: CustomEvent) => {
        console.log(event.detail);
    };

    window.addEventListener(ADD_CUSTOM_EVENT, handleCustomEvent);

    return () => {
        window.removeEventListener(ADD_CUSTOM_EVENT, handleCustomEvent);
    };
}, []);</code>

<code>*   `ADD_CUSTOM_EVENT`: A constant (prevents typos).
*   `handleCustomEvent`: Logs the event's `detail` object (in this simplified example).</code>

2. Envoiant l'événement: de n'importe où:

<code class="language-javascript">const event = new CustomEvent('ADD_CUSTOM_EVENT', { detail: { key: 'exampleKey', value: 'exampleValue' } });
window.dispatchEvent(event);</code>

Pourquoi j'apprécie cette approche

Les événements personnalisés ont fourni une solution propre et efficace pour la communication transversale dans mon extension. Il a contourné la nécessité de mécanismes spécifiques à React comme le contexte ou les bibliothèques de gestion de l'État, offrant une approche simple et élégante des défis de communication complexes dans les applications Web. J'espère que cela s'avère utile aux autres!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!