Guide du guidon pour débutant

De nos jours, la majorité du Web se compose d'applications dynamiques dans lesquelles les données continuent de changer fréquemment. En conséquence, il existe un besoin continu de mettre à jour les données rendues sur le navigateur. C'est là que les moteurs de modèles JavaScript viennent à la rescousse et deviennent si utiles. Ils simplifient le processus de mise à jour manuellement de la vue et en même temps, ils améliorent la structure de l'application en permettant aux développeurs de séparer la logique métier du reste du code. Certains des moteurs de modèles JavaScript les plus connus sont la moustache, le soulignement, les EJ et le guidon. Dans cet article, nous concentrerons notre attention sur le guidon en discutant de ses principales caractéristiques.

Les plats clés

• Le guidon est un moteur de modèles sans logique qui étend la moustache, ajoutant une logique minimale via des aides, ce qui le rend idéal pour séparer la structure HTML de la logique métier et améliorer la maintenabilité des applications.
• La création de matrices dans le guidon implique l'utilisation d'accolades à double boucle `{{}}` pour les variables, qui peuvent être précompilées pour améliorer les performances et réduire le traitement côté client.
• Le guidon prend en charge les aides personnalisées, permettant aux développeurs d'implémenter une logique complexe dans les modèles, offrant une flexibilité au-delà de la simple liaison de données.
• Les modèles partiels dans le guidon facilitent la réutilisabilité du code dans différentes parties d'une application, la rationalisation du processus de développement et le maintien de la cohérence.
• La précompilation des modèles de guidon peut améliorer considérablement les performances des applications Web en minimisant les frais généraux de compilation d'exécution du côté client.

guidon: ce que c'est et pourquoi l'utiliser

Le guidon est un moteur de modèles sans logique qui génère dynamiquement votre page HTML. C'est une extension de la moustache avec quelques fonctionnalités supplémentaires. La moustache est entièrement sans logique, mais le guidon ajoute une logique minimale grâce à l'utilisation de certains aides (comme si, avec, à moins que, chacun) que nous en discuterons plus loin dans cet article. En fait, nous pouvons dire que le guidon est un superset de moustache.

Le guidon peut être chargé dans le navigateur comme tout autre fichier JavaScript:

<span><span><span><script</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

Si vous vous demandez pourquoi vous devriez utiliser ce moteur de modèles plutôt qu'un autre, vous devriez jeter un œil à ses pros. Voici une courte liste:

• Il maintient votre page HTML propre et sépare les modèles sans logique de la logique métier dans vos fichiers JavaScript, améliorant ainsi la structure de l'application (et également sa maintenabilité et sa évolutivité)
• Il simplifie la tâche de mise à jour manuelle des données sur la vue
• Il est utilisé dans des cadres et plates-formes populaires tels que Ember.js, Meteor.js, Derby.js et Ghost

J'espère que ce court récapitulatif vous aide à décider s'il vaut la peine d'utiliser ou non.

Comment ça marche?

Comme le montre le diagramme ci-dessus, la façon dont fonctionne le guidon peut être résumée comme suit:

1. Le guidon prend un modèle avec les variables et le compile en une fonction
2. Cette fonction est ensuite exécutée en faisant passer un objet JSON comme argument. Cet objet JSON est connu sous le nom de contexte et contient les valeurs des variables utilisées dans le modèle
3. À son exécution, la fonction renvoie le HTML requis après avoir remplacé les variables du modèle par leurs valeurs correspondantes

Pour comprendre le processus ci-dessus, commençons par une démo qui explique en détail toutes les étapes mentionnées ci-dessus.

Modèles

Les modèles

peuvent être écrits à la fois dans le fichier HTML ou séparément. Dans le premier cas, ils apparaissent à l'intérieur de la balise avec un attribut "Type =" text / x-handlebars "et un ID. Les variables sont écrites en blincements à double boucle {{}} et sont appelés expressions. Voici un exemple:

<span><span><span><script</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

Avec ce balisage en place, nous pouvons voir ce que nous devons faire. Dans votre fichier JavaScript, nous devons d'abord récupérer le modèle du document HTML. Dans l'exemple suivant, nous utiliserons l'ID du modèle à cet effet. Une fois le modèle récupéré, nous pouvons le compiler à l'aide de la méthode de guidon.compile () qui renvoie une fonction. Cette fonction est ensuite exécutée en faisant passer le contexte comme un argument. Une fois l'exécution terminée, la fonction renvoie le HTML souhaité avec toutes les variables remplacées par leurs valeurs correspondantes. À ce stade, nous pouvons injecter le HTML dans notre page Web.

transformer cette description en code entraîne l'extrait suivant:

<span><span><span><script</span> id<span>="handlebars-demo"</span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></script</span>></span></span>

Une démo en direct de ce code peut être trouvée dans cette démo de codepen

Syntaxes

Il est maintenant temps de plonger un peu plus profondément dans le guidon. Nous allons passer par quelques termes et syntaxes importants qui forment le cœur du guidon.

Expressions

Nous avons déjà vu des expressions dans la section ci-dessus. Les variables utilisées à l'intérieur des modèles sont entourées de doubles accolades bouclées {{}} et sont connues sous le nom d'expressions:

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

html échappant

Le guidon peut échapper à la valeur renvoyée par l'expression. Par exemple, le caractère

<span>My name is {{name}}</span>

est utilisé avec la variable de contexte rapportée ci-dessous:

I am learning {{language}}. It is {{{adjective}}}.

Le HTML résultant sera:

<span>var context = {"language" : "<h3>Handlebars</h3>","adjective": "<h3>awesome</h3>"}</span>

Une démo en direct qui montre cette fonctionnalité peut être trouvée dans cette démo de codepen

Commentaires

Nous pouvons également écrire des commentaires à l'intérieur des modèles de guidon. La syntaxe des commentaires du guidon est {{! TypeyourCommentHere}}. Cependant, chaque commentaire qui a}} dedans ou tout autre symbole qui a une signification particulière dans le guidon doit être écrit sous la forme {{! - TypeyourCommentHere--}}. Les commentaires du guidon ne sont pas visibles dans le HTML mais si vous voulez les montrer, vous pouvez utiliser le commentaire HTML standard: .

Si nous appliquons tous ces concepts au modèle que nous utilisons, nous pouvons trouver le code ci-dessous:

<span><span><span><script</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

Si nous utilisons le modèle précédent avec la variable de contexte rapportée ci-dessous:

<span><span><span><script</span> id<span>="handlebars-demo"</span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></script</span>></span></span>

La sortie HTML sera:

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

qui fera en sorte que le navigateur ne montre pas le contenu dans le commentaire HTML standard. Une démo de cet exemple peut être trouvée ici.

Blocs

Dans le guidon, les blocs sont des expressions qui ont une ouverture de bloc ({{#}}) et la fermeture ({{/}}). Nous étudierons en profondeur ce sujet plus tard tout en nous concentrant sur les aides. Pour l'instant, jetez un œil à la façon dont un bloc IF est écrit:

<span>My name is {{name}}</span>

chemins

Le guidon prend en charge le chemin normal et imbriqué, ce qui permet de rechercher les propriétés imbriquées sous le contexte actuel. Le guidon prend également en charge le segment ../ Chemin. Ce segment fait référence à la portée du modèle parent et non à un niveau dans le contexte.

Pour mieux comprendre ce sujet, nous utiliserons l'exemple ci-dessous dans lequel nous utilisons chaque assistant (discuté en détail plus tard). Comme vous pouvez vous y attendre, ce dernier itère sur les éléments d'un tableau.

Dans cet exemple, nous utiliserons le modèle suivant:

I am learning {{language}}. It is {{{adjective}}}.

en fournissant cette variable de contexte:

<span>var context = {"language" : "<h3>Handlebars</h3>","adjective": "<h3>awesome</h3>"}</span>

Nous obtiendrons la sortie montrée ci-dessous:

I am learning <span><span><span><h3</span>></span>Handlebars<span><span></h3</span>></span>. It is <span><span><h3</span>></span>awesome<span><span></h3</span>></span></span>

Comme les autres petits extraits que nous avons créés jusqu'à présent, cet exemple est disponible sur Codepen

Aiders

Même si le guidon est un moteur de modèles sans logique, il peut exécuter des logiques simples à l'aide d'aides. Une assistance de guidon est un identifiant simple qui peut être suivi par des paramètres (séparés par un espace), comme indiqué ci-dessous:

<span><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}</span>

Chaque paramètre est une expression du guidon. Ces aides sont accessibles à partir de n'importe quel contexte d'un modèle.

Les termes «bloc», «assistant» et «bloc d'assistance» sont parfois utilisés de manière interchangeable car la plupart des aides intégrées sont des blocs, bien qu'il existe des aides aux fonctions un peu différentes des aides de bloc. Nous en discuterons tout en couvrant les aides personnalisées.

Certains aides intégrés sont si, chacun, sauf si et avec. Apprenons plus.

chaque assistant

L'assistance est utilisée pour itérer sur un tableau. La syntaxe de l'assistance est {{#each arrayName}} yourContent {{/ chaque}}. Nous pouvons nous référer aux éléments de tableau individuels en utilisant le mot-clé ceci à l'intérieur du bloc. L'index de l'élément du tableau peut être rendu en utilisant {{@index}}. L'exemple ci-dessous illustre l'utilisation de chaque assistant.

Si nous utilisons le modèle suivant:

<span><span><span><script</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

en conjonction avec cette variable de contexte:

<span><span><span><script</span> id<span>="handlebars-demo"</span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></script</span>></span></span>

Ensuite, la sortie sera:

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

Une démo en direct de cet exemple peut être trouvée sur Codepen.

si helper

L'assistance if est similaire à une instruction IF. Si la condition évalue une valeur vérité , le guidon rendra le bloc. Nous pouvons également spécifier une section de modèle appelée «section else», en utilisant {{else}}. L'assistance sauf est l'inverse de l'assistance if. Il rend le bloc lorsque la condition évalue à une valeur falsy .

Pour montrer comment fonctionne l'assistance, considérons le modèle ci-dessous:

<span>My name is {{name}}</span>

Si nous fournissons la variable de contexte suivante:

I am learning {{language}}. It is {{{adjective}}}.

Nous obtiendrons le résultat indiqué ci-dessous:

<span>var context = {"language" : "<h3>Handlebars</h3>","adjective": "<h3>awesome</h3>"}</span>

Cela se produit parce qu'un tableau vide est une valeur falsy .

Au cas où vous souhaitez jouer avec les aides, vous pouvez jeter un œil à la démo en direct que j'ai créée sur Codepen.

Aiders personnalisés

Vous pouvez créer vos propres aides pour effectuer des logiques complexes à l'aide du système d'expression fourni par le guidon. Il existe deux types d'aides: les aides à la fonction et les aides à blocs. La première définition est destinée à une seule expression, tandis que ce dernier est utilisé pour les expressions de blocs. Les arguments fournis à la fonction de rappel sont les paramètres écrits après le nom de l'assistance, séparés par un espace. Les aides sont créées à l'aide de Handlebars.RegisterHelper () Méthode:

I am learning <span><span><span><h3</span>></span>Handlebars<span><span></h3</span>></span>. It is <span><span><h3</span>></span>awesome<span><span></h3</span>></span></span>

Helper de la fonction personnalisée

La syntaxe pour une aide de fonction est {{HELPERNAME PARAMETER1 Paramètre2 ...}}. Pour mieux comprendre comment procéder à la mise en œuvre, créons une aide de fonction appelée StudyStatus qui renvoie une chaîne qui sera «passée» si passyear = 2015:

<span><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}</span>

Dans notre exemple, le paramètre n'est qu'un. Cependant, si nous voulons transmettre plus de paramètres à la fonction de rappel de l'assistance, nous pouvons les écrire dans le modèle après le premier paramètre séparé par un espace.

Développer un exemple avec ce modèle:

<span>var context = {"language" : "Handlebars","adjective": "awesome"}</span>

et avec la variable de contexte suivante:

<span><!-- I am learning Handlebars -->I am learning Handlebars. It is</span>

Dans ce cas, la sortie sera:

{{#if boolean}}Some Content here{{/if}}

Une démo en direct de cet exemple est disponible ici.

Helper de bloc personnalisé

Les assistants de bloc personnalisés sont utilisés de la même manière que les aides de fonction, mais la syntaxe est un peu différente. La syntaxe des aides à blocs est:

<span><span><span><script</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

Lorsque nous enregistrons une aide à bloc personnalisée, le guidon ajoute automatiquement un objet Options comme dernier paramètre à la fonction de rappel. Cet objet Options a une méthode fn () qui nous permet de modifier temporairement le contexte de l'objet pour accéder à une certaine propriété. Changeons l'exemple de la section précédente en utilisant une aide de bloc nommée Studystatus mais avec la même variable de contexte:

<span><span><span><script</span> id<span>="handlebars-demo"</span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></script</span>></span></span>

Si ce code est utilisé en conjonction avec le modèle défini ci-dessous

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

Nous obtiendrons le résultat suivant:

<span>My name is {{name}}</span>

Et voici la démo de codepen.

Modèles partiels

Les partisans du guidon sont des modèles qui peuvent être partagés entre différents modèles. Ils sont écrits comme {{> partialName}}. Avant de les utiliser dans le HTML, nous devons enregistrer la méthode partielle à l'aide de huissons.RegisterPartial (). L'exemple suivant vous aidera à comprendre comment enregistrer un partial partiel partial:

I am learning {{language}}. It is {{{adjective}}}.

lorsqu'il est utilisé avec le modèle défini ci-dessous

<span>var context = {"language" : "<h3>Handlebars</h3>","adjective": "<h3>awesome</h3>"}</span>

Cela donnera le résultat suivant:

I am learning <span><span><span><h3</span>></span>Handlebars<span><span></h3</span>></span>. It is <span><span><h3</span>></span>awesome<span><span></h3</span>></span></span>

Une démo en direct de ce code peut être trouvée dans cette démo de codepen.

précompilation

Comme nous l'avons vu, la première chose que le guidon fait est de compiler le modèle dans une fonction. C'est l'une des opérations les plus chères à effectuer sur le client. Nous pouvons améliorer les performances de l'application si nous précompilons les modèlescript, puis envoyons la version compilée au client. Dans ce cas, la seule tâche à effectuer sur le client sera l'exécution de cette fonction. Étant donné que le fichier précompilé est un script, nous pouvons charger le script dans HTML en tant que fichier normal. Voyons comment toutes ces choses peuvent être faites.

Tout d'abord, vous devez installer le guidon mondial en utilisant le guidon NPM Installer -G. S'il vous plaît, assurez-vous que différents modèles sont écrits dans des fichiers séparés avec différents noms de fichiers et avec les extensions .Handlebars (par exemple Demo.Handlebars). Il n'est pas nécessaire d'utiliser la balise dans ces fichiers.

<span><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}</span>

Stockez maintenant tous les fichiers de modèle dans un seul dossier nommé modèles. Vous pouvez utiliser n'importe quel nom de dossier que vous souhaitez, mais si vous faites cela, n'oubliez pas de modifier la commande suivante en conséquence. Alors, ouvrez le terminal et exécutez la commande:

<span>var context = {"language" : "Handlebars","adjective": "awesome"}</span>

Cette commande générera un fichier nommé TemplatesCuled.js qui contient tous les modèles compilés. Le compilateur insérera les modèles dans les guidon. Si le fichier d'entrée est Demo.Handlebars, il sera inséré sur Handlebars.Templates.demo

Maintenant, nous devons inclure des modèlescompilés.js dans le fichier html en tant que script normal. Il est important de noter que nous n'avons pas besoin de charger toute la bibliothèque du guidon car le compilateur lui-même n'est plus nécessaire. Nous pouvons plutôt utiliser la plus petite construction de «runtime»:

<span><span><span><script</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

Maintenant, nous pouvons utiliser le modèle qui était à l'origine présent dans Demo.HandleBars en utilisant le code suivant:

<span><span><span><script</span> id<span>="handlebars-demo"</span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></script</span>></span></span>

La sortie finale sera la suivante:

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

Cette méthode augmentera considérablement les performances de l'application et le temps de chargement de la page diminue également car nous utilisons la construction d'exécution du guidon qui est plus léger que la bibliothèque entière.

Le code de toute cette démo de précompilation est disponible sur github.

Conclusions

Dans cet article, nous avons discuté des concepts de base du guidon. Nous avons également examiné ses fonctions et syntaxes fréquemment utilisées. J'espère que vous avez apprécié ce tutoriel et que vous utiliserez les démos incluses pour avoir une bonne compréhension de ce sujet. J'attends avec impatience de lire vos commentaires.

Au cas où vous ne souhaitez pas télécharger la bibliothèque mais vous voulez toujours l'essayer, vous pouvez jouer avec le guidon en ligne sur http://tryhandlebarsjs.com/.

FAQ sur le guidon

à quoi sert les guidonrs.js utilisés?

huilebars.js est une bibliothèque de modèles JavaScript utilisée dans le développement Web pour créer des pages Web dynamiques et générer du contenu HTML basé sur les données. Il permet la création de modèles réutilisables avec des espaces réservés (guidon) pour l'insertion de données. Cette bibliothèque facilite la liaison bidirectionnelle des données, permettant aux modèles de mettre à jour automatiquement lorsque les données changent. Les développeurs utilisent généralement des guichets.js pour le rendu côté client, la logique conditionnelle et l'itération des données. Il favorise la séparation des préoccupations entre la structure HTML et les données, ce qui en fait un outil précieux pour créer des applications Web interactives et axées sur les données tout en améliorant la maintenabilité et la sécurité du code.

Pourquoi utiliser le guidon au lieu de HTML?

Le guidon est généralement utilisé en conjonction avec HTML, plutôt qu'en remplacement. Il offre plusieurs avantages lorsqu'il est combiné avec HTML, y compris la liaison dynamique des données, la réutilisabilité du code, une séparation claire des préoccupations entre la présentation et les données, le rendu côté client, la cohérence dans la génération de contenu, la sécurité améliorée par la séparation du code et la prise en charge de la localisation. Ces avantages font collectivement le guidon un outil précieux pour construire des applications Web dynamiques et maintenables tout en s'appuyant sur HTML pour définir la structure de base des pages Web.

Est-ce que le guidon est déprécié?

Au moment de la rédaction du guidon , Le guidon n'est pas obsolète, et il reste une bibliothèque de modèles JavaScript viable et largement utilisée dans le développement Web.

Qu'est-ce qu'un modèle de guidon?

Un modèle de guidon est une structure textuelle qui définit la disposition et la structure du contenu HTML dynamique dans le développement Web. Le guidon est une bibliothèque de modèles JavaScript qui vous permet de créer ces modèles, ce qui facilite la génération de contenu HTML basé sur des données.
Dans un modèle de guidon, vous pouvez inclure des espaces réservés, appelés «guidon», qui représentent des données dynamiques. Ces guidonrs sont enfermés en accolades à double boucle {{}}. Par exemple:

Bonjour, {{name}}!

Dans ce modèle de guidon simple, {{nom}} est un espace réservé pour une variable appelée "Name . " Lorsque vous rendez ce modèle avec des données spécifiques, telles que {nom: "John"}, le guidon remplace {{nom}} avec la valeur de données correspondante:

Bonjour, John!

Les modèles de guidon sont particulièrement utiles pour créer du contenu HTML cohérent et maintenable, car ils séparent la présentation (structure HTML) à partir des données, ce qui facilite la mise à jour et la réutilisation Modèles sur votre application Web.

Quel est le meilleur: un modèle de guidon ou de moustache?

Le choix entre le guidon et la moustache dépend des exigences et des priorités de votre projet. Le guidon offre des fonctionnalités plus avancées, ce qui le rend adapté à des besoins et à des projets complexes où un écosystème plus important et un soutien communautaire sont importants. La moustache, en revanche, est plus simple et suit une philosophie «sans logique», ce qui en fait un bon choix pour les projets qui priorisent la simplicité et la portabilité dans plusieurs langages de programmation.

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!