Litéraux de modèles réutilisables : exposer le potentiel caché

Bien que les littéraux de modèles dans ES6 soient largement utilisés, la perception persiste qu'ils sont éternellement liés à au moment de leur création, manquant de flexibilité pour être réutilisés et mis à jour dynamiquement. Cet article remet en question cette notion, en explorant la possibilité de transformer les littéraux de modèles en documents réutilisables et dynamiques.

L'essence d'un modèle traditionnel réside dans la capacité d'injecter des jetons au moment de l'exécution, évaluables chaque fois que nécessaire. Cependant, les littéraux des modèles ES6 semblent évaluer leurs substitutions au moment de la déclaration, ce qui limite leur caractère pratique.

Le catalyseur essentiel : le constructeur de fonction

Pour surmonter cette limitation apparente, nous utilisez le constructeur Function comme intermédiaire. En utilisant cette construction, nous pouvons différer le processus d'interpolation jusqu'à ce que la fonction soit invoquée :

const templateString = "Hello ${this.name}!";
const templateVars = {
  name: "world",
};

const fillTemplate = function (templateString, templateVars) {
  return new Function(
    "return `"   templateString   "`;"
  ).call(templateVars);
};

console.log(fillTemplate(templateString, templateVars));

Dans cet exemple, la fonction fillTemplate accepte la chaîne du modèle et un ensemble de variables à interpoler. Dans la fonction, nous construisons une fonction qui, une fois exécutée, renvoie la chaîne de modèle avec les valeurs des templateVars injectées au moment de l'exécution.

Avantages des littéraux de modèle réutilisables

Le Les littéraux de modèle réutilisables qui en résultent offrent de nombreux avantages :

• Interpolation dynamique : les valeurs peuvent être interpolées dans le modèle au moment de l'exécution, offrant une plus grande flexibilité.
• Interpolation externe : les modèles peuvent provenir de fichiers externes. , permettant une maintenance et une collaboration faciles.
• Capacités étendues : des fonctionnalités supplémentaires telles que les balises de modèle peuvent être intégrées avec une certaine ingéniosité.

Bien que cette solution introduit certaines limitations, telles que l'impossibilité de Dans la logique JavaScript en ligne, des solutions de contournement peuvent être développées.

Conclusion

En employant le constructeur Function, nous libérons le véritable potentiel des littéraux de modèle ES6. Nous les transformons de chaînes statiques en modèles dynamiques réutilisables, ouvrant ainsi de nouvelles possibilités d'organisation et de flexibilité du code. Alors que le voyage visant à recréer entièrement les fonctionnalités des moteurs de modèles traditionnels se poursuit, cette technique fournit une base solide pour étendre les capacités des littéraux de modèles.