Analyse du mécanisme d'affichage des modèles du framework NodeJS Express

Cet article présente principalement l'analyse du mécanisme d'affichage des modèles du framework NodeJS Express. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Tout le monde connaît le. Modèle MVC. En plus d'améliorer l'efficacité de la collaboration en équipe, il peut également faciliter la maintenance et les mises à niveau du produit. Dans cet article, nous présenterons les fonctions liées au modèle et à la vue (V) du framework Express.

Moteur de modèles

Express prend en charge de nombreux moteurs de modèles, les plus couramment utilisés sont :

• implémentation de hamlHaml

• successeur de haml.js, et également le moteur de modèle par défaut d'ExpressJade

• Modèle JavaScript intégréEJS

• Moteur de modèles basé sur CoffeeScriptCoffeeKup

• Version NodeJSMoteur de modèles jQuery

Rendu de la vue (rendu de la vue)

Le nom de fichier de la vue doit suivre par défaut Sous la forme "8a11bc632ea32a57b3e3693c7987c420.4ac516df2bd3b3f39951bf63aa54a6de", où 4ac516df2bd3b3f39951bf63aa54a6de est le nom du module à charger. Par exemple, la vue layout.ejs indique au système de vue de require('ejs'). Le module chargé doit générer la méthode exports.compile(str, options) et renvoyer une fonction pour se conformer à la convention d'interface de modèle d'Express. Nous pouvons également utiliser app.register() pour mapper le moteur de modèle à d'autres extensions de fichiers afin d'obtenir un comportement du moteur de modèle plus flexible, afin que "csser.html" puisse être rendu par le moteur ejs.

Ensuite, nous utiliserons le moteur Jade pour rendre index.html, car nous n'avons pas défini layout:false, le contenu après le rendu index.jade sera transmis à layout.jade en tant que variable locale du corps.

<SPAN style="FONT-SIZE: 13px">app.get(&#39;/&#39;, function(req, res){ 
res.render(&#39;index.jade&#39;, { title: &#39;CSSer, 关注Web前端技术！&#39; }); 
}); 
</SPAN>

Le nouveau paramètre "moteur d'affichage" peut spécifier le moteur de modèle par défaut. Si nous voulons utiliser jade, nous pouvons le définir comme ceci :

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view engine&#39;, &#39;jade&#39;); 
</SPAN>

Donc. on peut passer la méthode suivante :

<SPAN style="FONT-SIZE: 13px">res.render(&#39;index&#39;); 
</SPAN>

au lieu de la méthode suivante :

<SPAN style="FONT-SIZE: 13px">res.render(&#39;index.jade&#39;); 
</SPAN>

Lorsque le "moteur de visualisation" est défini, l'extension du modèle devient facultative, et on peut également Mélangez et associez plusieurs moteurs de modèles :

<SPAN style="FONT-SIZE: 13px">res.render(&#39;another-page.ejs&#39;); 
</SPAN>

Express fournit également des paramètres d'options d'affichage. Ces paramètres seront appliqués après le rendu de chaque vue. Par exemple, si vous n'utilisez pas souvent les mises en page, vous pouvez les définir comme. ceci :

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view options&#39;, { 
layout: false 
}); 
</SPAN>

Si nécessaire, ces paramètres peuvent être remplacés lors des appels res.render() suivants :

<SPAN style="FONT-SIZE: 13px">res.render(&#39;csser-view.ejs&#39;, { layout: true }); 
</SPAN>

Vous pouvez remplacer la valeur par défaut du système par votre propre mise en page en spécifiant un Par exemple, si nous définissons "view engine" sur jade et personnalisons une mise en page nommée "./views/mylayout.jade", nous pouvons l'utiliser comme ceci :

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: &#39;mylayout&#39; }); 
</SPAN>

Sinon, l'extension doit être utilisée. être spécifié :

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: &#39;mylayout.jade&#39; }); 
</SPAN>

Ces chemins peuvent également être des chemins absolus :

<SPAN style="FONT-SIZE: 13px">res.render(&#39;page&#39;, { layout: __dirname + &#39;///www.jb51.net/mylayout.jade&#39; }); 
</SPAN>

Un meilleur exemple de ceci est les balises d'ouverture et de fermeture des modèles ejs personnalisés :

<SPAN style="FONT-SIZE: 13px">app.set(&#39;view options&#39;, { 
open: &#39;{{&#39;, 
close: &#39;}}&#39; 
}); 
</SPAN>

Afficher les partiels
Le système de vue Express prend en charge de manière native les vues partielles et de collection, appelées mini-vues et sont principalement utilisées pour restituer un fragment de document. Par exemple, au lieu de parcourir les commentaires dans la vue, autant utiliser une collection partielle :

<SPAN style="FONT-SIZE: 13px">partial(&#39;comment&#39;, { collection: comments }); 
</SPAN>

Si nous n'avons pas besoin d'autres options ou variables locales, nous pouvons omettre l'objet et simplement passez le tableau des commentaires, ce qui est le même que L'exemple ci-dessus est le même :

<SPAN style="FONT-SIZE: 13px">partial(&#39;comment&#39;, comments); 
</SPAN>

Lors de l'utilisation de collections locales, certaines variables locales « magiques » sont prises en charge :

• firstInCollection Cette valeur est vraie lorsqu'il s'agit du premier objet

• indexInCollection L'index valeur de l'objet dans la collection

• lastInCollection est vraie lorsqu'il s'agit du dernier objet

• collectionLength La longueur de la collection

Les variables locales transmises (ou générées) sont prioritaires, cependant les variables locales transmises à la vue parent sont disponibles dans la vue enfant en tant que eh bien, par exemple, si nous devions rendre un article de blog avec partiel (« blog/article », article), cela générerait l'article local, mais la vue appelant cette fonction avait l'utilisateur local, elle serait disponible pour le blog/. post-view également.

Les variables locales transmises (ou générées) sont prioritaires, mais les variables locales transmises dans la vue parent sont toujours valides dans la sous-vue. Par conséquent, si nous utilisons partial('blog/post', post) pour afficher le journal du blog, la variable locale de post sera générée, mais la vue qui appelle cette fonction a un utilisateur local et elle est toujours valide dans le blog. /post-vue. (Première remarque : il y a quelque chose qui ne va pas avec cette traduction, merci de me donner quelques conseils).

Conseil de performances : lorsque vous utilisez une collection partielle pour restituer un tableau de 100 longueurs, cela signifie restituer la vue 100 fois. Pour les collections simples, vous pouvez intégrer la boucle au lieu d'utiliser une collection partielle, ce qui peut réduire le système. aérien.

Recherche de vue

La recherche de vue est relative à la vue parent. Par exemple, nous avons une vue appelée "views/user" /list. .jade", si partial('edit') est appelé dans cette vue, le système de visualisation tentera de trouver et de charger les "views/user/edit.jade" et les partial('.. /messages') "views /messages.jade" sera chargé.

Le système d'affichage prend également en charge les modèles d'index afin que vous puissiez utiliser un répertoire du même nom. Par exemple, dans une route, nous exécutons res.render('users'), qui pointera vers "views/users.jade" ou "views/users/index.jade".

Lors de l'utilisation de la vue d'index ci-dessus, nous pouvons référencer "views/users/index.jade" à partir du répertoire du même nom via partial('users'), et le système de vue va essayer " ../users/index", ce qui réduit notre besoin d'appeler partial('index').

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Introduction au module de traitement des chemins path dans Node.js

Avant et après la mise en œuvre de SpringBoot et Vue.js Fonction de téléchargement de fichiers de bout en bout

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!