Fantastisches Community-Modul

Entsafter chinesische Dokumentation

Aktuelle neueste Version: 0.6.14

Juicer ist eine effiziente und leichte Front-End-Template-Engine (Javascript). Die Verwendung von Juicer kann Ihr Code sein, um die Trennung von Daten und Ansichtsmodell (MVC) zu erreichen. Darüber hinaus kann es auch in der Node.js-Umgebung ausgeführt werden.

Es steht Ihnen frei, es unter der Voraussetzung der Einhaltung der MIT-Lizenz zu verwenden und zu vertreiben. Der Juicer-Code ist vollständig Open Source und wird auf Github gehostet. Wenn Sie während des Verwendungsprozesses Fehler oder gute Vorschläge finden, senden Sie diese bitte an Github Issue .

Der Ursprung des Namens

Wenn wir die Daten mit frischen und köstlichen Früchten vergleichen und die Vorlage als Wasser betrachten, ist Juicer ein Entsafter, der die Früchte und das Wasser aus den benötigten HTML-Codefragmenten herausdrückt.

Einführung von Juicer

1
<script type="text/javascript" src="juicer-min.js></script>

* Wie zu verwenden

> Kompilieren Sie die Vorlage und rendern Sie das Ergebnis sofort gemäß den angegebenen Daten.

1
juicer(tpl, data);

> Kompilieren Sie die Vorlage nur ohne Rendern, es wird eine wiederverwendbare kompilierte Funktion zurückgegeben.

1
var compiled_tpl = juicer(tpl);

> Führen Sie gemäß den angegebenen Daten ein Datenrendering für die zuvor kompilierte Vorlage durch.

1 2
var compiled_tpl = juicer(tpl); var html = compiled_tpl.render(data);

> Registrieren / Aufheben der Registrierung von benutzerdefinierten Funktionen (Objekten), es gibt Instanzen in $ {Variable} unten.

1 2
juicer.register('function_name', function); juicer.unregister('function_name');

> Benutzerdefiniertes Grenzzeichen für die Vorlagensyntax. Das folgende ist das Standard-Grenzzeichen von Juicer. Sie können dies verwenden, um Situationen zu lösen, in denen die Syntax der Juicer-Vorlage mit einer Syntax der Back-End-Sprachvorlage in Konflikt steht.

1 2 3 4 5 6 7 8 9 10
juicer.set({ 'tag::operationOpen': '{@', 'tag::operationClose': '}', 'tag::interpolateOpen': '${', 'tag::interpolateClose': '}', 'tag::noneencodeOpen': '$${', 'tag::noneencodeClose': '}', 'tag::commentOpen': '{#', 'tag::commentClose': '}' });

Standardparameterkonfiguration

1 2 3 4 5 6
{ cache: true [false], strip: true [false], errorhandling: true [false], detection: true [false] }

Die Standardkonfiguration wird von Juicer empfohlen. Wenn Sie diese Parameter während der Verwendung ändern müssen, können Sie Folgendes tun:

Parameter für Parameteränderung:

1 2
juicer.set('strip',false); juicer.set('cache',false);

Änderungen der Stapelparameter:

1 2 3 4
juicer.set({ 'strip': false, 'cache': false };

Juicer speichert die kompilierte Vorlage standardmäßig im Cache, um die Zeit zu vermeiden, die für das wiederholte Kompilieren aufgewendet wird, wenn mehrere Daten derselben Vorlage gerendert werden. Wenn keine besonderen Anforderungen bestehen, wird dringend empfohlen, den Cache in den Standardparametern zu deaktivieren. Dadurch wird der Juicer-Cache ungültig Dies verringert die Leistung.

* Grammatik

a. $ {Variable}

Verwenden Sie ${} den Variablenwert auszugeben, wobei _ eine Referenz auf die Datenquelle ist (z. B. ${_} , das häufig verwendet wird, wenn die Datenquelle ein Array ist). Unterstützung von benutzerdefinierten Funktionen (Sie können viele interessante Funktionen durch benutzerdefinierte Funktionen erreichen, ähnlich wie bei ${data|links} Sie können Daten <a href=".." alt=".." /> direkt über vordefinierte benutzerdefinierte Funktionslinks zusammenstellen <a href=".." alt=".." /> ).

1 2 3
${name} ${name|function} ${name|function, arg1, arg2}

Lassen Sie uns anhand eines Beispiels die wunderbare Verwendung benutzerdefinierter Funktionen demonstrieren.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
var json = { links: [ {href: 'http://juicer.name', alt: 'Juicer'}, {href: 'http://benben.cc', alt: 'Benben'}, {href: 'http://ued.taobao.com', alt: 'Taobao UED'} ] }; var tpl = [ '{@each links as item}', '${item|links_build} <br />', '{@/each}' ].join(''); var links = function(data) { return '<a href="' + data.href + '" alt="' + data.alt + '" />'; };

juicer.register ('links_build', links); // Benutzerdefinierte Funktion registrieren juicer (tpl, json);

Nachdem der obige Code ausgeführt wurde, werden wir feststellen, dass das Ergebnis folgendes ist:

1 2 3
&lt;a href=&quot;http://juicer.name&quot; alt=&quot;Juicer&quot; <br /> &lt;a href=&quot;http://benben.cc&quot; alt=&quot;Benben&quot; <br /> &lt;a href=&quot;http://ued.taobao.com&quot; alt=&quot;Taobao UED&quot; <br />

Es ist ersichtlich, dass das Ergebnis maskiert wird. Wenn wir oben $$ {item | links} verwenden, erhalten wir das erwartete Ergebnis. Dies ist die unten erwähnte Vermeidung des Escapings.

Flucht / Flucht vermeiden

Aus Sicherheitsgründen wird ${变量} vor der Ausgabe dem Inhalt maskiert. Wenn Sie nicht möchten, dass die Ausgabe maskiert wird, können Sie $${变量} , um diese Situation zu vermeiden. Zum Beispiel:

1 2 3 4 5 6 7 8 9
var json = { value: '&lt;strong&gt;juicer&lt;/strong&gt;' }; var escape_tpl='${value}'; var unescape_tpl='$${value}'; juicer(escape_tpl, json); //输出 '&lt;strong&gt;juicer&lt;/strong&gt;' juicer(unescape_tpl, json); //输出 '<strong>juicer</strong>'

b. Durchlaufen von {@each} ... {@ / each}

Wenn Sie das Array durchlaufen müssen, können Sie each wie folgt verwenden.

1 2 3
{@each list as item} ${item.prop} {@/each}

Dies ist auch praktisch, wenn Sie den aktuellen Indexwert während des Durchlaufvorgangs abrufen möchten.

1 2 3 4
{@each list as item, index} ${item.prop} ${index} //当前索引 {@/each}

c. Urteil {@if} ... {@else if} ... {@else} ... {@ / if}

Wir stoßen auch häufig auf logische Urteile über Daten.

1 2 3 4 5 6 7 8 9
{@each list as item,index} {@if index===3} the index is 3, the value is ${item.prop} {@else if index === 4} the index is 4, the value is ${item.prop} {@else} the index is not 3, the value is ${item.prop} {@/if} {@/each}

d. Kommentar {# Kommentarinhalt}

Für die Wartbarkeit und Lesbarkeit des nachfolgenden Codes können wir der Vorlage Kommentare hinzufügen.

1
{# 这里是注释内容}

Hilfsschleife {@each i in range (m, n)}

Die Hilfsschleife ist ein syntaktischer Zucker, der von Juicer sorgfältig für Sie eingestellt wurde. Vielleicht benötigen Sie ihn in einer bestimmten Situation.

1 2 3
{@each i in range(5, 10)} ${i}; //输出 5;6;7;8;9; {@/each}

f. Verschachtelung von Untervorlagen {@include tpl, data}

Durch das Verschachteln von Untervorlagen können Sie Ihren Vorlagencode flexibler organisieren. Zusätzlich zur Einführung von in den Daten angegebenen Untervorlagen können Sie auch den im script Tag geschriebenen Vorlagencode verwenden, indem Sie die Zeichenfolge #id .

HTML-Code:

1 2 3
<script type="text/juicer" id="subTpl"> I'm sub content, ${name} </script>

Javascript-Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
var tpl = 'Hi, {@include "#subTpl", subData}, End.'; juicer(tpl, { subData: { name: 'juicer' } }); //输出 Hi, I'm sub content, juicer, End. //或者通过数据引入子模板,下述代码也将会有相同的渲染结果: var tpl = 'Hi, {@include subTpl, subData}, End.'; juicer(tpl, { subTpl: "I'm sub content, ${name}", subData: { name: 'juicer' } });

* In Node.js Umgebung ausführen

1 2 3 4 5 6
在命令行中执行: npm install juicer 在代码中这么引入: var juicer = require('juicer'); var html = juicer(tpl, data);

Wird im Express.js-Framework verwendet

In der Version der Express 2.x-Serie:

1 2 3 4 5 6 7 8
npm install juicer var juicer = require('juicer'); app.set('view engine', 'html'); app.register('.html', { compile: function(str, options) { return juicer.compile(str, options).render; } });

In der Version der Express 3.x-Serie:

1 2 3 4 5 6 7 8 9 10 11
npm install juicer var juicer = require('juicer'); var fs = require('fs'); app.set('view engine', 'html'); app.engine('html', function(path, options, fn){ fs.readFile(path, 'utf8', function(err, str){ if (err) return fn(err); str = juicer(str, options); fn(null, str); }); });

In der Version der Express 4.x-Serie:

1 2 3
var juicerExpressAdapter = require('juicer-express-adapter'); app.set('view engine', 'html'); app.engine('html', juicerExpressAdapter);

Kompilieren Sie die Vorlagendatei in der Befehlszeile vor:

1 2 3 4 5
npm install -g juicer juicer example.juicer.tmpl -f example.js // type `juicer` after install for more help. // 全局模式安装 `juicer` 后,在命令行下输入 `juicer` 可以获得更多帮助信息。

Richten Sie einen externen Cache-Speicher für die Template-Engine ein:

1 2 3 4 5
var juicer = require('juicer'); var LRUCache = require('lru-native'); var cache = new LRUCache({ maxElements: 1000 }); juicer.set('cachestore', cache);

* Ein vollständiges Beispiel

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
HTML 代码: <script id="tpl" type="text/template"> <ul> {@each list as it,index} <li>${it.name} (index: ${index})</li> {@/each} {@each blah as it} <li> num: ${it.num} <br /> {@if it.num==3} {@each it.inner as it2} ${it2.time} <br /> {@/each} {@/if} </li> {@/each} </ul> </script> Javascript 代码: var data = { list: [ {name:' guokai', show: true}, {name:' benben', show: false}, {name:' dierbaby', show: true} ], blah: [ {num: 1}, {num: 2}, {num: 3, inner:[ {'time': '15:00'}, {'time': '16:00'}, {'time': '17:00'}, {'time': '18:00'} ]}, {num: 4} ] }; var tpl = document.getElementById('tpl').innerHTML; var html = juicer(tpl, data);