Class DOMStyleEmitter – Système d’événements style DOM

📖 Introduction

DOMStyleEmitter est une classe utilitaire abstraite dont l’objectif est de fournir une API de gestion d’événements inspirée du DOM (addEventListener, removeEventListener, dispatchEvent), tout en restant agnostique du contexte d’exécution :

Elle permet d’exposer une interface événementielle homogène et familière, que le code s’exécute :

• côté navigateur, en s’appuyant sur EventTarget
• côté Node.js / TypeScript, via une abstraction compatible avec EventEmitter

Cette approche est particulièrement adaptée aux architectures modernes orientées composants (Web Components, classes métier, clients réseau, couches d’abstraction, etc.).

Objectifs

• Fournir une API événementielle cohérente et proche du standard DOM
• Réduire la friction entre code front-end et back-end
• Centraliser la logique d’émission et d’écoute des événements
• Faciliter la maintenance et la lisibilité du code

📄 Proprietes

Emitter

private Emitter : EventTarget = new EventTarget()

Contient l’instance interne responsable de la gestion des événements.

Cette implémentation repose volontairement sur EventTarget, garantissant une compatibilité native avec les environnements navigateurs.

LogEvent

static LogEvent : boolean = false

Lorsque cette option est activée, chaque opération liée aux événements (ajout, suppression, émission) produit un console.log structuré, facilitant le debug et l’observabilité :

[ Class : MyClass ] Event dispatched : my-event { ... }

⚙️ Methodes

AddEventListener

addEventListener<T = any>(event: string, listener: (detail: T) => void): void

Ajoute un listener pour un type d’événement donné.

Cette méthode reprend volontairement la signature et la sémantique du DOM afin de garantir une prise en main immédiate.

RemoveEventListener

removeEventListener<T = any>(event: string, listener: (detail: T) => void): void

Supprime un listener précédemment enregistré pour un événement donné.

DispatchEvent

dispatchEvent<T = any>(event: string, detail: T): void

Émet un événement en y associant une charge utile (detail). Les données sont automatiquement encapsulées dans un CustomEvent, ce qui permet une consommation standardisée côté écouteurs.

🚀 Utilisation

Dans cet exemple, DOMStyleEmitter agit comme une brique de base événementielle, permettant à la classe métier de communiquer son état sans dépendance directe.

class MyService extends DOMStyleEmitter {
    doSomething() {
        this.dispatchEvent("ready", { status: true });
    }
}


const service = new MyService();


service.addEventListener("ready", (e) => {
    console.log("Service prêt :", e.detail);
});


service.doSomething();

🎯 Conclusion

DOMStyleEmitter fournit une abstraction légère, cohérente et orientée développeur pour la gestion des événements.

En s’alignant sur les standards du DOM tout en restant exploitable dans des environnements hybrides, cette classe constitue une excellente base pour :

• les clients réseau (WebSocket, HTTP abstrait)
• les architectures modulaires
• les bibliothèques réutilisables

Elle favorise une séparation claire des responsabilités et une communication événementielle propre.

Note

Cet article illustre l’attachement assumé (aliénation) de l’auteur aux modèles événementiels JavaScript et à leur expressivité côté front-end.

📜 Code

class DOMStyleEmitter {
    constructor() {
        this.emitter = new EventTarget();
    }

    addEventListener(event, listener) {
        this.emitter.addEventListener(event, listener);
        if (DOMStyleEmitter.logEvent) {
            console.log(`[ Class : ${this.constructor.name} ] Listener added for event : ${event}`);
        }
    }

    removeEventListener(event, listener) {
        this.emitter.removeEventListener(event, listener);
        if (DOMStyleEmitter.logEvent) {
            console.log(`[ Class : ${this.constructor.name} ] Listener removed for event : ${event}`);
        }
    }

    dispatchEvent(event, detail) {

        
        this.emitter.dispatchEvent(new CustomEvent(event, { detail }));
        if (DOMStyleEmitter.logEvent) {
            console.log(`[ Class : ${this.constructor.name} ] Event dispatched : ${event}`, detail);
        }
    }

    static logEvent = false;
}