Modèles de décorateurs de modules JavaScript : Amélioration du comportement

Dans le paysage en constante évolution du développement JavaScript, écrire du code propre, maintenable et réutilisable est primordial. Les modèles de décorateurs de modules offrent une technique puissante pour améliorer le comportement des modules JavaScript sans modifier leur logique principale. Cette approche favorise la séparation des préoccupations, rendant votre code plus flexible, testable et facile à comprendre.

Que sont les décorateurs de modules ?

Un décorateur de module est une fonction qui prend un module (généralement une fonction ou une classe) en entrée et renvoie une version modifiée de ce module. Le décorateur ajoute ou modifie le comportement du module d'origine sans altérer directement son code source. Ceci est conforme au principe Ouvert/Fermé, qui stipule que les entités logicielles (classes, modules, fonctions, etc.) doivent être ouvertes à l'extension mais fermées à la modification.

Considérez cela comme l'ajout de garnitures supplémentaires à une pizza. La pizza de base (le module d'origine) reste la même, mais vous l'avez améliorée avec des saveurs et des fonctionnalités supplémentaires (les ajouts du décorateur).

Avantages de l'utilisation des décorateurs de modules

• Amélioration de la réutilisation du code : Les décorateurs peuvent être appliqués à plusieurs modules, vous permettant de réutiliser les améliorations de comportement dans votre base de code.
• Maintenabilité améliorée : En séparant les préoccupations, les décorateurs facilitent la compréhension, la modification et le test des modules individuels et de leurs améliorations.
• Flexibilité accrue : Les décorateurs offrent un moyen flexible d'ajouter ou de modifier des fonctionnalités sans modifier le code du module d'origine.
• Conformité au principe Ouvert/Fermé : Les décorateurs vous permettent d'étendre les fonctionnalités des modules sans modifier directement leur code source, favorisant ainsi la maintenabilité et réduisant le risque d'introduction de bugs.
• Amélioration de la testabilité : Les modules décorés peuvent être facilement testés en simulant ou en remplaçant les fonctions décoratrices.

Concepts clés et mise en œuvre

À la base, un décorateur de module est une fonction d'ordre supérieur. Elle prend une fonction (ou une classe) comme argument et renvoie une nouvelle fonction (ou classe) modifiée. La clé est de comprendre comment manipuler la fonction d'origine et ajouter le comportement souhaité.

Exemple de décorateur de base (Décorateur de fonction)

Commençons par un exemple simple de décoration d'une fonction pour enregistrer son temps d'exécution :

            function timingDecorator(func) {
  return function(...args) {
    const start = performance.now();
    const result = func.apply(this, args);
    const end = performance.now();
    console.log(`La fonction ${func.name} a pris ${end - start}ms`);
    return result;
  };
}

function myExpensiveFunction(n) {
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += i;
  }
  return result;
}

const decoratedFunction = timingDecorator(myExpensiveFunction);

console.log(decoratedFunction(100000));

            

              
                Copy
              
            
          

Dans cet exemple, timingDecorator est la fonction décoratrice. Elle prend myExpensiveFunction en entrée et renvoie une nouvelle fonction qui encapsule la fonction d'origine. Cette nouvelle fonction mesure le temps d'exécution et l'affiche dans la console.

Décorateurs de classe (Proposition ES Decorators)

La proposition ECMAScript Decorators (actuellement au stade 3) introduit une syntaxe plus élégante pour décorer les classes et les membres de classe. Bien qu'elle ne soit pas encore entièrement standardisée dans tous les environnements JavaScript, elle gagne du terrain et est prise en charge par des outils comme Babel et TypeScript.

Voici un exemple de décorateur de classe :

            // Nécessite un transpileur comme Babel avec le plugin decorators

function LogClass(constructor) {
  return class extends constructor {
    constructor(...args) {
      super(...args);
      console.log(`Création d'une nouvelle instance de ${constructor.name}`);
    }
  };
}

@LogClass
class MyClass {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Bonjour, ${this.name} !`);
  }
}

const instance = new MyClass("Alice");
instance.greet();

            

              
                Copy
              
            
          

Dans ce cas, @LogClass est un décorateur qui, lorsqu'il est appliqué à MyClass, améliore son constructeur pour afficher un message chaque fois qu'une nouvelle instance de la classe est créée.

Décorateurs de méthodes (Proposition ES Decorators)

Vous pouvez également décorer des méthodes individuelles au sein d'une classe :

            // Nécessite un transpileur comme Babel avec le plugin decorators

function LogMethod(target, propertyKey, descriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function(...args) {
    console.log(`Appel de la méthode ${propertyKey} avec les arguments : ${args}`);
    const result = originalMethod.apply(this, args);
    console.log(`La méthode ${propertyKey} a retourné : ${result}`);
    return result;
  };
  return descriptor;
}

class MyClass {
  constructor(name) {
    this.name = name;
  }

  @LogMethod
  add(a, b) {
    return a + b;
  }
}

const instance = new MyClass("Bob");
instance.add(5, 3);

            

              
                Copy
              
            
          

Ici, @LogMethod décore la méthode add, enregistrant les arguments passés à la méthode et la valeur qu'elle retourne.

Modèles courants de décorateurs de modules

Les décorateurs de modules peuvent être utilisés pour implémenter divers modèles de conception et ajouter des préoccupations transversales à vos modules. Voici quelques exemples courants :

1. Décorateur de journalisation

Comme montré dans les exemples précédents, les décorateurs de journalisation ajoutent une fonctionnalité de journalisation aux modules, fournissant des informations sur leur comportement et leurs performances. Ceci est extrêmement utile pour le débogage et la surveillance des applications.

Exemple : Un décorateur de journalisation pourrait enregistrer les appels de fonction, les arguments, les valeurs de retour et les temps d'exécution dans un service de journalisation central. Ceci est particulièrement précieux dans les architectures de systèmes distribués ou de microservices où le traçage des requêtes à travers plusieurs services est crucial.

2. Décorateur de mise en cache

Les décorateurs de mise en cache mettent en cache les résultats des appels de fonction coûteux, améliorant les performances en réduisant la nécessité de recalculer plusieurs fois les mêmes valeurs.

            function cacheDecorator(func) {
  const cache = new Map();

  return function(...args) {
    const key = JSON.stringify(args);
    if (cache.has(key)) {
      console.log("Récupération depuis le cache");
      return cache.get(key);
    }

    const result = func.apply(this, args);
    cache.set(key, result);
    return result;
  };
}

function expensiveCalculation(n) {
  console.log("Exécution d'un calcul coûteux");
  // Simuler une opération chronophage
  let result = 0;
  for (let i = 0; i < n; i++) {
    result += Math.sqrt(i);
  }
  return result;
}

const cachedCalculation = cacheDecorator(expensiveCalculation);

console.log(cachedCalculation(1000));
console.log(cachedCalculation(1000)); // Récupération depuis le cache

            

              
                Copy
              
            
          

Exemple d'internationalisation : Considérez une application qui doit afficher les taux de change. Un décorateur de mise en cache peut stocker les résultats des appels API à un service de conversion de devises, réduisant le nombre de requêtes effectuées et améliorant l'expérience utilisateur, en particulier pour les utilisateurs disposant d'une connexion Internet plus lente ou ceux dans des régions à latence élevée.

3. Décorateur d'authentification

Les décorateurs d'authentification restreignent l'accès à certains modules ou fonctions en fonction de l'état d'authentification de l'utilisateur. Cela permet de sécuriser votre application et d'empêcher les accès non autorisés.

            function authenticationDecorator(func) {
  return function(...args) {
    if (isAuthenticated()) { // Remplacez par votre logique d'authentification
      return func.apply(this, args);
    } else {
      console.log("Authentification requise");
      return null; // Ou lancez une erreur
    }
  };
}

function isAuthenticated() {
  // Remplacez par votre vérification d'authentification réelle
  return true; // À des fins de démonstration
}

function sensitiveOperation() {
  console.log("Exécution d'une opération sensible");
}

const authenticatedOperation = authenticationDecorator(sensitiveOperation);

authenticatedOperation();

            

              
                Copy
              
            
          

Contexte global : Dans une plateforme d'e-commerce mondiale, un décorateur d'authentification pourrait être utilisé pour restreindre l'accès aux fonctions de gestion des commandes aux seuls employés autorisés. La fonction isAuthenticated() devrait vérifier les rôles et permissions de l'utilisateur en fonction du modèle de sécurité de la plateforme, ce qui peut varier en fonction des réglementations régionales.

4. Décorateur de validation

Les décorateurs de validation valident les paramètres d'entrée d'une fonction avant son exécution, garantissant l'intégrité des données et prévenant les erreurs.

            function validationDecorator(validator) {
  return function(func) {
    return function(...args) {
      const validationResult = validator(args);
      if (validationResult.isValid) {
        return func.apply(this, args);
      } else {
        console.error("Échec de la validation :", validationResult.errorMessage);
        throw new Error(validationResult.errorMessage);
      }
    };
  };
}

function createUserValidator(args) {
  const [username, email] = args;
  if (!username) {
    return { isValid: false, errorMessage: "Le nom d'utilisateur est requis" };
  }
  if (!email.includes("@")) {
    return { isValid: false, errorMessage: "Format d'e-mail invalide" };
  }
  return { isValid: true };
}

function createUser(username, email) {
  console.log(`Création de l'utilisateur avec le nom d'utilisateur : ${username} et l'e-mail : ${email}`);
}

const validatedCreateUser = validationDecorator(createUserValidator)(createUser);

validatedCreateUser("john.doe", "john.doe@example.com");
validatedCreateUser("jane", "invalid-email");

            

              
                Copy
              
            
          

Localisation et validation : Un décorateur de validation pourrait être utilisé dans un formulaire d'adresse mondial pour valider les codes postaux en fonction du pays de l'utilisateur. La fonction validator devrait utiliser des règles de validation spécifiques au pays, potentiellement récupérées d'une API externe ou d'un fichier de configuration. Cela garantit que les données d'adresse sont cohérentes avec les exigences postales de chaque région.

5. Décorateur de nouvelle tentative

Les décorateurs de nouvelle tentative réessaient automatiquement un appel de fonction en cas d'échec, améliorant la résilience de votre application, en particulier lorsqu'il s'agit de services peu fiables ou de connexions réseau.

            function retryDecorator(maxRetries) {
  return function(func) {
    return async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          const result = await func.apply(this, args);
          return result;
        } catch (error) {
          console.error(`Tentative ${retries + 1} échouée :`, error);
          retries++;
          await new Promise(resolve => setTimeout(resolve, 1000)); // Attendre 1 seconde avant de réessayer
        }
      }
      throw new Error(`La fonction a échoué après ${maxRetries} tentatives`);
    };
  };
}

async function fetchData() {
  // Simuler une fonction qui peut échouer
  if (Math.random() < 0.5) {
    throw new Error("Échec de la récupération des données");
  }
  return "Données récupérées avec succès !";
}

const retryFetchData = retryDecorator(3)(fetchData);

retryFetchData()
  .then(data => console.log(data))
  .catch(error => console.error("Erreur finale :", error));

            

              
                Copy
              
            
          

Résilience réseau : Dans les régions où les connexions Internet sont instables, un décorateur de nouvelle tentative peut être inestimable pour garantir que les opérations critiques, telles que la soumission de commandes ou la sauvegarde de données, réussissent finalement. Le nombre de tentatives et le délai entre les tentatives doivent être configurables en fonction de l'environnement spécifique et de la sensibilité de l'opération.

Techniques avancées

Combinaison de décorateurs

Les décorateurs peuvent être combinés pour appliquer plusieurs améliorations à un seul module. Cela vous permet de créer un comportement complexe et hautement personnalisé sans modifier le code du module d'origine.

            // Nécessite une transpilation (Babel/Typescript)
function ReadOnly(target, name, descriptor) {
    descriptor.writable = false;
    return descriptor;
}

function Trace(target, name, descriptor) {
    const original = descriptor.value;
    descriptor.value = function (...args) {
        console.log(`TRACE : Appel de ${name} avec les arguments : ${args}`);
        const result = original.apply(this, args);
        console.log(`TRACE : ${name} a retourné : ${result}`);
        return result;
    };
    return descriptor;
}

class Calculator {
    constructor(value) {
        this.value = value;
    }

    @Trace
    add(amount) {
        this.value += amount;
        return this.value;
    }

    @ReadOnly
    @Trace
    getValue() {
        return this.value;
    }
}

const calc = new Calculator(10);
calc.add(5); // La sortie inclura les messages TRACE
console.log(calc.getValue()); // La sortie inclura les messages TRACE

try{
    calc.getValue = function(){ return "piraté!"; }
} catch(e){
    console.log("Impossible de remplacer une propriété en lecture seule");
}

            

              
                Copy
              
            
          

Fabriques de décorateurs

Une fabrique de décorateurs est une fonction qui renvoie un décorateur. Cela vous permet de paramétrer vos décorateurs et de configurer leur comportement en fonction d'exigences spécifiques.

            function retryDecoratorFactory(maxRetries, delay) {
  return function(func) {
    return async function(...args) {
      let retries = 0;
      while (retries < maxRetries) {
        try {
          const result = await func.apply(this, args);
          return result;
        } catch (error) {
          console.error(`Tentative ${retries + 1} échouée :`, error);
          retries++;
          await new Promise(resolve => setTimeout(resolve, delay));
        }
      }
      throw new Error(`La fonction a échoué après ${maxRetries} tentatives`);
    };
  };
}

// Utiliser la fabrique pour créer un décorateur de nouvelle tentative avec des paramètres spécifiques
const retryFetchData = retryDecoratorFactory(5, 2000)(fetchData);

            

              
                Copy
              
            
          

Considérations et meilleures pratiques

• Comprendre la proposition ES Decorators : Si vous utilisez la proposition ES Decorators, familiarisez-vous avec sa syntaxe et sa sémantique. Sachez qu'il s'agit toujours d'une proposition et qu'elle pourrait changer à l'avenir.
• Utiliser des transpileurs : Si vous utilisez la proposition ES Decorators, vous aurez besoin d'un transpileur comme Babel ou TypeScript pour convertir votre code dans un format compatible avec le navigateur.
• Éviter la surutilisation : Bien que les décorateurs soient puissants, évitez de les utiliser à l'excès. Trop de décorateurs peuvent rendre votre code difficile à comprendre et à déboguer.
• Garder les décorateurs ciblés : Chaque décorateur doit avoir un objectif unique et bien défini. Cela les rend plus faciles à comprendre et à réutiliser.
• Tester vos décorateurs : Testez minutieusement vos décorateurs pour vous assurer qu'ils fonctionnent comme prévu et qu'ils n'introduisent pas de bugs.
• Documenter vos décorateurs : Documentez clairement vos décorateurs, en expliquant leur objectif, leur utilisation et les éventuels effets secondaires.
• Considérer les performances : Les décorateurs peuvent ajouter une surcharge à votre code. Soyez attentif aux implications sur les performances, en particulier lors de la décoration de fonctions fréquemment appelées. Utilisez des techniques de mise en cache si nécessaire.

Exemples concrets

Les décorateurs de modules peuvent être appliqués dans une variété de scénarios concrets, notamment :

• Frameworks et bibliothèques : De nombreux frameworks et bibliothèques JavaScript modernes utilisent largement les décorateurs pour fournir des fonctionnalités telles que l'injection de dépendances, le routage et la gestion de l'état. Angular, par exemple, repose fortement sur les décorateurs.
• Clients API : Les décorateurs peuvent être utilisés pour ajouter la journalisation, la mise en cache et l'authentification aux fonctions client API.
• Validation des données : Les décorateurs peuvent être utilisés pour valider les données avant qu'elles ne soient enregistrées dans une base de données ou envoyées à une API.
• Gestion des événements : Les décorateurs peuvent être utilisés pour simplifier la logique de gestion des événements.

Conclusion

Les modèles de décorateurs de modules JavaScript offrent un moyen puissant et flexible d'améliorer le comportement de votre code, en favorisant la réutilisabilité, la maintenabilité et la testabilité. En comprenant les concepts clés et en appliquant les modèles abordés dans cet article, vous pouvez écrire des applications JavaScript plus propres, plus robustes et plus évolutives. Alors que la proposition ES Decorators gagne en adoption, cette technique deviendra encore plus répandue dans le développement JavaScript moderne. Explorez, expérimentez et intégrez ces modèles dans vos projets pour faire passer votre code au niveau supérieur. N'ayez pas peur de créer vos propres décorateurs personnalisés adaptés aux besoins spécifiques de vos projets.