Les littéraux de modèles peuvent-ils être réutilisables et dynamiques ?

Modèles littéraux réutilisables : exposer le potentiel caché

Bien que les modèles littéraux 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 apparente limitation, 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 de modèle et un ensemble de variables à interpoler. Au sein de 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, ce qui facilite la maintenance et la collaboration.
• Capacités étendues : des fonctionnalités supplémentaires telles que les balises de modèle peuvent être intégrées à un peu d'ingéniosité.

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

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.

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!