Webanwendungen verwenden normalerweise die MVC -Architektur, um die Gesch?ftslogik von Pr?sentationsansichten zu trennen. Komplexe Projekte umfassen eine gro?e Anzahl von Client -HTML, die JavaScript -Operationen verwenden, was schwer zu warten ist. In diesem Fall k?nnen wir ein Vorlagensystem verwenden, um die Wiederverwendbarkeit zu verbessern und die Ansichtsmanagementaufgaben zu vereinfachen. Mustache.js bietet ein gut dokumentiertes Vorlagensystem, mit dem Vorlagen verwaltet werden k?nnen. Da der Schnurrbart mehrere Sprachen unterstützt, müssen wir auf der Serverseite kein separates Vorlagensystem verwenden. Dieser Artikel beschreibt die Grundlagen der Verwendung von Schnurrbart.

Schlüsselpunkte

• mustache.js ist ein gut dokumentiertes Vorlagensystem, mit dem HTML-Vorlagen in komplexen Webanwendungen verwaltet, die Wiederverwendbarkeit verbessert und die Ansichtsmanagementaufgaben vereinfacht werden k?nnen.
• mustache.js ist unlogisch, was bedeutet, dass seine Vorlage keine IF-ELSE-Bedingungen oder für Schleifen enth?lt. Es verwendet Etiketten, die von Doppelspangen bezeichnet werden, um der Vorlage Daten hinzuzufügen.
• Schnurrbartvorlagen k?nnen auf verschiedene Arten definiert werden, einschlie?lich Inline -Methoden, Inline -Skripten und externen HTML -Snippets. Welche Methode zu w?hlen, h?ngt von den spezifischen Anforderungen des Projekts ab.
• mustache.js ist ein Multifunktions-Tool, das sowohl auf dem Client als auch auf der Serverseite verwendet werden kann und mehrere Sprachen unterstützt. Es enth?lt auch Tags zum Verwalten komplexer Vorlagen wie Variablen, Abschnitte, Funktionen und Teilvorlagen.

Warum brauchen wir ein Vorlagensystem?

Die meisten Entwickler, die nichts über Vorlagensysteme kennen, erstellen neue HTML -Codeblockungen und fügen sie mit JavaScript dynamisch in das DOM ein. Eine gemeinsame Methode besteht darin, das HTML -Element als Zeichenfolge anzugeben, dann die InnerHTML -Eigenschaft festlegen oder die Jquery HTML () -Methode aufrufen. Hier ist ein Beispiel:

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;</pre>
 Eine andere M?glichkeit, ein DOM zu erstellen

var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</pre> Beide oben genannten Methoden k?nnen das Dokument dynamisch Elemente zum Dokument hinzufügen. Betrachten Sie eine Situation, in der wir eine gut gestaltete Kugelliste haben, die auf drei verschiedenen Seiten von Seiten der Website verwendet werden muss. Mit diesen Techniken müssen wir die Liste des HTML -Code an drei verschiedenen Orten wiederholen. Dies wird oft als schlechte Codierungsgewohnheit angesehen. In diesem Fall k?nnen wir vordefinierte Vorlagen an verschiedenen Orten verwenden, ohne den Code zu duplizieren. Mustache.js ist eine sehr beliebte JavaScript -Vorlage -Engine. Da der Schnurrbart in mehreren Sprachen serverseitige und clientseitige Vorlagen anbietet, müssen wir uns keine Sorgen um die Auswahl einer separaten Vorlagen-Engine machen. 

 
 Anf?nger von Schnurrbart.js  
 Schnurrbart ist ein logikfreies Open-Source-Vorlagensystem, das für Sprachen wie JavaScript, Ruby, Python, PHP und Java geeignet ist. Sie k?nnen auf die offizielle Seite auf GitHub zugreifen, um eine Kopie der Bibliothek zu erhalten. Schnurrbart verwendet Vorlagen und Ansichten als Grundlage zum Erstellen dynamischer Vorlagen. Die Ansicht enth?lt die JSON -Daten, die in die Vorlage enthalten sind. Eine Vorlage enth?lt Pr?sentation HTML oder Daten mit Vorlagen -Tags, die Ansichtsdaten enthalten. Wir haben früher erw?hnt, dass Schnurrbart unlogisch ist. Dies bedeutet, dass die Vorlage keine IF-ELSE-Bedingungen oder für Schleifen enth?lt. Beginnen wir nun mit der Schnurrbartvorlage mit einem einfachen Beispiel. 
var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;</pre>
 Zun?chst müssen wir die Datei redache.js in das Dokument aufnehmen. Dann k?nnen wir die Schnurrbartvorlage erstellen. Im obigen Beispiel haben wir eine Ansicht, die den Namen und den Beruf einer Person enth?lt. Wir verwenden dann Tags, die den Code und den Namen und die Karrieredaten in der Funktion render () pr?sentieren. Etiketten werden durch doppelte Klammern oder B?rte dargestellt, die sie umgeben. Lassen Sie uns nun sehen, wie die Render () -Methode funktioniert. 
  Rendern der Schnurrbartvorlage  
 Der folgende Code zeigt die Implementierung der Funktion render () in der Datei mustache.js. Drei Parameter k?nnen an Render () übergeben werden. Die ersten beiden Parametervorlage und -ansicht sind erforderlich. Partials k?nnen als dynamische Vorlagen angesehen werden, die Sie in die Hauptvorlage injizieren k?nnen. In unserem vorherigen Beispiel haben wir die Vorlage als Inline -Parameter, die Ansicht als zweite Parameter, übergeben und der Ausgabevariablen das Ergebnis zuweisen. 
var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</pre>
 Dies ist die grundlegendste Form von Vorlagen mit Schnurrbart. Schauen wir uns andere Methoden an, mit denen mehr kanonische Code erstellt werden kann. 
  Definitionsbündchen -Schnurrbart -Vorlage  
 Es gibt verschiedene M?glichkeiten, Schnurrbartvorlagen in Ihrer Anwendung zu definieren. Diese Methoden ?hneln der Verwendung von Inline -Stilen, Inline -Stylesheets und externen Stylesheets, die CSS enthalten. Das zuvor diskutierte Beispiel kann als Inline -Methode angesehen werden, da wir die Vorlage direkt an die Funktion übergeben. Diese Methode verhindert die M?glichkeit wiederverwendbarer Vorlagen. Lassen Sie uns sehen, wie Sie eine Vorlage als Inline -Skriptvorlage definieren, anstatt sie direkt an eine Funktion weiterzugeben. 
  Vorlage als Inline -Skript  
 wir k?nnen zu </pre> 
 gehen
 Sie k?nnen so viele Vorlagen mit unterschiedlichen IDs in das Dokument einbeziehen, wie Sie m?chten. Wenn Sie eine Vorlage verwenden m?chten, verwenden Sie InnerHTML, um das HTML in das Skript -Tag zu erhalten und sie als Vorlage zu übergeben. Unser erstes Beispiel wird in den folgenden Code ge?ndert: 
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mustache.js Inline Method</title>
  <??>
</head>
<body>
  <??>
  <p id="person"></p>
</body>
<??>
</html></pre>

 Wie Sie sehen, wird die Vorlage separat gespeichert und bei Bedarf dynamisch verwendet. Diese Methode erh?ht die M?glichkeit der Wiederverwendung von Vorlagen. Die Verwendung von Inline -Skripten beschr?nkt jedoch den Umfang der Vorlage auf eine Seite. Wenn Sie mehrere Seiten haben, müssen Sie die Vorlage erneut definieren. Die Einbeziehung von Vorlagen in externe Dateien w?re die ideale L?sung - genau wie CSS. 

  Vorlage als externer HTML -Snippet 
 
 In dieser Technik werden wir JQuery verwenden, um Vorlagen zu implementieren. JQuery bietet eine Funktion namens load (), mit der ein Teil eines externen Dokuments erreicht werden kann. Wir werden diese Methode verwenden, um die Vorlage dynamisch aus der externen Vorlagendatei zu laden. Die Funktion load () führt Skripte aus, anstatt sie zurückzugeben. Daher k?nnen wir keine Vorlagen in Skript -Tags erstellen, wie wir es in der vorherigen Methode getan haben. Das folgende Beispiel zeigt die externe Vorlagendatei, die wir verwenden werden. 
var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;</pre>
 Wir haben das Element <div> anstelle von Skripten für Vorlagen verwendet, um es mit der Load () -Funktion von JQuery kompatibel zu machen. Hier haben wir drei verschiedene Vorlagen mit drei verschiedenen IDs. Verwenden wir diese Vorlagen weiterhin in Ihrer Seite. 
var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</pre>
 jQuery fügt das zurückgegebene Dokument in ein HTML -Element ein, anstatt es einer Variablen zuzuweisen. Daher ben?tigen wir einen virtuellen Container, um die Vorlage zu halten. Ich habe den standardm??igen Vorlagenbeh?lter verwendet, der standardm??ig versteckt ist. Das obige Beispiel ruft Template1 ab und l?dt es. Wir k?nnen dann die Vorlage aus dem virtuellen Container erhalten und sie zum Rendern an Schnurrbart übergeben. So funktionieren externe Methoden. Wir k?nnen auch die AJAX -Anforderung verwenden, um Daten vom Server abzurufen. 
  Schlussfolgerung  
 Template -Motoren und Frameworks sind sehr wichtig, um komplexe Systeme mit dynamisch ?ndernden Pr?sentationsansichten zu verwalten. Mustache.js ist eine der besten Auswahlm?glichkeiten für Administratorvorlagen auf der Clientseite. Wir erkl?ren zu Beginn dieses Tutorials, warum Vorlagen wichtig sind. Dann führen wir weiterhin verschiedene Techniken mit Schnurrbartvorlagen ein. Sie k?nnen nun einen Weg ausw?hlen, die Schnurrbartvorlage in Ihrem Projekt zu implementieren. Wir haben verschiedene Techniken zur Verwendung von Schnurrbartvorlagen untersucht. Schnurrbart enth?lt jedoch auch Tags wie Variablen, Abschnitte, Funktionen und Teilvorlagen, mit denen komplexe Vorlagen verwaltet werden. Die Diskussion der Syntax für jedes Tag ist jenseits des Rahmens dieses Tutorials. Sie finden eine umfassende Anleitung zum Schnurrbart -Tag auf der Schnurrbart -Github -Seite. Fühlen Sie sich frei, Ihre früheren Erfahrungen mit mustache.js zu teilen! 
  mustache.js faq (faq)  

  Was ist der Hauptunterschied zwischen Schnurrbart.js und anderen Bibliotheken für JavaScript -Vorlagen?  

 mustache.js ist eine logische Vorlagensyntax. Dies bedeutet, dass es für HTML, Konfigurationsdateien, Quellcode - alles verwendet werden kann. Es wird durch Erweiterung der Beschriftungen in Vorlagen mit dem im Objekt angegebenen Hash oder Werten erweitert. Im Gegensatz zu anderen JavaScript -Vorlagenbibliotheken enth?lt Schnurrbartschache.js keine Anweisungen, Anweisungen, Anklauseln oder für Schleifen. Stattdessen gibt es nur Etiketten. Einige Tags werden durch einen Wert ersetzt, andere haben nichts, andere sind eine Reihe von Werten. 

  Wie benutzt man redache.js für HTML -Vorlagen?  

 Um redache.js für HTML -Vorlagen zu verwenden, müssen Sie zun?chst das Skript mustache.js in die HTML -Datei aufnehmen. Dann definieren Sie eine Vorlage innerhalb des <script></script> Tags. Diese Vorlage kann Platzhalter enthalten, um Daten einzufügen. Diese Platzhalter werden durch doppelte Klammern wie {{name}} dargestellt. Anschlie?end verwenden Sie den Schnurrbart.render () -Funktion, um die Vorlage mit den von Ihnen angegebenen Daten zu rendern. 

  Kann ich Schnurrbart mit node.js verwenden?  

 Ja, Sie k?nnen mit node.js.js.js.js.js. Dazu müssen Sie das Schnurrbartpaket mit NPM installieren. Sobald die Installation abgeschlossen ist, ben?tigen Sie sie in der Datei node.js und verwenden die Vorlage. 

  Wie verwendet man Schnurrbart.js, um Arrays zu durchqueren?  

 In Mustache.js k?nnen Sie das Array mit der {{#Array}}… {{/array}} syntax durchqueren. In diesem Block k?nnen Sie {{.}} Verwenden, um das aktuelle Element im Array zu verweisen. Auf diese Weise k?nnen Sie jedes Element im Array in der Vorlage anzeigen. 

  Wie verwendet man bedingte Aussagen in Schnurrbart.js?  

 W?hrend Schnurrbartschache.js eine logisch unlogische Vorlagenbibliothek ist, die traditionelle Angaben nicht unterstützt, k?nnen Sie weiterhin Abschnitte verwenden, um ?hnliche Ergebnisse zu erzielen. Abschnitte rendern Textbl?cke einmal oder mehr Male basierend auf dem Wert des Schlüssels im Datenobjekt. 

  Wie kann man einige Vorlagen in Schnurrbart.js einbeziehen?  

 Einige Vorlagen in Schnurrbart.js erm?glichen es Ihnen, kleinere Vorlagen in eine gr??ere Vorlage aufzunehmen. Dies ist sehr nützlich, um gemeinsame Elemente wie Header und Fu?zeilen wiederzuverwenden. Um Teilvorlagen einzuschlie?en, k?nnen Sie die {{& gt; partielle}} -Syntax verwenden. 

  Wie kann man HTML in Schnurrbart.js entkommen?  

 standardm??ig entkommt Schnurrbart.js HTML in den Daten, um XSS -Angriffe zu verhindern. Wenn Sie HTML aus Ihren Daten rendern m?chten, k?nnen Sie die Triple Brace -Syntax wie {{{HTML}}} verwenden. 

  Kann ich Schnurrbart für die Serverseite verwenden?  

 Ja, Sie k?nnen Schnurrbartschache.js für die Serverseite verwenden. Dies ist nützlich, um Vorlagen zu rendern, bevor sie an den Client gesendet werden, und die Menge an JavaScript, die im Client ausgeführt werden muss, verringert. 

  Wie man eine Vorlage in Schnurrbart.js vorkompiliert?  

 Vorkompetenvorlagen in Schnurrbart.js k?nnen die Leistung verbessern, indem die Arbeiten, die zur Laufzeit erfolgen müssen, reduziert werden. Um eine Vorlage vorzubereiten, k?nnen Sie die Funktion mit Schnurrbart () verwenden. 

  Wie kann man Schnurrbartschache.js -Vorlage debuggen?  

 Debugging der Vorlage von redache.js kann schwierig sein, da die Bibliothek nicht viele Fehlermeldungen enth?lt. Sie k?nnen jedoch die Funktion der Schnurrbart verwenden. Parse (), um zu überprüfen, ob Ihre Vorlage gültig ist. Diese Funktion gibt eine Reihe von Tags zurück, die Sie überprüfen k?nnen, um festzustellen, ob Ihre Vorlagenstruktur korrekt ist. 
Das obige ist der detaillierte Inhalt vonErstellen von HTML -Vorlagen mit Schnurrbart.js.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!