Cet article a été revu par des pairs par Chris Perry et Ritesh Kumar. Merci à tous les pairs examinateurs de SitePoint pour avoir fait du contenu SitePoint le meilleur possible!

Dans cet article, nous allons donner un aper?u des modèles en JavaScript. Nous allons d'abord discuter de ce que sont les modèles JavaScript, lorsque nous devons les utiliser et comment nous les implémentons, avant d'entrer dans un peu plus de détails concernant certains des moteurs de modèles populaires. Nous allons nous concentrer sur la moustache, le guidon et le modèle jQuery.

Les plats clés

• Les modèles JavaScript offrent une méthode de séparation de la structure HTML du contenu, améliorant la maintenabilité de la base de code. Ils sont particulièrement bénéfiques pour les applications Web en temps réel et l'internationalisation, qui nécessitent souvent que des contenus différents soient affichés en utilisant le même format.
• Mustache.js est un système de modèles multi-langues et sans logique idéal pour les petits projets et les prototypes rapides. Il est simple, n'a pas de dépendances et ne nécessite pas de modèles précompilés. De plus, les projets peuvent facilement passer à des guidon.
Huisseaux.js, construit sur la moustache, prend en charge les expressions de blocs et les modèles précompilés, améliorant considérablement les performances. Il convient aux projets où les performances sont cruciales et l'ajout de 18 Ko au poids de la page n'est pas une préoccupation. Pour voir les avantages de performance et la taille réduite du fichier, les modèles précompilés doivent être utilisés.
Le modèle jQuery, bien que pas aussi populaire que Mustache.js ou guidon.js, ne doit pas être négligé. Il nécessite JQuery et utilise des attributs de données pour indiquer où les données doivent être insérées dans le fragment HTML. Il est idéal pour les projets déjà incluant jQuery en raison de sa petite taille de fichier. Cependant, il n'est pas recommandé pour les projets n'utilisant pas jQuery compte tenu de la taille totale du fichier.

Que sont les modèles JavaScript?

Les modèles JavaScript sont une méthode de séparation de la structure HTML du contenu contenu à l'intérieur. Les systèmes de modèles introduisent généralement une nouvelle syntaxe, mais sont généralement très simples à travailler, surtout si nous avons utilisé des systèmes de modèles ailleurs auparavant (par exemple, des brindilles en PHP). Un point amusant à noter est que le remplacement du jeton est généralement symbolisé par des supports doubles bouclés ({{...}}), dont la moustache et le guidon tirent leurs noms de (indice: tournez-les latéralement pour voir la similitude).

Quand devrions-nous utiliser des modèles JavaScript?

Dès que nous nous retrouvons, y compris HTML à l'intérieur des cha?nes JavaScript, nous devrions commencer à réfléchir aux avantages que les modèles JavaScript pourraient nous offrir. La séparation des préoccupations est de la plus haute importance lors de la construction d'une base de code maintenable, donc tout ce qui peut nous aider à y parvenir devrait être exploré. Dans le développement Web frontal, cela est incarné lors de la séparation du HTML de JavaScript (cela fonctionne dans les deux sens dans la mesure où nous ne devons pas inclure le JavaScript en ligne dans HTML).

Certains scénarios courants qui pourraient bénéficier des modèles JavaScript sont des applications Web en temps réel (par exemple une application de streaming en direct pour le commentaire de l'événement), ou l'internationalisation (I18N), qui nécessitera souvent que le contenu différent est affiché en utilisant le même formatage .

Comment implémentons-nous les modèles JavaScript?

Nous allons entrer plus en détail à ce sujet avec des exemples de bibliothèque spécifiques, mais il est essentiellement aussi simple que d'inclure notre bibliothèque choisie, de récupérer notre modèle et de les rendre aux c?tés de certaines données.

La plupart des bibliothèques prennent en charge les modèles en ligne et externes. Les modèles en ligne sont parfaits lorsque nous avons très peu de modèles ou que nous savons que nous utiliserons les modèles inclus sur chaque charge de page, mais généralement nos modèles devraient être externes. Les modèles externes apportent de nombreux avantages, principalement que les modèles ne seront jamais téléchargés au client à moins qu'ils ne soient nécessaires par la page.

moustache.js

Moustache est un système de modèles multi-langues et sans logique. L'implémentation Mustache.js n'est que l'une des nombreuses. Ainsi, une fois que nous sommes habitués à la syntaxe (très simple), nous pouvons l'utiliser dans une variété de langages de programmation.

points clés

• Taille du fichier 9KB (petit)
• Simple
• pas de dépendances
• pas de logique
• pas de modèles précompilés
• Langue de programmation Agnostic

Exemple

<span><span><span><script</span> id<span>="template"</span> type<span>="x-tmpl-mustache"</span>></span><span>
</span></span><span><span>  <span><p>Use the <strong>{{power}}</strong>, {{name}}!</p>
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

//Grab the inline template
var template = document.getElementById('template').innerHTML;

//Parse it (optional, only necessary if template is to be used again)
Mustache.parse(template);

//Render the data into the template
var rendered = Mustache.render(template, {name: "Luke", power: "force"});

//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;

Voir l'exemple Pen Mustache.js par SitePoint (@SitePoint) sur Codepen.

Comme vous pouvez le voir dans cet exemple, la fonction Mustache.Render prend deux paramètres: le modèle de moustache, ainsi qu'un objet de vue qui contient les données et le code nécessaires pour rendre le modèle. Dans ce cas, nous rempla?ons le nom et les variables de puissance par des cha?nes simples, mais il est possible d'en faire beaucoup plus. Par exemple, faire une boucle sur un tableau ou utiliser une fonction de rendu spéciale qui utilise la vue actuelle comme argument de vue.

Mustache.js est parfait pour les petits projets et les prototypes rapides où la complexité des modèles est au minimum. Une chose clé à noter est que nous pouvons démarrer un projet avec Mustache.js, puis passer facilement à des guichets.js plus tard car les modèles sont (principalement) les mêmes.

Si vous souhaitez en savoir plus sur Mustache, consultez: Création de modèles HTML avec moustache.js.

huisseaux.js

Huissiers.js est construit sur le dessus de la moustache et est principalement compatible avec les modèles de moustache. En un mot, il fournit tout ce que Moustache.js fournit, plus il prend en charge les expressions de blocs et les modèles précompilés. Les modèles précompilés sont un gros problème car ils augmentent les performances d'une grande marge (dans un test de performance approximatif, des modèles de guidon précompilé.JS rendu dans environ la moitié des modèles de moustache). Les expressions de blocs vous permettent d'inclure plus de logique dans vos modèles; L'un des exemples les plus courants de ceux-ci est les itérateurs avancés - par exemple. Créez un itérateur

de la liste qui enveloppe chaque élément dans
• . Vous pouvez en savoir plus sur les expressions de blocs ici.

  points clés

  • Taille de fichier 86KB (grande), ou 18 Ko, si vous utilisez des modèles précompilés
  • Bloquer les expressions (aides)
  • Modèles précompilés
  • pas de dépendances

  Exemple

  <span><span><span><script</span> id<span>="template"</span> type<span>="x-tmpl-mustache"</span>></span><span>
  </span></span><span><span>  <span><p>Use the <strong>{{power}}</strong>, {{name}}!</p>
  </span></span></span><span><span></span><span><span></script</span>></span>
  </span>

  //Grab the inline template
  var template = document.getElementById('template').innerHTML;
  
  //Parse it (optional, only necessary if template is to be used again)
  Mustache.parse(template);
  
  //Render the data into the template
  var rendered = Mustache.render(template, {name: "Luke", power: "force"});
  
  //Overwrite the contents of #target with the rendered HTML
  document.getElementById('target').innerHTML = rendered;
  

  Voir l'exemple de guidon de stylo.js par SitePoint (@SitePoint) sur codepen

  huissons de guidon est parfait pour les projets où les performances sont importantes et nous ne sommes pas extrêmement inquiets d'ajouter 18 Ko au poids de la page. C'est aussi la voie à suivre si nous voulons utiliser les expressions de blocs.

  Notez que pour voir les avantages de performance de Handlebars.js (et la taille de fichier considérablement réduite), nous devons utiliser des modèles précompilés. Afin de le faire efficacement, nous devons ajouter une compilation de modèle de guidon.

  Si vous souhaitez en savoir plus sur le guidon, consultez: un guide du débutant sur le guidon.
  modèle jQuery
  Le modèle jQuery n'est pas aussi populaire que Mustache.js ou guichets.js, mais nous ne devons pas le négliger. Les modèles sont différents des modèles de moustache car ils sont tout simplement HTML sans nouvelle syntaxe. Au lieu de techniques de remplacement de jeton, il utilise des attributs de données pour indiquer où les données doivent être insérées dans le fragment HTML.
  points clés
  Taille du fichier 7KB (petit)
  nécessite jQuery (82KB)
  Simple, mais différent de la fa?on dont la moustache et les guidon.
  • pas de modèles précompilés
  Exemple

  <span><span><span><script</span> id<span>="template"</span> type<span>="text/x-handlebars-template"</span>></span><span>
  </span></span><span><span>  <span><p>Use the <strong>{{power}}</strong>, {{name}}!</p>
  </span></span></span><span><span></span><span><span></script</span>></span></span>

  Voir l'exemple de modèle de stylo jQuery par SitePoint (@SitePoint) sur codepen.

  //Grab the inline template
  var template = document.getElementById('template').innerHTML;
  
  //Compile the template
  var compiled_template = Handlebars.compile(template);
  
  //Render the data into the template
  var rendered = compiled_template({name: "Luke", power: "force"});
  
  //Overwrite the contents of #target with the renderer HTML
  document.getElementById('target').innerHTML = rendered;
  

  Le modèle jQuery est idéal pour les projets qui incluent déjà jQuery car la taille du fichier est très petite. Cependant, si votre projet n'utilisera pas jQuery, il est difficile de recommander en considération la taille totale du fichier.

  Autres options

  Il existe bien s?r de nombreuses autres solutions à ce problème que nous ne couvrirons pas en détail dans cet article. Voici un aper?u très rapide de certains autres choix populaires;

  souligner.js

  souligner est une bibliothèque JavaScript populaire qui fournit des fonctions de modèles parmi une myriade d'autres fonctionnalités. Par défaut, il n'utilise pas la syntaxe du support à double boucle utilisé par Moustache, optant plut?t pour les délimiteurs de style ERB ().

  Modèles JS intégrés (EJS)

  comme sous-traitant.js, les modèles JS intégrés utilisent une syntaxe de style Erb pour les modèles. Une chose à noter avec EJS est que les modèles doivent être des fichiers externes - ils ne peuvent pas être en ligne.

  Remarques de cl?ture

  Alors, quel est le meilleur? Comme la plupart des problèmes de développement, il n'y a pas de solution miracle. Cela dépend de beaucoup de choses;

  • utilisez-vous déjà jQuery dans votre projet?
  • avec quels modèles de modèles avez-vous une expérience antérieure?
  • Voulez-vous garder la logique hors des modèles?
  • Dans quelle mesure êtes-vous inquiet de la taille totale du fichier de page?
  • Dans quelle mesure êtes-vous inquiet de performances / votre site Web doit-il prendre en charge les appareils de faible puissance?

  Une fois que nous avons pensé à ces facteurs, nous pouvons faire un choix instruit de la liste ci-dessus. Cependant, comme brièvement mentionné précédemment, une bonne stratégie flexible serait de mettre en ?uvre Mustache.js d'abord, puis d'échanger sur des guidon.js plus tard si les fonctionnalités ou les avantages de performance ajoutés sont nécessaires.

  Vous voulez faire des scénarios? Veuillez laisser un commentaire ci-dessous!

  Les questions fréquemment posées sur les moteurs de modèles JavaScript

  Quelles sont les principales différences entre les moteurs de modèles JavaScript?

  Les moteurs de modèles JavaScript varient en termes de syntaxe, de performances et de fonctionnalités. Par exemple, EJS est connu pour sa simplicité et sa facilité d'utilisation, tandis que Handlebars.js propose de puissants modèles sans logique. Mustache.js est un autre choix populaire en raison de sa compatibilité entre langue. Il est important de choisir un moteur de modèles qui convient aux exigences de votre projet et à votre style de codage.

  Comment les moteurs de modèles JavaScript améliorent-ils le développement Web?

  Les moteurs de modèles JavaScript rationalisent-ils le processus de génération de HTML, ce qui facilite la tache pour créer des pages Web dynamiques. Ils permettent aux développeurs de séparer la structure HTML des données, conduisant à un code plus propre et plus maintenable. Les moteurs de modèles prennent également en charge les composants réutilisables, ce qui peut réduire considérablement le temps de développement.

  Puis-je utiliser plusieurs moteurs de modèles JavaScript dans un seul projet?

  Bien qu'il soit techniquement possible d'utiliser plusieurs moteurs de modèles en un seul Projet, il n'est généralement pas recommandé. L'utilisation de plusieurs moteurs peut entra?ner une incohérence du code et une complexité accrue. Il est préférable de choisir un moteur de modèles qui correspond à vos besoins et de s'en tenir tout au long du projet.

  Comment un moteur de modèles JavaScript fonctionne-t-il avec express.js?

  Express.js, un cadre d'application Web populaire pour Node.js, prend en charge une large gamme de moteurs de modèles. Une fois que vous avez choisi un moteur de modèles, vous pouvez le définir comme moteur par défaut dans express.js. Cela vous permet de rendre des vues en utilisant le moteur choisi, en simplifiant le processus de génération de HTML dynamique.

  Quelles sont les modèles littéraux en javascrip Fonctionnalité dans JavaScript qui permet une interpolation de cha?ne plus facile et des cha?nes multi-lignes. Bien qu'ils puissent être utilisés pour générer du HTML, ils manquent de nombreuses fonctionnalités fournies par les moteurs de modèles, tels que le soutien aux composants réutilisables et la séparation des préoccupations. Cependant, ils peuvent être utiles pour des cas d'utilisation simples où un moteur de modèles à part entière n'est pas nécessaire.

  Comment choisir le bon moteur de modèles JavaScript pour mon projet?

  Choisir les bons modèles de modèles Le moteur dépend des exigences de votre projet et des préférences personnelles. Considérez des facteurs tels que la complexité de votre projet, la courbe d'apprentissage du moteur et les fonctionnalités qu'il offre. C'est aussi une bonne idée de regarder la communauté et le soutien autour du moteur.

  Y a-t-il des différences de performances entre les moteurs de modèles JavaScript?

  Oui, il peut y avoir des différences de performance significatives entre les différents moteurs de modèles . Certains moteurs sont plus rapides dans la compilation de modèles, tandis que d'autres excellent dans le rendu. Cependant, pour la plupart des applications Web, ces différences sont peu susceptibles d'avoir un impact notable sur les performances.

  Puis-je créer mon propre moteur de modèles JavaScript?

  Oui, il est possible de créer votre propre moteur de modèles , bien qu'il ne soit généralement pas recommandé à moins d'avoir des besoins spécifiques qui ne sont pas satisfaits par les moteurs existants. La création d'un moteur de modèles nécessite une compréhension approfondie du JavaScript et peut prendre du temps.

  Comment déboguer les problèmes avec un moteur de modèles JavaScript?

  Les problèmes de débogage avec un moteur de modèles peuvent être difficiles, car les erreurs se produisent souvent au moment de l'exécution. Cependant, la plupart des moteurs fournissent des messages d'erreur utiles qui peuvent vous guider vers la source du problème. C'est également une bonne idée d'utiliser un linter pour attraper des erreurs de syntaxe.

  Les moteurs de modèles JavaScript sont-ils utilisés uniquement pour le développement Web?

  Bien que les moteurs de modèles soient le plus souvent utilisés dans le développement Web, ils peuvent également être utilisé dans d'autres contextes. Par exemple, ils peuvent être utilisés pour générer des e-mails, des PDF ou tout autre type de contenu textuel. Le principal avantage des moteurs de modèles est leur capacité à séparer les données de la présentation, qui peuvent être utiles dans un large éventail d'applications.

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!