Fantastisches Community-Modul

Entsafter-Dokumentation

Aktuelle neueste Version: 0.6.14

Juicer ist eine effiziente und leichte Front-End-Template-Engine (Javascript). Mit Juicer können Sie Daten und Ansichtsmodelle (MVC) für Ihren Code trennen. Darüber hinaus kann es auch in einer Node.js-Umgebung ausgeführt werden.

Sie können es nach Belieben verwenden und verteilen, vorbehaltlich der MIT-Lizenz. Juicer-Code ist vollständig Open Source und wird auf Github gehostet. Wenn Sie Fehler oder gute Vorschläge bei der Verwendung finden, senden Sie diese bitte in der Github-Ausgabe .

Herkunft des Namens

Wenn wir die Daten mit frischen und köstlichen Früchten und der Vorlage als Wasser vergleichen, ist Juicer der Entsafter, der die Früchte und das Wasser in das von uns benötigte HTML-Code-Snippet drückt.

Die Einführung von Juicer

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

* Wie zu verwenden

> Kompilieren Sie die Vorlage und rendern Sie die Ergebnisse sofort anhand der angegebenen Daten.

1
juicer(tpl, data);

> Nur die kompilierte Vorlage wird nicht gerendert, es wird eine wiederverwendbare kompilierte Funktion zurückgegeben.

1
var compiled_tpl = juicer(tpl);

> Führen Sie basierend auf den angegebenen Daten ein Daten-Rendering 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');

> Benutzerdefinierte Grenzzeichen für die Syntax der Vorlage. Nachfolgend finden Sie die Standardbegrenzungszeichen 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 entspricht der von Juicer empfohlenen Konfiguration. Wenn Sie diese Parameter während der Verwendung ändern müssen, können Sie Folgendes tun:

Parameteränderung nacheinander:

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

Änderungen der Massenparameter:

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 benötigt wird, wenn dieselbe Vorlage mehrmals gerendert wird. Wenn keine besondere Notwendigkeit besteht, wird dringend empfohlen, den Cache in den Standardparametern nicht zu deaktivieren. Dadurch wird der Juicer-Cache ungültig Dies verringert die Leistung.

* Syntax

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 für benutzerdefinierte Funktionen (Sie können viele interessante Funktionen über benutzerdefinierte Funktionen implementieren. Ähnlich wie bei ${data|links} Sie Daten direkt zusammenstellen, indem Sie benutzerdefinierte Funktionslinks im Voraus definieren <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); // Registriere eine benutzerdefinierte Funktion juicy (tpl, json);

Nachdem der obige Code ausgeführt wurde, finden wir das Ergebnis:

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 />

Sie können sehen, dass das Ergebnis maskiert ist. Wenn wir oben $$ {item | links} verwenden, erhalten wir das erwartete Ergebnis. Dies ist die unten erwähnte Vermeidung von Escape.

Entkommen / Flucht vermeiden

Aus Sicherheitsgründen wird ${变量} vor der Ausgabe dem Inhalt entkommen. Wenn Sie nicht möchten, dass die Ausgabe maskiert wird, können Sie dies mit $${变量} 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}

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

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

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

Wir stoßen auch oft 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. Kommentare {# 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 bestimmten Situationen.

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. Neben der 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);

Verwendung im Express.js-Framework

In 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 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 Express 4.x-Serie:

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

Vorkompilieren von Vorlagendateien in der Befehlszeile:

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);