In letzter Zeit nähert sich meine Arbeitsinhalte allmählich meiner Idealisierung (Web Front-End), sodass ich der Front-End-Leistung mehr Aufmerksamkeit schenke! Ein Kollege im Hintergrund führte die Verwendung der AJAX -Vorlagemotor ein, um die Rendergeschwindigkeit zu verbessern!
Hier sind einige JavaScript -Vorlagenmotoren
1. Schnurrbart
Eine Template -Engine basierend auf JavaScript, ähnlich wie das JQuery -Vorlagen -Plugin von Microsoft, ist jedoch einfacher und einfacher zu bedienen!
2. Dot.js
Dot.js enthält eine JavaScript -Vorlage -Engine für Browser und Node.js.
3. Jsmart
JSMART ist eine JavaScript -portierte Version des berühmten PHP -Template Engine Smarty.
4. Dom.js
Dom.js ist eine JavaScript -Vorlage -Engine, die sowohl auf dem Client als auch auf der Serverseite verwendet werden kann.
5. Jade
Jade ist eine Hochleistungsvorlage-Engine für Knoten, die von HAML in JavaScript beeinflusst werden.
6. Hogan.js
JavaScript Template Engine von Twitter.
7. Lenker
Lenker ist eine JavaScript -Seitenvorlagenbibliothek
8. Arttemplate
ArtTemplate ist eine neue Generation von JavaScript -Template -Engine. Die Rendering -Effizienz in V8 kann nahe an der Leistungsgrenze von JavaScript liegen. Bei dem Rendering-Effizienz-Test unter Chrom ist das 25- und 32-fache des bekannten Schnurrbartes und der Micro-TMPL des Motors. Der Motor unterstützt das Debuggen. Wenn beim Rendering ein Fehler auftritt, kann der Debugger die Vorlagenerklärung, die eine Ausnahme erzeugt, genau lokalisieren und das Problem lösen, dass Front-End-Vorlagen schwer zu debuggen sind.
Das eindeutige Template-Kompilierungstool kann Front-End-Vorlagen in JS-Dateien zusammenstellen, die nicht auf der Vorlagen-Engine ausführen, um Front-End-Vorlagen durchzubrechen und die Organisation von Dateien und Verzeichnissen auf die gleiche Weise wie Back-End-Vorlagen, Ladeanwendungen zu erkennen, eine Verschachtelung usw..
Vielleicht werden Sie denken, dass der Name dieses Plugins vertraut aussieht, das ist richtig! Dies ist auch der Autor von ArtDialog.
Blog -Adresse: http://www.planeart.cn/
Motor zitieren
Die Codekopie lautet wie folgt:
<script src = "js/template.js"> </script>
Schreiben Sie eine Vorlage
Die Codekopie lautet wie folgt:
<script id = "test" type = "text/html">
// Verwenden Sie ein Skript -Tag mit type = "text/html", um die Vorlage zu speichern:
<H1> <%= title%> </h1>
<ul>
<%
für (i = 0; i <list.length; i ++) {%>
<li> iteml <%= i+1%>: <%= list [i]%> </li>
<%}%>
</ul>
// Die Definitionsymbole für den Anfang und das Ende der Vorlagenlogik -Syntax sind < % und %>. Wenn der = Zeichen nach <% folgt, wird der variable Inhalt ausgegeben.
</script>
Rendering -Vorlage
Die Codekopie lautet wie folgt:
var data = {
Titel: 'Tag',,
Liste: ["Literary", "Blog", "Fotografie", "Film", "Folk", "Travel", "Gitarre"]
};
var html = template.render ("test", data);
document.getElementById ('Inhalt'). InnerHtml = html;