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!