Beste Praxen beim Arbeiten mit JavaScript-Vorlagen

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Vielleicht brauchen Sie sie nicht für einfache Web-Apps, aber es dauert nicht allzu komplex, bis JavaScript-Vorlagen eine gute Entscheidung sind. Wie bei jedem anderen Werkzeug oder jeder anderen Technik gibt es einige bewährte Methoden, die Sie bei der Verwendung von Vorlagen berücksichtigen sollten. Wir werden uns in diesem Tutorial eine Handvoll dieser Praktiken ansehen.

1. Unterstreichen Sie für Einfach, Lenker für Komplex

Wenn Sie etwas mit etwas mehr Lebensfreude brauchen, kann ich Ihnen Lenker empfehlen?

Das Wichtigste zuerst: Wenn Sie nicht John Resig sind, möchten Sie höchstwahrscheinlich eine gut getestete Bibliothek auswählen, die Ihre Vorlagenfunktionalität bietet. Obwohl die Möglichkeiten nahezu unbegrenzt sind, gibt es je nach Komplexität Ihres Projekts zwei wirklich gute Optionen.

Wenn das Projekt relativ einfach ist, können Sie Underscore.js verwenden. Diese Bibliothek bietet größtenteils funktionale Programmierdienstprogramme, verfügt jedoch über eine _.template-Methode, die die Dinge nicht einfacher machen könnte. Standardmäßig werden die ERB-ähnlichen <%= %> Trennzeichen verwendet, die jedoch leicht geändert werden können. Das Schöne an dieser Lösung ist, dass in jedem Projekt, für das Vorlagen erforderlich sind, Underscore wahrscheinlich bereits geladen ist, einfach aufgrund seiner allgemeinen Nützlichkeit. Um mehr über Underscore zu erfahren, lesen Sie das umfassende Tutorial von Siddharth hier auf Nettuts+.

Wenn Sie etwas mit etwas mehr Lebensfreude brauchen, kann ich Ihnen Lenker empfehlen? Mit vielen nützlichen Blockausdrücken (wie #each für Schleifen und #if für Bedingungen) und der Möglichkeit, Ihre eigenen Hilfsfunktionen zu registrieren, bietet der Lenker alles, was Sie zum Erstellen selbst komplexester Vorlagen benötigen.

Wenn Sie mit Lenkern nicht vertraut sind, werden Sie von Gabriel Manricks in diesem Tutorial behandelt.

Natürlich gibt es auch andere Vorlagenbibliotheken. Fühlen Sie sich frei, sie auszuprobieren! Ich empfehle diese beiden nur, weil ich sie selbst genieße und benutze. Sie sind in der Regel auch die beliebtesten Angebote in der Gemeinschaft.

Lenker ist eine hervorragende JavaScript-Vorlagen-Engine.

2. Erstellen Sie Vorlagenhilfefunktionen

Die meisten Vorlagenbibliotheken machen das Datenobjekt, das Sie an die Vorlagenfunktion übergeben, zum Kontext.

Es wird Zeiten geben, in denen die Daten, die Sie in eine Vorlage einfügen, nicht ganz so formatiert werden, wie Sie es bevorzugen. In diesen Situationen müssen Sie benutzerdefinierte Funktionen erstellen, um sie zu formatieren. Wenn Sie so etwas wie Lenker verwenden, können Sie einfach eine Hilfsfunktion registrieren. Andere Lösungen wie Underscore bieten diese Funktionalität jedoch nicht. Sie müssen Ihre eigenen rollen.

Der Grund, warum das nicht so einfach ist, wie es sich anhört, liegt darin, dass die meisten Vorlagenbibliotheken das Datenobjekt, das Sie an die Vorlagenfunktion übergeben, zum Kontext oder zum Wert this machen. Daher muss die Funktion Teil dieses Objekts sein. Es gibt verschiedene Möglichkeiten, dies zu tun. Die primäre Möglichkeit besteht darin, die Funktion dem Datenobjekt hinzuzufügen, bevor sie an die Vorlagenfunktion übergeben wird. Hier ist ein Beispiel:

// assume data object and template function

data.formatPrice = function (priceInCents) {
    return "$" + (priceInCents / 100).toFixed(2);
}

var html = template(data);

Das ist ideal für einmalige Situationen, aber es ist möglich, dass Sie mehrere Vorlagen haben, von denen jede ihre eigenen Hilfsfunktionen benötigt. In diesen Fällen möchte ich die Vorlagenfunktion in eine andere Funktion einbinden, die die Helfer auf das data-Objekt anwendet.

var productTemplate = function (data) {
    var template = _.template("the template string");
    data.helperFunction1 = function () { return "whatever" };
    return template(data);
};

Es gibt verschiedene Möglichkeiten, dies zu verbessern (Sie können mit dem Zwischenspeichern der "rohen" Vorlagenfunktion außerhalb dieser Funktion beginnen, wahrscheinlich über einen Abschluss), aber das ist die Grundidee. Jetzt können Sie Ihre Daten einfach an diese productTemplate übergeben und auf Ihre Hilfsfunktionen zugreifen.

3. Speichern Sie Vorlagen in ihrer eigenen Datei

Es gibt mehrere alternative Lösungen, die möglicherweise besser sind, insbesondere in komplexeren Szenarien.

Alle JavaScript-Vorlagen beginnen offensichtlich als Text. Der beliebteste (und natürlichste) Ort zum Speichern ist Ihr HTML-Dokument - normalerweise in einem script-Tag mit einem alternativen type-Attribut, damit der Browser nicht versucht, sie auszuführen. Es ist ziemlich einfach, das innerHTML-Attribut des script-Tags abzurufen und an die Funktion zum Erstellen von Vorlagen zu übergeben, wenn Sie bereit sind.

Das ist jedoch nicht der einzige Weg, das zu tun. In der Tat ist dies möglicherweise nicht der optimale Weg. Es gibt mehrere alternative Lösungen, die möglicherweise besser sind, insbesondere in komplexeren Szenarien.

Die erste Alternative besteht darin, sie alle in einer JavaScript-Datei zu speichern. Dies bedeutet natürlich, dass Ihre Vorlagen als Zeichenfolgen anstelle des besser lesbaren eingerückten HTML-Codes gespeichert werden, aber bleiben Sie eine Sekunde bei mir! Erstens müssen Sie für Vorlagen, die länger als eine einzelne Zeile sind (die meisten Vorlagen), keine unhandliche Umbruchzeichenfolge verwenden. Versuchen Sie stattdessen Folgendes:

1	Templates = {};
2
3	Templates.contactEntry = [
4	"<h1> {{fullName}} </h1>",
5	"<ul>",
6	"<li> Email: {{email}} </li>",
7	"<li> Phone: {{tel}} </li>",
8	"</ul>"
9	].join("\n");

Das Speichern einer Vorlage in einem Array wie diesem erleichtert die Handhabung erheblich. Mit dieser Syntax können Sie ganz einfach alle Ihre Vorlagen in einer eigenen JavaScript-Datei speichern und diese Datei auf die Seite laden, bevor Sie die Vorlagen benötigen. Und natürlich müssen Sie nicht alle in einem einzigen Template-Objekt aufbewahren, aber es organisiert die Dinge. Dieses Templates-Objekt kann sogar eine Eigenschaft Ihres globalen Anwendungsobjekts sein (wie in MyApp.Templates).

Aber warte, es gibt noch mehr (um einen Satz zu prägen). Sie können alle Ihre Vorlagen in einer einzigen Schleife in ihre jeweiligen Vorlagenfunktionen konvertieren:

for (var tmpl in Templates) {
    if (Templates.hasOwnProperty(tmpl) {
        Templates[t] = _.template(Templates[t]); // Underscore example
    }
}

Wenn Sie AMD in Ihrer Anwendung verwenden, funktioniert diese Methode weiterhin. Fügen Sie dies einfach in ein Vorlagenmodul ein, das das Templates-Objekt zurückgibt. Viele AMD-Lösungen verfügen jedoch über ein Text-Plugin, mit dem Sie Nur-Text-Dateien laden können. Anstelle des normalen Modulobjekts erhalten Sie im Gegenzug eine Zeichenfolge. Wenn Sie die RequireJS-Bibliothek verwenden, müssen Sie das Plugin text.js in dasselbe Verzeichnis wie die Datei require.js aufnehmen. Dann können Sie Folgendes tun:

1	require(["text!templates/document.html"], function (documentTemplate) {
2
3	});

Dieser documentTemplate-Parameter ist eine Zeichenfolge, die den Inhalt dieser Datei templates/document.html enthält. Auf diese Weise können Sie nicht mehrere Vorlagen in eine Datei einfügen, es sei denn, Sie möchten diese Zeichenfolge bearbeiten.

4. Kompilieren Sie Ihre Vorlagen vor

Wenn Sie die Asset-Pipeline in einer Rails-App verwenden, nutzen Sie Sprockets, um Vorlagenfunktionen vorkompilieren zu können.

Wenn Sie eine Sekunde darüber nachdenken, erledigt der Browser jedes Mal, wenn Sie eine Vorlage erstellen, zusätzliche Arbeit. Normalerweise beginnt diese Vorlage als Zeichenfolge, die Sie an eine Funktion zum Erstellen von Vorlagen übergeben. Diese Funktion gibt eine weitere Funktion zurück, an die Sie die Daten übergeben und von der Sie HTML empfangen können. Die zusätzliche Arbeit ist der Teil "Erstellen der Vorlagenfunktion"; Es gibt keinen Grund, warum dies nicht möglich ist, bevor das JavaScript an den Client gesendet wird. Sie können diese Arbeit vorzugsweise Ihrem Erstellungsprozess hinzufügen, Ihr CSS minimieren und Ihr JS verketten.

Leider ist das Vorkompilieren von JavaScript-Vorlagen nicht ganz so einfach wie das Minimieren oder Verketten ... zumindest noch nicht, wahrscheinlich aufgrund der vielen Möglichkeiten, Vorlagen zu erstellen. Wenn Sie Grunt oder Yeoman verwenden, können Sie Plugins (wie dieses) auf der Grunt-Website nachschlagen. Wenn Sie die Asset-Pipeline in einer Rails-App verwenden, können Sie Sprockets nutzen, um Ihre Vorlagenfunktionen vorkompiliert zu haben.

Oh, und wenn Sie abenteuerlustig sind (und ein Tuts + Premium-Abonnent sind), können Sie sich mir anschließen, wenn ich Vorlagen in meinem Kurs für erweiterte Backbone-Muster und -Techniken von Grund auf neu kompiliere.

5. Keine Auswertung in Vorlagen

Keine Auswertung in Vorlagen.

Vor nicht allzu langer Zeit bin ich bei der Recherche für ein anderes Projekt auf eine interessante Idee zu JavaScript-Vorlagen in dem hervorragenden Buch Recipes with Backbone gestoßen. Es ist seitdem eine bewährte Methode in der Community: Keine Bewertung in Vorlagen. Natürlich ist das Interpolieren von Variablen streng genommen eine Auswertung, aber ich beziehe mich hier eher auf Logikcode. Sie können beliebiges JavaScript in die Begrenzungs-Tags einfügen, es kann jedoch leicht außer Kontrolle geraten. Wir alle wissen, dass es als bewährte Methode angesehen wird, HTML, CSS und JavaScript getrennt zu halten. Das erleichtert es, den Code zu verfolgen und bei Bedarf Fehler zu erkennen. Gleiches gilt für Vorlagen: Sie sollten nur ein Ort zum Interpolieren von Werten sein. Jede Logik- oder Datentransformation sollte außerhalb der Vorlage durchgeführt werden.

Wie weit Sie mit dieser Idee gehen, liegt natürlich bei Ihnen. Sie können entscheiden, dass das Schleifen in Ihren Vorlagen in Ordnung ist. Möglicherweise haben Sie eine Vorlage wie diese:

1	<h1> My List </h1>
2	<ul id="myList">
3	<% list.forEach(function (item) { %>
4	<li> <%= item.name %> </li>
5	<% }); %>
6	</ul>

Sie können sich auch dafür entscheiden, eine Schleife außerhalb Ihrer Vorlagen zu erstellen, indem Sie eine Wrapper-Vorlage erstellen und dann Elemente durchlaufen, eine Untervorlage rendern und sie in die Wrapper-Vorlage einfügen. Möglicherweise erhalten Sie zwei Vorlagen wie die folgende:

Die Wrapper-Vorlage:

1	<h1> My List </h1>
2	<ul id="myList">
3	</ul>

Die Untervorlage:

1	<li> <%= name %> </li>

Natürlich sorgt diese getrennte Methode für etwas mehr Code, aber auf lange Sicht lohnt sich der Aufwand.

In diesem Sinne empfiehlt es sich, den Anweisungen des von Ihnen verwendeten Frameworks oder der Bibliothek zu folgen. Ich habe beispielsweise festgestellt, dass es bei Verwendung von Backbone mit Unterstrichvorlagen einfacher ist, externe Schleifen und Untervorlagen zu verwenden: Die minimale Vorlagenfunktionalität von Underscore bietet keine Schleifensyntax, und die render-Methode von Backbone ist ein großartiger Ort, um das zu tun das Schleifen und Einfügen der Untervorlagen. Bei Verwendung von Meteor, das Lenkervorlagen enthält, ist es jedoch viel einfacher, die Vorlagen mit einem #each-Block zu durchlaufen. (und verwenden Sie auch Untervorlagen, wenn Sie möchten).

6. Binden Sie Daten an die Vorlagen

Erfahren Sie mehr über Backbone.stickit bei Tuts+ Premium.

Das ist nicht immer der Fall, aber in einigen Fällen kann es sehr hilfreich sein, Ihre Vorlagen automatisch zu aktualisieren, wenn sich die angezeigten Daten ändern. Diese Idee gefällt mir sehr gut, da dadurch sogar die Benutzeroberfläche Ihrer Anwendung vollständig datengesteuert werden kann: Wenn ein Modellattribut aktualisiert wird, wird die Benutzeroberfläche damit aktualisiert. Das ist das Grundprinzip von Werkzeugen wie Knockout.

Während Sie diese Funktionalität wahrscheinlich ohne allzu große Probleme selbst ausführen können, ist sie in allen gängigen Frameworks integriert. In Backbone enthält die initialize-Funktion einer Vorlage möglicherweise einige benutzerdefinierte Ereignis-Listener, z.B.

1	this.model.on('change', this.render, this);

Auf diese Weise wird bei jeder Änderung eines Modellattributs die render-Funktion der Vorlage aufgerufen und die Vorlage erneut gerendert. Alternativ können Sie ein Plugin wie backbone.stickit verwenden, das die Bindungen für Sie verwaltet. Wenn Sie mit Meteor arbeiten und eine seiner reaktiven Datenquellen verwenden, erhalten Sie diese Bindung kostenlos - ohne zusätzliche Arbeit. Ich bin mit keinem anderen Framework vertraut genug, um genau zu wissen, wie es funktioniert, aber jedes Framework, das es wert ist, verwendet zu werden, sollte eine ähnliche Funktion haben.

7. Vereinfachen Sie Ihre Vorlagen

Sehr schnell können Ihre Vorlagen außer Kontrolle geraten und unhandlich werden.

Wenn Sie nicht sehr schnell vorsichtig sind, können Ihre Vorlagen außer Kontrolle geraten und unhandlich werden. Aus diesem Grund ist es immer eine gute Idee, Ihre Vorlagen auf eine angemessene Größe zu beschränken. Wenn Sie sie zu groß machen, sind sie schwieriger zu aktualisieren und ermöglichen keine gute Trennung des Codes. Wenn sie jedoch zu klein sind, kosten sie zu viel für das, was sie bringen, und verlangsamen anschließend Ihre App.

Deshalb ist es wichtig, ein glückliches Medium zu finden. Gehen Sie mit Ihren Vorlagen genauso um, wie Sie Ihren JavaScript- oder CSS-Code schreiben: Machen Sie ihn modular. Ja, jeder UI oder jedes Widget sollte eine eigene Vorlage haben, aber vergessen Sie nicht die Untervorlagen. Sie sind nützlich, wenn kleinere Einheiten eines Widgets komplexe Layouts oder Zustände haben oder wenn sie mehrere Ereignisse haben, aber denken Sie daran, dass sie ein zweischneidiges Schwert sein können. Verwenden Sie sie nur, wenn Sie einen guten Grund dafür haben.

8. Verwenden Sie sie nicht, wenn Sie sie nicht brauchen

Denken Sie schließlich daran, dass JavaScript-Vorlagen nur ein weiteres Werkzeug in Ihrer Box sind. und manchmal ist es einfach nicht das richtige für den Job. Verwenden Sie keine Vorlagen, bei denen Sie sie nicht benötigen. Verwenden Sie Ihren Kopf: Es kann andere Situationen geben, in denen eine Vorlage nicht das beste Werkzeug ist.

Schlussfolgerung

Wir werden, das sind meine besten Tipps für die Verwendung von JavaScript-Vorlagen, aber vielleicht können Sie sich noch ein paar mehr vorstellen! Wenn ja, teilen Sie sie bitte in den Kommentaren unten mit, damit wir die Diskussion fortsetzen können.