Verwenden von Vorlagen mit Handlebars in Express.js

Die Verwendung von Vorlagen ist in der Welt der Webanwendungen zu einer Notwendigkeit geworden, weil sie uns hilft, die Programmierlogik von ihrer Präsentation zu trennen. All diese Trennung und die zunehmende Rezeption dieses Entwicklungsstils haben dazu geführt, dass eine große Anzahl von Rahmen auf dem Markt, die uns helfen, die Verantwortung für die Verwaltung von Vorlagen zu übernehmen.
Im Falle des äußern, dieser kommt nativ mit einer Templating-Engine namens JadeAllerdings kommen viele Entwickler bereits mit einem Hintergrund in anderen und es wäre nicht fair, dass sie sich wieder auf eine neue Engine einstellen müssen, das ist nicht schlecht aber nicht jedermanns Geschmack.
Es ist deswegen äußern ermöglicht es uns, das Framework so zu konfigurieren, dass wir mit verschiedenen Template-Engines arbeiten können, wie z Lenker was ist eine Erweiterung von Schnurrbart.js und es ist eine sehr beliebte Templating-Engine, da sie auf basiert JavaScript und wir können es sowohl serverseitig als auch clientseitig verwenden.
AnforderungenUm einige der hier gezeigten Beispiele zu erfüllen, müssen wir installiert sein und Zugriff darauf haben Node.js, und bereits installiert haben äußern. Ein Texteditor und eine Anwendung äußern sie sind wünschenswert, damit sie die im Tutorial erläuterten Konzepte integrieren können.
Nachteile, keine Template-Engine zu verwendenDie Nichtverwendung einer Template-Engine bringt eine Reihe von Nachteilen mit sich, die sich auf die Geschwindigkeit unserer Anwendungsentwicklung auswirken können. Wir werden diese Nachteile auflisten, damit wir das Gegenteil sehen, wenn wir denken, dass wir die Template-Engine nicht benötigen.
Das Risiko, fehlerhaftes HTML zu erstellen, ist viel höher, daher kann es schwierig sein, Zertifizierungen für unseren Code zu erhalten.
Der resultierende Code kann schwer zu dokumentieren und mit anderen Entwicklern zu teilen sein.
Wenn wir Code verwenden, um HTML zu generieren, wird es immer unangenehm sein, mit Sonderzeichen zu arbeiten.
Es besteht die Tendenz, Anwendungslogik nicht von Präsentation zu trennen.
Wie wir sehen, gibt es viele Nachteile, die zwar nicht schwerwiegend sind und nicht dazu führen, dass unsere Anwendung nicht funktioniert, wenn sie die Möglichkeit einer Produktivitätssteigerung verringert.
Vorteile der Verwendung einer Template-EngineSehen wir uns nun an, was wir durch die Implementierung von Lösungen wie Handlebars in unseren Anwendungen mit Express gewinnen:
Der resultierende Code ist besser organisiert und es wird garantiert, dass kein fehlerhafter HTML-Code vorhanden ist.
Wir können unser Team in zwei Teile aufteilen, indem wir Benutzeroberflächen arbeiten, ohne im Back-End entwickeln zu müssen.
Template-Engines ermöglichen es uns, Codeabschnitte wiederzuverwenden und so dazu beizutragen, unser Projekt optimiert zu halten.
Es gibt viele Dienstprogramme, die uns helfen, eine bessere Interaktion mit dem visuellen Teil unserer Anwendungen bereitzustellen.
Unserer Ansicht nach bieten uns die Template-Engines die Möglichkeit, unseren Code zu separieren, zu optimieren und zu organisieren, was als direkte Folge die Verbesserung der Effektivität, Effizienz und allgemeinen Produktivität in unserem Entwicklungsteam mit sich bringt.
Am Anfang des Tutorials haben wir das erwähnt Jade es war der Standardmotor, warum also suchen wir nach einem anderen Motor? Die Antwort ist ganz einfach, so funktioniert es Jade versucht, die Menge an zu verringern HTML wir schreiben, das kann etwas verwirrend sein, da wir praktisch eine neue Sprache für unsere lernen müssen Vorderes Ende.
Im folgenden Bild sehen wir einen Vorlagencode von Jade So können wir ein Beispiel für seine Syntax sehen:

Wir können feststellen, dass der Unterschied zum Code HTML Der Standard ist miserabel, und obwohl der Code weniger ist, ist der Denkaufwand etwas größer.
Lenker es ist eine andere geschichte als Jade, seine Arbeitsweise ist ähnlich wie bei anderen Motoren wie Jinja2 oder Schluck, da es uns erlaubt, Etiketten zu schreiben HTML und dann können wir mit unserem eigenen Engine-Code definieren, was er aus dem Kontext ausdruckt und wie er es tut.
Wenn wir zum Beispiel wissen, dass wir etwas drucken werden, das ein Benutzer geschrieben hat, können wir die Sonderzeichen automatisch mit Escapezeichen versehen und so die Codeinjektion vermeiden, aber wenn wir wissen, dass es unser eigener Code ist, können wir es ausdrücken an Lenker das entgeht dem Text nicht.
Server oder ClientEin weiterer Aspekt von Lenker ist, dass es auf zwei Arten funktionieren kann, von der Serverseite oder von der Clientseite. Diese Vielseitigkeit bedeutet, dass wir besser entscheiden können, wie wir unsere Anwendungen durchführen möchten, denn wenn es ein SPA o Einzelseitenanwendung, vielleicht ist der clientseitige Ansatz einfacher und nützlicher, aber wenn wir eine Website wollen, ist es vielleicht nützlicher, alles auf dem Server zu generieren.
Für die Installation Lenker auf der Serverseite ist es sehr einfach, wir müssen es nur verwenden npm in unserer Konsole und so erhalten wir die notwendigen Pakete, mal sehen, was wir schreiben müssen:

 npm install --save express-lenker

Damit npm Es werden alle notwendigen Komponenten heruntergeladen, damit wir diese Engine in unser Projekt integrieren können. Am Ende sollten wir in unserer Konsole ein Ergebnis ähnlich dem folgenden erhalten:

Dann in unserer Datei, in der wir unsere Bewerbung starten äußern Wir müssen ihm sagen, dass es dies als Template-Engine verwenden soll, dafür müssen wir einfach den folgenden Code schreiben:

 var handlebars = require ('express-lenker') .create ({defaultLayout: 'main'}); app.engine ('lenker', handlebars.engine); app.set ('view engine', 'lenker');

Was in unserer Datei verbleiben würde, wäre Folgendes:

Grundsyntax für LenkerLenker Es hat seine eigene, sehr saubere Syntax, die es uns ermöglicht, ein wenig Ansichtslogik in die Vorlage zu integrieren, Kommentare einzubauen, über Listen und Blöcke zu iterieren, Textabschnitte mit Escapes zu versehen oder nicht. Deshalb ist es wichtig, die grundlegendsten zu kennen, damit wir unsere Ideen bequemer ausdrücken und so das Beste daraus machen können. Sehen wir uns unten die grundlegendsten der Engine an.
Als Ergebnis generiert unsere Ansicht Daten, die wir dem Benutzer zeigen müssen, wir geben diese Daten durch den Kontext an unsere Vorlage weiter und drucken sie dort aus. Um dies zu drucken, müssen wir einfach die Variable oder das Element wie folgt in doppelte Klammern einschließen:

 {{Name}}

Das führt uns dazu, den Inhalt von . zu sehen "Name" die wir aus unserer Sicht definiert haben, werden diese doppelten geschweiften Klammern automatisch mit Escapezeichen versehen, sodass kein Code gedruckt wird, der standardmäßig vom Entwickler nicht erlaubt ist.
Wenn wir nun einen Text ohne Escape ausgeben möchten, müssen wir dreifache Klammern verwenden Lenker dass nichts entkommen soll, sehen wir uns das Beispiel an:

 {{{Namen}}}

Dies, wenn es uns erlaubt, Code zu drucken HTML, Sonderzeichen und sogar JavaScript ohne Eingriff unserer Engine.
Das Bemerkungen in der Vorlage sind von entscheidender Bedeutung, da sie es uns ermöglichen, Abschnitte zu identifizieren, wichtige Informationen hinzuzufügen und unseren Antrag zu dokumentieren. Wenn wir direkt einen Kommentar abgeben HTML in der Form: Dies ist letztendlich für jeden sichtbar, der den Code unserer Seite inspiziert, und schränkt uns in dem, was wir dokumentieren können, ein.
Aber wenn wir Kommentare in verwenden Lenker, können wir sie immer im Quellcode sehen, aber die Engine lässt es beim Generieren aus, was der Benutzer sieht, und wenn wir dann den Code des Webs oder der Anwendung untersuchen, sehen wir nichts. Um einen Kommentar zu schreiben Lenker wir müssen folgendes tun:

 {{! unser Kommentar}}

Dies bedeutet, dass der Inhalt des Kommentars niemals im Ergebnis generiert wird, das für unsere Benutzer sichtbar ist, was das, was wir schreiben, für diejenigen außerhalb unseres Entwicklungsteams geheim hält.
Wir dürfen nicht vergessen, dass wir uns nicht auf das beschränken müssen, was in der Mainstream, gibt es viele Optionen, die für den Entwicklungsstil jedes Einzelnen besser sein können, weshalb es wichtig ist, zu recherchieren und keine Angst davor zu haben, Neues auszuprobieren.
Damit haben wir dieses Tutorial abgeschlossen, wir hatten eine kleine, aber sehr bereichernde Einführung in die Verwendung von Vorlagen und wie man eine neue Engine in äußern.
ja ok Lenker ist viel umfangreicher, aber mit diesen Schlüsselkonzepten und unserer Anwendung äußern Wir werden in kurzer Zeit sehr interessante Dinge erreichen können.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben