Ein Überblick über JavaScript -Templating -Motoren

Dieser Artikel wurde von Chris Perry und Ritesh Kumar überprüft. Vielen Dank an alle Peer -Rezensenten von SitePoint, die SitePoint -Inhalte so gut wie möglich gemacht haben!

In diesem Artikel geben wir einen Überblick über die Vorlagen in JavaScript. Wir werden zunächst diskutieren, was JavaScript -Vorlagen sind, wann wir sie verwenden sollten und wie wir sie implementieren, bevor wir sie in Bezug auf einige der beliebten Vorlagen -Motoren auf ein wenig detaillierter eingehen. Wir konzentrieren uns auf Schnurrbart, Lenker und JQuery -Vorlage.

Key Takeaways

• JavaScript -Vorlagen bieten eine Methode zur Trennung von HTML -Struktur von Inhalten und Verbesserung der Wartbarkeit der Codebasis. Sie sind besonders vorteilhaft für Echtzeit-Web-Apps und Internationalisierung, für die häufig unterschiedliche Inhalte mit demselben Format angezeigt werden müssen.
• mustache.js ist ein multisprachiges, logikfreies Templating-System, das ideal für kleine Projekte und schnelle Prototypen ist. Es ist einfach, hat keine Abhängigkeiten und erfordert keine vorkompilierten Vorlagen. Darüber hinaus können Projekte später problemlos auf Lenker aufrüsten, da die Vorlagen meist identisch sind.
• Lenker, die auf dem Schnurrbart basieren, unterstützt Blockausdrücke und vorkompilierte Vorlagen und verbessert die Leistung erheblich. Es ist für Projekte geeignet, bei denen die Leistung von entscheidender Bedeutung ist und das Hinzufügen von 18 KB zum Seitengewicht kein Problem ist. Um die Leistungsvorteile und die reduzierte Dateigröße zu sehen, müssen vorkompilierte Vorlagen verwendet werden.
• jQuery -Vorlage, obwohl nicht so beliebt wie Schnurrbart.js oder Lenker, sollte nicht übersehen werden. Es ist JQuery erforderlich und verwendet Datenattribute, um anzugeben, wo Daten in das HTML -Fragment eingefügt werden sollten. Es ist ideal für Projekte, einschließlich JQuery aufgrund seiner geringen Dateigröße. Es wird jedoch nicht für Projekte empfohlen, bei denen JQuery unter Berücksichtigung der Gesamtdateigröße nicht verwendet wird.

Was sind JavaScript -Vorlagen?

JavaScript -Vorlagen sind eine Methode zur Trennung von HTML -Struktur von dem darin enthaltenen Inhalt. Vorlagensysteme führen im Allgemeinen eine neue Syntax ein, sind jedoch normalerweise sehr einfach zu arbeiten, insbesondere wenn wir zuvor Templating -Systeme an anderer Stelle verwendet haben (z. B. Twig in PHP). Ein unterhaltsamer Punkt ist zu beachten, dass der Token -Ersatz normalerweise durch doppelte lockige Klammern ({{...}}) symbolisiert wird.

Wann sollten wir JavaScript -Vorlagen verwenden?

Sobald wir HTML in JavaScript -Zeichenfolgen einschließen, sollten wir überlegen, welche Vorteile JavaScript -Vorlagen uns geben könnten. Die Trennung von Bedenken ist beim Aufbau einer wartbaren Codebasis von größter Bedeutung. Alles, was uns helfen kann, dies zu erreichen, sollte untersucht werden. In der Front-End-Webentwicklung wird dies bei der Trennung von HTML von JavaScript verkörpert (dies funktioniert in beide Richtungen, da wir JavaScript-Inline nicht in HTML einbeziehen sollten).

Einige gemeinsame Szenarien, die von JavaScript-Vorlagen profitieren könnten, sind Echtzeit-Web-Apps (z. B. eine Live-Streaming-App für Ereigniskommentar) oder Internationalisierung (I18N), für die häufig unterschiedliche Inhalte mit derselben Formatierung angezeigt werden .

Wie implementieren wir JavaScript -Vorlagen?

Wir werden uns mit bestimmten Bibliotheksbeispielen ausführlicher eingehen, aber im Wesentlichen ist es so einfach, wie unsere ausgewählte Bibliothek einbezogen, unsere Vorlage abrufen und neben einigen Daten rendern.

Die meisten Bibliotheken unterstützen sowohl Inline- als auch externe Vorlagen. Inline -Vorlagen eignen sich hervorragend, wenn wir nur sehr wenige Vorlagen haben, oder wir wissen, dass wir die enthaltenen Vorlagen auf jeder Seitenladung verwenden, aber im Allgemeinen sollten unsere Vorlagen extern sein. Externe Vorlagen bringen viele Vorteile mit, hauptsächlich, dass Vorlagen niemals an den Kunden heruntergeladen werden, es sei denn, sie werden von der Seite benötigt.

mustache.js

Schnurrbart ist ein multisprachiges, logikfreies Vorlagensystem. Die Implementierung von Schnurrbartschache.js ist nur eine von vielen. Sobald wir uns an die (sehr einfache) Syntax gewöhnt haben, können wir sie in einer Vielzahl von Programmiersprachen verwenden.

Schlüsselpunkte

• 9 KB Dateigröße (klein)
• Einfach
• Keine Abhängigkeiten
• Keine Logik
• keine vorkompilierten Vorlagen
• Programmiersprache Agnostische

Beispiel

<span><span><span><script</span> id<span>="template"</span> type<span>="x-tmpl-mustache"</span>></span><span>
</span></span><span><span>  <span><p>Use the <strong>{{power}}</strong>, {{name}}!</p>
</span></span></span><span><span></span><span><span></script</span>></span>
</span>

//Grab the inline template
var template = document.getElementById('template').innerHTML;

//Parse it (optional, only necessary if template is to be used again)
Mustache.parse(template);

//Render the data into the template
var rendered = Mustache.render(template, {name: "Luke", power: "force"});

//Overwrite the contents of #target with the rendered HTML
document.getElementById('target').innerHTML = rendered;

Siehe den Stift -Schnurrbart.js Beispiel von SitePoint (@sinepoint) auf CodePen.

Wie Sie in diesem Beispiel sehen können, nimmt die Funktion "Schnurrbart". In diesem Fall ersetzen wir den Namen und eine Leistungsvariablen durch einfache Saiten, aber es ist möglich, viel mehr zu tun. Zum Beispiel über ein Array oder nutzen Sie eine spezielle Rendering -Funktion, die die aktuelle Ansicht als Ansichtsargument verwendet.

Schnurrbart.js eignet sich perfekt für kleine Projekte und schnelle Prototypen, bei denen die Komplexität der Vorlagen minimal ist. Eine wichtige Sache zu beachten ist, dass wir ein Projekt mit mustache.js starten und später einfach auf den Lenker auf upgraden können, da die Vorlagen (meistens) gleich sind.

Wenn Sie mehr über Schnurrbart lesen möchten, lesen Sie: Erstellen von HTML -Vorlagen mit Schnurrbart.js.

landesbars.js

lenkers.js ist auf dem Schnurrbart aufgebaut und ist meistens mit Schnurrbartvorlagen kompatibel. Kurz gesagt, es liefert alles Schnurrbart.js und unterstützt Blockausdrücke und vorkompilierte Vorlagen. Vorkompilierte Vorlagen sind eine große Sache, da sie die Leistung um einen großen Spielraum erhöhen (in einem groben Leistungstest, vorkompilierte Lenker. Mit Blockausdrücken können Sie mehr Logik in Ihre Vorlagen einbeziehen. Eines der häufigsten Beispiele dafür sind fortgeschrittene Iteratoren - z. Erstellen Sie einen

Listen -Iterator, der jedes Element in
• einbindet. Sie können hier mehr über Blockausdrücke lesen.

  Schlüsselpunkte

  • 86 KB Dateigröße (groß) oder 18 KB bei Verwendung vorkompilierter Vorlagen
  • Ausdrücke (Helfer)
  • vorkompilierte Vorlagen
  • Keine Abhängigkeiten

  Beispiel

  <span><span><span><script</span> id<span>="template"</span> type<span>="x-tmpl-mustache"</span>></span><span>
  </span></span><span><span>  <span><p>Use the <strong>{{power}}</strong>, {{name}}!</p>
  </span></span></span><span><span></span><span><span></script</span>></span>
  </span>

  //Grab the inline template
  var template = document.getElementById('template').innerHTML;
  
  //Parse it (optional, only necessary if template is to be used again)
  Mustache.parse(template);
  
  //Render the data into the template
  var rendered = Mustache.render(template, {name: "Luke", power: "force"});
  
  //Overwrite the contents of #target with the rendered HTML
  document.getElementById('target').innerHTML = rendered;
  

  Siehe Beispiel für Stiftladungen.

  ledBars.js eignet sich perfekt für Projekte, bei denen die Leistung wichtig ist, und wir sind nicht sehr besorgt darüber, 18 KB zum Gewicht der Seite hinzuzufügen. Es ist auch der richtige Weg, wenn wir Blockausdrücke verwenden möchten.
  Beachten Sie, dass wir, um die Leistungsvorteile von Lenker (und die stark reduzierte Dateigröße) zu erkennen, vorkompilierte Vorlagen verwenden müssen. Um dies effizient zu tun, sollten wir unseren Build-Prozess Lenker-Js-Vorlagenkompilierung hinzufügen (GrunT hat dafür ein großartiges Plug-In).
  Wenn Sie mehr über Lenker erfahren möchten, schauen Sie sich an: eine Anfängerhandbuch für Lenker.
  jQuery Template
  jQuery -Vorlage ist nicht so beliebt wie Schnurrbart.js oder Lenker.js, aber wir sollten sie nicht übersehen. Die Vorlagen unterscheiden sich von Schnurrbartvorlagen, da sie einfach nur HTML ohne neue Syntax sind. Anstelle von Token -Ersatztechniken verwendet es Datenattribute, um anzugeben, wo Daten in das HTML -Fragment eingefügt werden sollten.
  Schlüsselpunkte
  7 KB Dateigröße (klein)
  erfordert jQuery (82 kb)
  Einfach, aber anders als Schnurrbart und Lenker. Js
  keine vorkompilierten Vorlagen
  Beispiel

  <span><span><span><script</span> id<span>="template"</span> type<span>="text/x-handlebars-template"</span>></span><span>
  </span></span><span><span>  <span><p>Use the <strong>{{power}}</strong>, {{name}}!</p>
  </span></span></span><span><span></span><span><span></script</span>></span></span>

  //Grab the inline template
  var template = document.getElementById('template').innerHTML;
  
  //Compile the template
  var compiled_template = Handlebars.compile(template);
  
  //Render the data into the template
  var rendered = compiled_template({name: "Luke", power: "force"});
  
  //Overwrite the contents of #target with the renderer HTML
  document.getElementById('target').innerHTML = rendered;
  

  siehe Beispiel für die Pen -JQuery -Vorlage von SitePoint (@sinepoint) auf CodePen.
  JQuery -Vorlage ist ideal für Projekte, die bereits JQuery enthalten, da die Dateigröße sehr klein ist. Wenn Ihr Projekt jedoch nicht JQuery verwenden wird, ist es schwierig, die Gesamtdateigröße zu berücksichtigen.
  Andere Optionen
  Es gibt natürlich viele andere Lösungen für dieses Problem, die wir in diesem Artikel nicht ausführlich behandeln. Hier ist ein sehr schneller Überblick über einige andere beliebte Entscheidungen;

  unterstrich.js

  Unterstrich ist eine beliebte JavaScript -Bibliothek, die Vorlagenfunktionen unter einer Vielzahl anderer Merkmale bietet. Standardmäßig verwendet es nicht die von der Schnurrbart verwendete Double Curly Bracket-Syntax, sondern entscheidet sich für Grenzwerte im Erb-Stil ().

  eingebettete JS -Vorlagen (EJS)

  Wie unterstrich.js verwendet eingebettete JS-Vorlagen die Syntax im Erb-Stil für Vorlagen. Eine Sache, die bei EJs zu beachten ist, ist, dass Vorlagen externe Dateien sein müssen - sie können nicht inline sein.

  Bemerkungen schließen

  Also welches ist das Beste? Wie bei den meisten Entwicklungsproblemen gibt es keine Silberkugel. Es hängt von vielen Dingen ab;

  • Verwenden Sie bereits JQuery in Ihrem Projekt?
  • mit welchen Vorlagensystemen haben Sie frühere Erfahrung?
  • Möchten Sie die Logik aus den Vorlagen fernhalten?
  • Wie besorgt sind Sie um die Gesamtdateigröße des Gesamts?
  • Wie besorgt sind Sie um Leistung/Muss Ihre Website Geräte mit geringer Leistung unterstützen?

  Sobald wir über die Faktoren nachgedacht haben, können wir aus der obigen Liste eine fundierte Wahl treffen. Wie bereits kurz erwähnt, wäre eine gute flexible Strategie, zuerst Schnurrbart.js zu implementieren und dann später in Lenker zu tauschen, wenn die zusätzlichen Funktionen oder Leistungsvorteile erforderlich sind.

  Willst du einging? Bitte hinterlassen Sie unten einen Kommentar!

  häufig gestellte Fragen zu JavaScript -Templating -Motoren

  Was sind die wichtigsten Unterschiede zwischen JavaScript -Templating -Motoren? Zum Beispiel ist EJS für seine Einfachheit und Benutzerfreundlichkeit bekannt, während Lenker.js logiklose Vorlagen bietet. Mustache.js ist eine weitere beliebte Wahl aufgrund seiner Verzugskompatibilität. Es ist wichtig, eine Templating -Engine auszuwählen, die zu Ihren Projektanforderungen und Ihrem Codierungsstil entspricht. So erstellen Sie dynamische Webseiten. Sie ermöglichen es den Entwicklern, die HTML -Struktur von den Daten zu trennen, was zu saubereren und kartierbaren Code führt. Templating -Motoren unterstützen auch wiederverwendbare Komponenten, die die Entwicklungszeit erheblich verkürzen können. Projekt, es wird im Allgemeinen nicht empfohlen. Die Verwendung mehrerer Motoren kann zu Code -Inkonsistenz und einer erhöhten Komplexität führen. Wählen Sie am besten einen Vorlagenmotor aus, der Ihren Anforderungen entspricht und während des gesamten Projekts dabei bleibt.

  Wie funktioniert eine JavaScript -Templating -Engine mit Express.js? Sobald Sie einen Vorlagenmotor ausgewählt haben, können Sie ihn als Standardmotor in Express.js einstellen. Auf diese Weise können Sie Ansichten mithilfe Ihrer gewählten Engine rendern und den Prozess der Erzeugung dynamischer html vereinfachen. Feature in JavaScript, die eine einfachere String-Interpolation und Multi-Line-Zeichenfolgen ermöglicht. Während sie zur Erzeugung von HTML verwendet werden können, fehlen ihnen viele der Merkmale, die von Templating -Motoren bereitgestellt werden, z. B. Unterstützung für wiederverwendbare Komponenten und die Trennung von Bedenken. Sie können jedoch für einfache Anwendungsfälle nützlich sein, in denen eine vollwertige Vorlagen-Engine nicht erforderlich ist. Die Engine hängt von Ihren Projektanforderungen und persönlichen Vorlieben ab. Betrachten Sie Faktoren wie die Komplexität Ihres Projekts, die Lernkurve des Motors und die von ihm angebotenen Merkmale. Es ist auch eine gute Idee, die Community und die Unterstützung in der Engine zu betrachten. . Einige Motoren sind schneller beim Zusammenstellen von Vorlagen, während andere sich beim Rendern auszeichnen. Für die meisten Webanwendungen ist es jedoch unwahrscheinlich, dass diese Unterschiede auf die Leistung spürbar beeinflussen. Obwohl es im Allgemeinen nicht empfohlen wird, es sei denn, Sie haben spezifische Anforderungen, die nicht von bestehenden Motoren erfüllt werden. Erstellen einer Vorlagen-Engine erfordert ein tiefes Verständnis von JavaScript und kann zeitaufwändig sein. wie Fehler häufig zur Laufzeit auftreten. Die meisten Motoren bieten jedoch hilfreiche Fehlermeldungen, die Sie zur Quelle des Problems führen können. Es ist auch eine gute Idee, einen Linter zu verwenden, um Syntaxfehler zu fangen. in anderen Kontexten verwendet werden. Beispielsweise können sie verwendet werden, um E-Mails, PDFs oder andere Art von textbasierten Inhalten zu generieren. Der Hauptvorteil von Templating -Motoren ist die Fähigkeit, Daten von der Präsentation zu trennen, was in einer Vielzahl von Anwendungen nützlich sein kann.

Das obige ist der detaillierte Inhalt vonEin Überblick über JavaScript -Templating -Motoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!