Die Top 5 JavaScript-Template-Engines
Wenn Sie eine JavaScript-Anwendung erstellen, werden Sie mit ziemlicher Sicherheit einige JavaScript-Vorlagen verwenden. Anstatt eine Bibliothek wie jQuery (oder Vanille-JavaScript) zu verwenden, um Ihren HTML-Code zu aktualisieren, wenn Werte aktualisiert werden, können Sie Vorlagen verwenden, die Ihren Code erheblich bereinigen. In diesem Artikel werden einige beliebte Vorlagenbibliotheken vorgestellt.
01. Schnurrbart
Schnurrbart wird oft als Basis für JavaScript-Vorlagen angesehen. Eine andere beliebte Lösung, Lenker, baut tatsächlich auf Moustache auf, aber das bedeutet nicht, dass es keine sehr gute Vorlagenlösung ist. Hier ist ein Beispiel:
Moustache.render ('Hallo, {{Name}}', {Name: 'Jack'});
// kehrt zurück: Hallo Jack
Sobald Moustache auf Ihrer Seite enthalten ist, haben Sie Zugriff auf das globale 'Moustache'-Objekt. Die Hauptmethode, die Sie verwenden, ist 'Rendern', das zwei Argumente akzeptiert. Die erste ist die eigentliche Vorlage, und die zweite sind alle Argumente, die an sie übergeben werden müssen.
Im obigen Beispiel sehen Sie, dass ich auf '{{name}}' verwiesen habe. Zwei Klammern um etwas ist die Moustache-Syntax, um zu zeigen, dass es sich um einen Platzhalter handelt. Wenn Moustache es kompiliert, sucht es in dem Objekt, das wir übergeben, nach der Eigenschaft 'name' und ersetzt '{{name}}' durch den Wert, in diesem Fall 'Jack'.
Hier habe ich die Vorlage als Zeichenfolge übergeben, aber wenn Sie eine komplexere Vorlage hatten, möchten Sie dies möglicherweise nicht auf diese Weise tun. Stattdessen besteht eine gängige Lösung darin, eine Vorlage in Skript-Tags zu platzieren:
Hallo, {{name}}
Wir können dann auf den Inhalt dieses Skript-Tags zugreifen. Mit jQuery ist es beispielsweise so einfach wie:
var temp = $ ('# template'). html ();
Moustache.render (temp {name: 'Jack'});
// kehrt zurück:
Hallo jack
Wenn Sie dem 'script'-Tag ein' type'-Attribut von etwas geben, das der Browser nicht versteht, wird der Inhalt ignoriert, sodass er nicht versucht, ihn als JavaScript auszuführen.
Sie können auch Schleifen in Ihren Vorlagen verwenden. Nehmen Sie diese Vorlage:
{{#Menschen}}
{{Name}}
{{/Menschen}}
Mit diesen Daten übergeben:
{people: [{name: 'Jack'}, {name: 'Fred'}]}
Sie erhalten die Zeichenfolge 'JackFred' zurückgegeben.
Moustache kann viel mehr als hier beschrieben. Überprüfen Sie also den Github Liesmich für mehr.
02. Vorlagen unterstreichen
Underscore ist eine Utlity Belt Library für JavaScript, die alle möglichen nützlichen Methoden bietet. Es bietet auch einfache Vorlagen, die wir verwenden können. Es verwendet eine etwas andere Syntax als Moustache. Hier ist ein einfaches Beispiel:
_.template ('Hallo', {Name: 'Jack'});
// kehrt zurück: Hallo Jack
Wenn Sie jemals Embedded Ruby (oder kurz ERB) verwendet haben, sind Sie möglicherweise mit dieser Syntax besser vertraut. Das '' bedeutet, dass unabhängig vom Wert von 'name' anstelle von '' 'ausgegeben werden soll. Unterstrich kann auch Dinge wie Schleifen und Bedingungen ausführen, aber etwas anders als Moustache.
var template = ''
_.template (template, {people: ['Jack', 'Fred']});
In Unterstreichungsvorlagen können Sie beliebiges JavaScript in '' Tags einbetten. Beachten Sie, dass wir '' verwenden, um auf der Seite auszugeben, und ``, um JavaScript zu enthalten. Dies bedeutet, dass jede Form von Schleife oder Bedingung, die Sie in JS ausführen können, in Unterstrich verwendet werden kann.
Sie können mehr über Underscore und seine Funktionen erfahren Hier .
03. Eingebettete JS-Vorlagen
Embedded JS (EJS) ist von ERB-Vorlagen inspiriert und verhält sich ähnlich. Es verwendet dieselben Tags wie ERB (und in der Tat Underscore) und verfügt über viele der gleichen Funktionen. Es werden auch einige von Ruby on Rails inspirierte Helfer implementiert, auf die wir in Kürze eingehen werden.
EJS unterscheidet sich darin, dass erwartet wird, dass sich Ihre Vorlagen in einzelnen Dateien befinden, und Sie dann den Dateinamen an EJS übergeben. Es lädt die Datei ein und gibt Ihnen dann HTML zurück.
// in template.ejs
Hallo,
// in der JS-Datei
neues EJS ({url: 'template.ejs'}). render ({name: 'Jack'});
// kehrt zurück: Hallo Jack
Beachten Sie, dass Sie auch Textvorlagen laden können:
neues EJS ({Text: 'Hallo,'}). render ({Name: 'Jack'});
So würden wir einige Personen durchlaufen und auf ihre Profilseiten auf unserer Website verlinken:
// template.ejs
<% for(var i = 0; i
// in der JS-Datei
neues EJS ({url: 'template.ejs'}). render ({people: ['Jack', 'Fred']})
// Jeder gerendert
Das ist sehr ähnlich zu Underscore, aber beachten Sie die Verwendung von `link_to`. Das ist ein Helfer, den EJS definiert, um das Verknüpfen ein wenig zu vereinfachen. Es implementiert auch viele andere, die dokumentiert sind Hier . Um mehr über EJS zu erfahren, schlage ich das vor EJS-Homepage .
04. LenkerJS
Der Lenker ist eine der beliebtesten Vorlagen-Engines und baut auf Moustache auf. Alles, was in einer Moustache-Vorlage gültig war, ist in einer Lenker-Vorlage gültig, daher werde ich diese Grundlagen nicht noch einmal behandeln. Lenker fügen Schnurrbart viele Helfer hinzu. Eines davon ist 'with', was sich hervorragend für die Arbeit mit tiefen Objekten eignet:
// mit dieser Vorlage:
var source = '{{#with author}}Mit {{Vorname}} {{Nachname}}
{{/mit}}';
var template = Handlebars.compile (Quelle);
var html = template ({Autor: {Vorname: 'Jack', Nachname: 'Franklin'}});
// kehrt zurück:
Von Jack Franklin
Beachten Sie, dass der Lenker-Compiler etwas anders funktioniert. Zunächst übergeben Sie die Vorlage an 'Handlebars.compile', die dann eine Funktion zurückgibt. Sie können das aufrufen, indem Sie das Objekt mit den Daten übergeben und dann den HTML-Code zurückerhalten. Der Helfer '{{#with}}' nimmt ein Objekt und ermöglicht es Ihnen dann, auf Eigenschaften innerhalb dieses Objekts zu verweisen. Dies bedeutet, anstatt zu tun:
{{author.firstName}} {{author.lastName}}
Wir können tun:
{{#with author}} {{firstName}} {{lastName}} {{/ with}}
Das kann beim Tippen sparen, besonders wenn Sie viel tun.
Der Lenker bietet auch einen Helfer:
var source = '{{#each people}} {{name}} {{/ each}}';
var template = Handlebars.compile (Quelle);
var html = template ({people: [{name: 'Jack'}, {name: 'Fred'}]});
// gibt zurück: 'JackFred'
Persönlich bevorzuge ich Lenker und neige dazu, sie für alle meine clientseitigen Vorlagen zu verwenden. Es ist auch sehr einfach, Lenker mit Ihren eigenen Methoden zu erweitern - dies Dokumentation ist ein guter Anfang.
05. Jadeschablonen
Ich werde hier mit etwas anderem enden - mit serverseitigen Vorlagen Jade . Angesichts der Popularität von NodeJS und der Anzahl der Web-Apps, die derzeit darin erstellt werden, gibt es viele Vorlagenbibliotheken, die für die Verwendung auf dem Server entwickelt wurden. Jade-Vorlagen unterscheiden sich stark von den bisher betrachteten, da sie stark von Einrückungen und Leerzeichen abhängen. Hier ist ein einfaches Beispiel:
// template.jade
p
| Hallo,
= Name
// JS
jade.renderFile ('template.jade', {name: 'Jack'}, function (err, result) {
console.log (Ergebnis);
// logs: Hallo Jack
});
Jade ist ein bisschen nervig, aber man gewöhnt sich daran, ehrlich! Wir rücken die beiden Zeilen unter dem 'p' ein, um anzuzeigen, dass sie darin existieren. Das '|' wird verwendet, um Jade mitzuteilen, dass in dieser Zeile nur einfacher Text ausgegeben werden soll, und das '=' weist Jade an, nach einer Variablen mit dem Namen 'name' zu suchen.
Wir können auch in Jade Loops machen:
jede Person in Menschen
li = Person
Wird mit einer Reihe von Namen aufgerufen: '{people: [' Jack ',' Fred ']}', wird Folgendes ausgegeben:
Jade kann noch viel mehr - im Gegensatz zu den anderen Template-Engines, die wir uns angesehen haben, besteht die Idee bei Jade darin, dass Sie den gesamten HTML-Code darin schreiben. Es kann Dinge wie Ausgabe-Skript-Tags tun:
script (type = 'text / javascript', src = 'myfile.js')
Ein guter Anfang ist die Jade Beispiele . Sie können sie herunterladen und mit Node ausführen, um die Ausgabe und die Funktionsweise von Jade zu sehen.
Damit ist unser Blick auf fünf der beliebtesten Templating-Motoren abgeschlossen. Es gibt noch viel mehr da draußen, aber hoffentlich sollte dies Ihnen einen guten Ausgangspunkt geben, um den zu finden, der am besten zu Ihnen passt.
Jack Franklin ist ein 20-jähriger Entwickler, der in London, Großbritannien, lebt. Er betreibt einen JavaScript-Blog unter javascriptplayground.com und schreibt auch PHP, Ruby und andere Sprachen. Er twittert als @ Jack_Franklin .
Lesen Sie auch:
- Inspirierende Beispiele für CSS
- Top Beispiele von JavaScript
- Die Top 20 jQuery-Plugins
- CSS- und JavaScript-Tutorials um deine Fähigkeiten zu stärken
