Tolles Community-Modul

Entsafter Chinesisches Dokument

Aktuell neueste Version: 0.6.14

Juicer ist eine effiziente und leichtgewichtige Front-End-(Javascript)-Vorlagen-Engine.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.

Sie können es unter der Prämisse der Einhaltung der MIT-Lizenz frei verwenden und verteilen. Der Juicer-Code ist vollständig Open Source und wird auf Github gehostet.Wenn Sie während der Verwendung Fehler oder gute Vorschläge finden, senden Sie diese bitte an Github Issue .

Herkunft des Namens

Wenn wir Daten mit frischen und leckeren Früchten vergleichen und Vorlagen als Wasser betrachten, ist Juicer ein Entsafter, der die Früchte und das Wasser aus den benötigten HTML-Codefragmenten presst.

Einführung von Entsafter

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

* Anleitung

> Kompilieren Sie die Vorlage und rendern Sie das Ergebnis sofort basierend auf den angegebenen Daten.

1
juicer(tpl, data);

> Nur das kompilierte Template wird nicht gerendert, es wird eine wiederverwendbare kompilierte Funktion zurückgegeben.

1
var compiled_tpl = juicer(tpl);

> Führen Sie das Datenrendering auf der zuvor erstellten Vorlage gemäß den angegebenen Daten durch.

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

> Benutzerdefinierte Funktionen (Objekte) registrieren/deregistrieren, Beispiele finden Sie unten in ${variables}.

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

> Begrenzungszeichen für benutzerdefinierte Vorlagensyntax, unten ist das standardmäßige Begrenzungszeichen von Juicer. Sie können dies verwenden, um den Konflikt zwischen der Juicer-Vorlagensyntax und einer bestimmten Backend-Sprachvorlagensyntax zu lösen.

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 stellt die empfohlene Verwendungsmethode von Juicer dar. Wenn Sie diese Parameter während der Verwendung wirklich ändern müssen, können Sie dies tun:

Ändern Sie die Parameter nacheinander:

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

Änderungen der Batch-Parameter:

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

Standardmäßig speichert Juicer die kompilierte Vorlage im Cache, um die Zeit zu vermeiden, die durch wiederholte Kompilierung verbraucht wird, wenn dieselbe Vorlage mehrmals gerendert wird. Wenn keine besonderen Anforderungen bestehen, wird dringend empfohlen, den Cache in den Standardparametern nicht zu deaktivieren macht den Juicer-Cache ungültig und reduziert dadurch die Leistung.

* Grammatik

a. ${Variablen}

Verwenden des ${}Ausgabevariablenwerts, der _eine Referenz auf eine Datenquelle ist (z. B. ${_}, wie sie häufig im Datenquellenarray verwendet wird). Unterstützung für benutzerdefinierte Funktionen (benutzerdefinierte Funktionen können Sie viele interessante Funktionen erreichen, ähnlich wie ${data|links}Sie durch eine zuvor definierte benutzerdefinierte Funktion zu Daten zusammengestellt werden <a href=".." alt=".." />).

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

Lassen Sie uns die wunderbare Verwendung benutzerdefinierter Funktionen anhand eines Beispiels 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 Jucer(tpl, json);

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

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 zu sehen, dass das Ergebnis maskiert ist.Wenn wir oben $${item|links} verwenden, erhalten wir das erwartete Ergebnis, was die unten erwähnte Vermeidung von Escaping ist.

Entkommen/Flucht vermeiden

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

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. Schleifendurchquerung {@each} ... {@/each}

Wenn Sie das Array durchlaufen müssen, können Sie es so verwenden each.

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

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

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

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

Wir begegnen uns auch oft, wenn wir logische Urteile über Daten fällen.

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
{# 这里是注释内容}

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

Auxiliary Loop ist ein syntaktischer Zucker, der von Juicer sorgfältig für Sie eingestellt wurde.

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

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

Durch die Verschachtelung von Untervorlagen können Sie Ihren Vorlagencode flexibler organisieren.Neben dem Import von in den Daten angegebenen Untervorlagen können Sie auch den #idin scriptTags geschriebenen Vorlagencode durch Angabe von Strings verwenden .

HTML Quelltext:

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

Vorlagendateien in der Befehlszeile vorkompilieren:

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