Analyse des Vorlagenansichtsmechanismus des NodeJS-Frameworks Express

Dieser Artikel stellt hauptsächlich die Analyse des Vorlagenansichtmechanismus des NodeJS-Frameworks Express vor. Er hat einen gewissen Referenzwert. Jetzt können Freunde in Not darauf verweisen Das MVC-Modell verbessert nicht nur die Effizienz der Teamzusammenarbeit, sondern erleichtert auch die Produktwartung und -aktualisierung. In diesem Artikel stellen wir die vorlagen- und ansichtsbezogenen Funktionen des Express-Frameworks vor.

Template-Engine

Express unterstützt viele Template-Engines, häufig verwendete sind:

• Implementierung von haml

  Haml

• haml.js Nachfolger und auch der Standard-Template-Engine von Express

  Jade

• Eingebettete JavaScript-Vorlage

  EJS

• CoffeeScript-basierte Vorlagen-Engine

  CoffeeKup

• NodeJS-Version

  jQuery-Vorlagen-Engine

Ansichtsrendering (Ansichtsrendering)

Der Dateiname der Ansicht muss angegeben werden standardmäßig folgen In der Form „8a11bc632ea32a57b3e3693c7987c420.4ac516df2bd3b3f39951bf63aa54a6de“, wobei 4ac516df2bd3b3f39951bf63aa54a6de der Name des zu ladenden Moduls ist. Beispielsweise weist die Ansicht „layout.ejs“ das Ansichtssystem an, „require('ejs‘)“ zu verwenden. Das geladene Modul muss die Methode „exports.compile(str, options)“ ausgeben und eine Funktion zurückgeben, um der Vorlagenschnittstellenkonvention von Express zu entsprechen. Wir können app.register() auch verwenden, um die Template-Engine anderen Dateierweiterungen zuzuordnen, um ein flexibleres Verhalten der Template-Engine zu erreichen, sodass „csser.html“ von der EJS-Engine gerendert werden kann.

Als Nächstes verwenden wir die Jade-Engine, um index.html zu rendern. Da wir „layout:false“ nicht festgelegt haben, wird der Inhalt nach dem Rendern von index.jade an „layout.jade“ übergeben Körper lokale Variable.

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

Die neue Einstellung „View Engine“ kann die Standard-Template-Engine angeben. Wenn wir Jade verwenden möchten, können wir sie wie folgt festlegen:

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

Damit wir die verwenden können Folgende Methode:

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

anstelle der folgenden:

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

Wenn die „View Engine“ festgelegt ist, wird die Template-Erweiterung optional und wir können auch mehrere Template Engines kombinieren und anpassen:

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

Express bietet auch Ansichtsoptionseinstellungen, die nach dem Rendern jeder Ansicht angewendet werden. Wenn Sie beispielsweise Layouts nicht häufig verwenden, können Sie sie wie folgt festlegen:

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

Bei Bedarf , diese Einstellungen können später im res.render()-Aufruf überschrieben werden:

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

Sie können Ihr eigenes Layout verwenden, um den Systemstandard durch Angabe eines Pfads zu ersetzen engine“ in Jade umwandeln und anpassen. Erstellen Sie ein Layout mit dem Namen „./views/mylayout.jade“. Wir können es wie folgt verwenden:

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

Ansonsten muss die Erweiterung angegeben werden:

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

Diese Pfade können auch absolute Pfade sein:

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

Ein besseres Beispiel hierfür sind die öffnenden und schließenden Tags von benutzerdefinierten EJS-Vorlagen:

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

Teilansichten anzeigen

Das Express-Ansichtssystem unterstützt nativ Teilansichten und Sammlungsansichten, die als Miniaturansicht bezeichnet werden und hauptsächlich zum Rendern eines Dokumentfragments verwendet werden. Anstatt beispielsweise die Kommentare in der Ansicht zu durchlaufen, ist es besser, eine Teilsammlung zu verwenden:

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

Wenn wir keine anderen Optionen oder lokalen Variablen benötigen, können wir das Objekt weglassen und einfach übergeben das Kommentararray, das das gleiche wie oben ist. Das Beispiel ist das gleiche:

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

Bei der Verwendung lokaler Sammlungen werden einige „magische“ lokale Variablen unterstützt:

• firstInCollection Dieser Wert ist wahr, wenn es das erste Objekt ist

• indexInCollection Der Indexwert des Objekts in der Sammlung

• lastInCollection ist wahr, wenn es das letzte Objekt ist

• collectionLength The Länge der Sammlung

Lokale Variablen, die an die übergeordnete Ansicht übergeben (oder generiert) werden, sind jedoch auch in der untergeordneten Ansicht verfügbar Wenn wir beispielsweise einen Blog-Beitrag mit „partial('blog/post', post)“ rendern würden, würde der Beitrag lokal generiert, aber die Ansicht, die diese Funktion aufruft, hätte den lokalen Benutzer, er wäre auch für die Blog-/Beitragsansicht verfügbar .

Eingegebene (oder generierte) lokale Variablen haben Vorrang, aber in die übergeordnete Ansicht übergebene lokale Variablen sind in der Unteransicht weiterhin gültig. Wenn wir also „partial('blog/post', post)“ zum Rendern des Blog-Protokolls verwenden, wird die lokale Variable „post“ generiert, aber die Ansicht, die diese Funktion aufruft, hat einen lokalen Benutzer und ist im Blog weiterhin gültig /Beitragsansicht. (Erster Hinweis: Mit dieser Übersetzung stimmt etwas nicht, bitte geben Sie mir einen Rat.)

Leistungstipp: Wenn Sie eine Teilsammlung zum Rendern eines Arrays mit einer Länge von 100 verwenden, bedeutet dies, dass die Ansicht 100 Mal gerendert wird. Bei einfachen Sammlungen können Sie die Schleife inline ausführen, anstatt eine Teilsammlung zu verwenden, was das System reduzieren kann Overhead.

Ansichtssuche

Die Ansichtssuche erfolgt relativ zur übergeordneten Ansicht. Wir haben beispielsweise eine Ansicht mit dem Namen „Ansichten/Benutzer“ /Liste .jade“-Seitenansicht: Wenn „partial(‘edit‘)“ in dieser Ansicht aufgerufen wird, versucht das Ansichtssystem, „views/user/edit.jade“ und „partial(‘.. /messages‘)“ „views“ zu finden und zu laden /messages.jade“ wird geladen.

Das Ansichtssystem unterstützt auch Indexvorlagen, sodass Sie ein Verzeichnis mit demselben Namen verwenden können. Beispielsweise führen wir in einer Route res.render('users') aus, das auf „views/users.jade“ oder „views/users/index.jade“ zeigt.

Bei Verwendung der obigen Indexansicht können wir über „partial(‘users‘“) und das Ansichtssystem auf „views/users/index.jade“ aus dem gleichnamigen Verzeichnis verweisen Ich werde „ ../users/index“ ausprobieren, was die Notwendigkeit reduziert, „partial(‘index‘“) aufzurufen.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Einführung in den Pfadverarbeitungsmodulpfad in Node.js

Vor und nach der Implementierung von SpringBoot und Vue.js End-to-End-Datei-Upload-Funktion

Das obige ist der detaillierte Inhalt vonAnalyse des Vorlagenansichtsmechanismus des NodeJS-Frameworks Express. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!