Fantastisches Community-Modul

Entsafter Chinesisches Dokument

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.

Sie können es unter der Voraussetzung 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 in der Github-Ausgabe .

Herkunft des Namens

Wenn wir Daten mit frischen und köstlichen Früchten vergleichen und Vorlagen als Wasser anzeigen, 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>

* Anweisungen

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

1
juicer(tpl, data);

> Nur die kompilierte Vorlage wird nicht gerendert, sondern gibt eine wiederverwendbare kompilierte Funktion zurück.

1
var compiled_tpl = juicer(tpl);

> Führen Sie das Rendern der Daten für die zuvor kompilierte Vorlage gemäß den angegebenen Daten durch.

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

> Benutzerdefinierte Funktionen (Objekte) registrieren / abmelden. Beispiele finden Sie unten in $ {Variablen}.

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

> Benutzerdefiniertes Template-Syntax-Grenzzeichen. Unten finden Sie das Standard-Grenzzeichen von Juicer. Sie können dies verwenden, um den Konflikt zwischen der Juicer-Vorlagensyntax und einer 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 ist die von Juicer empfohlene Verwendungsmethode. Wenn Sie diese Parameter während der Verwendung wirklich ändern müssen, können Sie Folgendes tun:

Ändern Sie die Parameter nacheinander:

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 durch wiederholtes 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, wodurch die Leistung verringert wird.

* Grammatik

a. $ {Variablen}

Verwenden des ${}Ausgabevariablenwerts, der _eine Referenz auf eine Datenquelle ist (z. B. ${_}wie üblicherweise in dem Fall verwendet, in dem das Datenquellenarray verwendet wird). Unterstützung für benutzerdefinierte Funktionen (mit benutzerdefinierten Funktionen können Sie viele interessante Funktionen erzielen, ähnlich wie ${data|links}Sie direkt auf Daten zugreifen können, die über zuvor definierte benutzerdefinierte Funktionslinks zusammengestellt wurden <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 juicer (tpl, json);

Nachdem der obige Code ausgeführt wurde, werden wir feststellen, dass das Ergebnis folgendermaßen 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 ersichtlich, dass das Ergebnis maskiert wird. Wenn wir oben $$ {item | links} verwenden, erhalten wir das erwartete Ergebnis, das die unten erwähnte Vermeidung des Escapings darstellt.

Flucht / Flucht

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. Schleifenüberquerung {@each} ... {@ / each}

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

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

Dies ist auch sehr 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 begegnen uns auch häufig, wenn wir logische Beurteilungen von Daten vornehmen.

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 {# Inhalt kommentieren}

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

Auxiliary Loop 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 zum Importieren von in den Daten angegebenen Untervorlagen können Sie auch den #idin scriptTags geschriebenen Vorlagencode verwenden , indem Sie Zeichenfolgen angeben .

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

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