Mòdul de comunitat impressionant

Juicer Document xinès

Última versió actual: 0.6.14

Juicer és un motor de plantilla frontal (Javascript) eficient i lleuger. Utilitzar Juicer pot ser el vostre codi per aconseguir la separació de les dades i el model de visualització (MVC). A més, també es pot executar a l’entorn Node.js.

El podeu utilitzar i distribuir lliurement sota la premissa d’observar la llicència MIT. El codi Juicer és completament de codi obert i està allotjat a Github . Si trobeu algun error o algun bon suggeriment en el procés d’utilitzar-lo, podeu enviar-lo a Github Issue .

origen del nom

Si comparem dades amb fruites fresques i delicioses i visualitzem plantilles com a aigua, Juicer és un exprimidor que extreu la fruita i l’aigua dels fragments de codi HTML que necessitem.

Introducció de Juicer

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

* Instruccions

> Compileu la plantilla i renderitzeu immediatament el resultat en funció de les dades donades.

1
juicer(tpl, data);

> Només la plantilla compilada no es renderitzarà, retornarà una funció compilada reutilitzable.

1
var compiled_tpl = juicer(tpl);

> Realitzeu la representació de dades a la plantilla compilada prèviament segons les dades donades.

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

> Registre / cancel·lació de funcions personalitzades (objectes), hi haurà exemples a $ {variables} a continuació.

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

> Caràcter de límit de sintaxi de plantilla personalitzat, a continuació es mostra el caràcter de límit per defecte de Juicer. Podeu utilitzar-lo per resoldre el conflicte entre la sintaxi de plantilla de Juicer i alguna sintaxi de plantilla de llenguatge de fons.

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': '}' });

Configuració de paràmetres per defecte

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

La configuració predeterminada és el mètode d'ús recomanat per Juicer. Si realment necessiteu canviar aquests paràmetres durant l'ús, podeu fer-ho:

Canvieu els paràmetres un per un:

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

Canvis de paràmetres per lots:

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

Per defecte, Juicer emmagatzemarà en memòria cau la plantilla compilada per evitar el temps que consumeix la compilació repetida quan es reprodueix la mateixa plantilla diverses vegades. Si no hi ha cap necessitat especial, es recomana no desactivar la memòria cau als paràmetres predeterminats. invalidarà la memòria cau del Juicer. D’aquesta manera es reduirà el rendiment.

* gramàtica

a. $ {variables}

Utilitzant el ${}valor de la variable de sortida, que _és una referència a una font de dades (p. Ex. ${_}, Com s’utilitza habitualment en el cas que la matriu d’origen de dades). Suport per a funcions personalitzades (funció personalitzada podeu obtenir moltes funcions interessants, de manera similar ${data|links}podeu dirigir-vos a dades reunides mitjançant una funció personalitzada enllaços definits prèviament <a href=".." alt=".." />).

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

Demostrem l’ús meravellós de les funcions personalitzades a través d’un exemple.

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); // Registra una funció personalitzada d'expressor (tpl, json);

Després d'executar el codi anterior, trobarem que el resultat és així:

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 pot veure que s’escapa el resultat. Si fem servir $$ {item | links} més amunt, obtindrem el resultat esperat, que és l’evitació d’escapar que s’esmenta a continuació.

Escapar / Evitar escapar

Per a l'angle de seguretat, ${变量}s'escaparà del seu contingut abans de la sortida; si no voleu que la sortida s'escapi, podeu utilitzar-la $${变量}per evitar aquesta situació. Per exemple:

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. Recorregut del bucle {@each} ... {@ / each}

Si necessiteu fer un bucle a través de la matriu, podeu utilitzar-la així each.

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

També és molt convenient si voleu obtenir el valor de l’índex actual durant el procés de recorregut.

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

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

Sovint també ens trobem quan fem judicis lògics sobre les dades.

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. Comentari {# Contingut del comentari}

Per facilitar la llegibilitat i la llegibilitat del codi posterior, podem afegir comentaris a la plantilla.

1
{# 这里是注释内容}

e. Bucle auxiliar {@each i en el rang (m, n)}

El bucle auxiliar és un sucre sintàctic establert per Juicer per a vosaltres, potser el necessiteu en una situació determinada.

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

f. Nidificació de subplantes {@include tpl, data}

La col·locació de subplantes us permet organitzar el codi de la plantilla de manera més flexible. A més d'importar subplantes especificades a les dades, també podeu #idutilitzar scriptel codi de la plantilla escrit en etiquetes especificant cadenes .

Codi HTML:

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

Codi Javascript:

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

* Executeu-vos a l'entorn Node.js

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

Utilitzeu-lo al marc Express.js

A la versió de la sèrie Express 2.x:

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

A la versió de la sèrie Express 3.x:

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

A la versió de la sèrie Express 4.x:

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

Compileu prèviament els fitxers de plantilla a la línia d’ordres:

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` 可以获得更多帮助信息。

Configureu l'emmagatzematge de memòria cau externa per al motor de plantilles:

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

* Un exemple complet

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