LayTPL ist eine disruptive JavaScript -Template -Engine. Es verwendet clevere Implementierungsmethoden, um seine eigene Größe klein und exquisit zu machen. Es hat nicht nur die ultimative Leistung, sondern hat auch fast alle Funktionen eines traditionellen Front-End-Motors. Alle Transformationsmagie wird durch weniger als 1 KB Code erzeugt, was wie eine Revolution erscheint oder nicht, aber es besteht kein Zweifel, dass LaytPL sie tatsächlich auf die Welt auf hellste Weise präsentiert. Wenn Sie dieser Anwendung noch nie ausgesetzt waren, spielt dies keine Rolle. In der folgenden Geschichte können Sie nicht in der Lage sein, LayTPL auszuwählen, und von da an können Sie die Datenwiedergabe der Seite besser erfassen und den Höhepunkt Ihres Lebens erreichen!
LayTPL -Vorteil
• Hervorragende Leistung, fast 1-mal schneller als ArtTemplate und Punkt, die als König der Performance bekannt sind, und 20-40-mal schneller als Baidutemplate, Kissytemplate usw. Je größer die Datenskala und Rendering-Frequenz sind, desto offensichtlicher ist es.
• Das Volumen ist einfach bis zum extremen, weniger als 1 KB und wird in Zukunft kleiner.
• Es verfügt über Sicherheitsmechanismen wie Flucht und hat relativ wissenschaftliche Fehlerberichterstellungsfunktionen.
• Native JavaScript kann willkürlich in der Vorlage geschrieben werden, um die Flexibilität der Vorlage vollständig zu gewährleisten
• Unterstützen Sie die Anwendung auf der Node.js -Plattform
• Unterstützen Sie alle alten oder modernen Mainstream -Browser
Wie man benutzt
Die Codekopie lautet wie folgt:
// Schritt 1: Schreiben Sie die Vorlage. Sie können ein Skript -Tag verwenden, um Vorlagen zu speichern, z. B.:
<script id = "Demo" type = "text/html">
<h1> {{d.title}} </h1>
<ul>
{{# für (var i = 0, len = d.list.length; i <len; i ++) {}}
<li>
<span> Name: {{D.List [i] .Name}} </span>
<span> Stadt: {{D.List [i] .City}} </span>
</li>
{{#}}}
</ul>
</script>
// Schritt 2: Erstellen Sie eine Ansicht. Wird verwendet, um die Ergebnisse der Renderung zu erzielen.
<div id = "view"> </div>
// Schritt 3: Rendern der Vorlage
var data = {
Titel: 'Front-End-Belagerung',
Liste: [{name: 'xianxin', Stadt: 'Hangzhou'}, {Name: 'Xie Liang', Stadt: 'Peking'}, {Name: 'Qianqian', Stadt: 'Hangzhou'}, {name: 'dem', Stadt: 'peijing'}]
};
var gettpl = document.getElementById ('Demo'). Innerhtml;
LayTPL (GetTPL) .Render (Daten, Funktion (html) {
document.getElementById ('Ansicht'). InnerHtml = html;
});
Dokumentationsbeschreibung
1. Vorlagensyntax
Ein normales Feld ausgeben, ohne HTML zu entkommen: {{d.field}}
Ein normales Feld ausgeben und entkommen html: {{= d.field}}
JavaScript -Skript: {{# JavaScript Anweisung}}
2. Eingebaute Methode
1): Laytpl (Vorlage); // Kernfunktion, geben Sie ein Objekt zurück
var tpl = laytpl (Vorlage);
tpl.render (Daten, Rückruf); // Rendering -Methode, Rendite -Rendering -Ergebnisse, unterstützt zwei Modi: asynchron und synchron
A): Asynchron
tpl.render (Daten, Funktion (Ergebnis) {
console.log (Ergebnis);
});
B): Synchron
var result = tpl.render (Daten);
console.log (Ergebnis);
2): Laytpl.config (Optionen); // Initialisieren Sie die Konfiguration
Optionen sind ein Objekt
{Öffnen: 'Start -Tag', schließen: 'Close Tag'}
3): Laytpl.v // Versionsnummer abrufen
Dinge zu beachten
1. Führen Sie einfach direkt Laytpl.js ein und Sie können auch SeaJs und andere modulare Belastungen direkt verwenden.
2. LaytPL kann nach Belieben verwendet werden, sowohl im Geschäft als auch in persönlichen Plattformen.
3. Achten Sie darauf, dass Sie die Quelle in irgendeiner Gelegenheit behalten und die Kommentare von LayoutPl.js -Header nicht entfernen.
Offizielle Website: http://sentsin.com/layui/laytpl/
Download: //www.vevb.com/codes/207072.html