Awesome Community Module

Exprimidor de documentación china

Última versión actual: 0.6.14

Juicer es un motor de plantillas front-end (Javascript) eficiente y liviano. Usar Juicer puede ser su código para lograr la separación de datos y modelo de vista (MVC). Además, también puede ejecutarse en el entorno Node.js.

Usted es libre de usarlo y distribuirlo bajo la premisa de observar la Licencia MIT. El código de Juicer es completamente de código abierto y está alojado en Github . Si encuentra algún error o alguna buena sugerencia durante el proceso de uso, envíelos en el Issue de Github .

origen del nombre

Si comparamos los datos con fruta fresca y deliciosa, y pensamos en la plantilla como agua, Juicer es un exprimidor que exprime la fruta y el agua de los fragmentos de código HTML que necesitamos.

Introducción de exprimidor

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

* Instrucciones

> Compile la plantilla e inmediatamente represente los resultados en función de los datos proporcionados.

1
juicer(tpl, data);

> Solo compile la plantilla sin renderizar, devolverá una función compilada reutilizable.

1
var compiled_tpl = juicer(tpl);

> Según los datos proporcionados, realice el procesamiento de datos en la plantilla compilada previamente.

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

> Registre / anule el registro de funciones personalizadas (objetos), habrá instancias en $ {variable} a continuación.

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

> Carácter de límite de sintaxis de plantilla personalizada, a continuación se muestra el carácter de límite predeterminado de Juicer. Puede usar esto para resolver situaciones en las que la sintaxis de la plantilla de Juicer entre en conflicto con alguna sintaxis de plantilla de lenguaje de fondo.

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ón de parámetros por defecto

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

Juicer recomienda la configuración predeterminada. Si necesita cambiar estos parámetros durante el uso, puede hacer esto:

Parámetro por cambio de parámetro:

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

Cambios de parámetros de lote:

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

Juicer almacenará en caché la plantilla compilada de manera predeterminada, para evitar el tiempo dedicado a la compilación repetida cuando se procesan múltiples datos de la misma plantilla. Si no hay una necesidad especial, no se recomienda desactivar la memoria caché en los parámetros predeterminados. Esto reduce el rendimiento.

* Gramática

a. $ {variable}

Use ${} generar el valor de la variable, donde _ es una referencia a la fuente de datos (como ${_} , que a menudo se usa cuando la fuente de datos es una matriz). Admite funciones personalizadas (puede lograr muchas funciones interesantes a través de funciones personalizadas, similares a ${data|links} puede ensamblar directamente los datos <a href=".." alt=".." /> través de enlaces de funciones personalizadas predefinidos <a href=".." alt=".." /> ).

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

Vamos a demostrar el maravilloso uso de funciones personalizadas a través de un ejemplo.

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); // Registrar la función personalizada de juicer (tpl, json);

Después de ejecutar el código anterior, encontraremos que el resultado es este:

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

Se puede ver que el resultado se escapa. Si usamos $$ {item | links} arriba, obtendremos el resultado esperado. Esto es para evitar el escape mencionado a continuación.

Escape / Evita Escape

Por razones de seguridad, ${变量} escapará al contenido antes de la salida. Si no desea que se escape la salida, puede usar $${变量} para evitar esta situación. P.ej:

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

Si necesita recorrer la matriz, puede usar each esta manera.

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

También es conveniente si desea obtener el valor del índice actual durante el proceso transversal.

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

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

También a menudo encontramos el tiempo para hacer juicios lógicos sobre los datos.

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. Comentario {# contenido del comentario}

Para la mantenibilidad y legibilidad del código posterior, podemos agregar comentarios a la plantilla.

1
{# 这里是注释内容}

e. Bucle auxiliar {@ cada i en el rango (m, n)}

El bucle auxiliar es un azúcar sintáctico cuidadosamente establecido por Juicer para usted, tal vez lo necesite en una determinada situación.

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

f. Anidación de sub-plantilla {@include tpl, data}

La anidación de sub-plantillas le permite organizar su código de plantilla de manera más flexible. Además de introducir sub-plantillas especificadas en los datos, también puede usar el código de plantilla escrito en la etiqueta del script especificando la cadena #id .

Código HTML:

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

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

* Ejecutar en entorno Node.js

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

Utilizado en el framework Express.js

En la versión de la serie 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; } });

En la versión de la serie 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); }); });

En la versión de la serie Express 4.x:

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

Precompile el archivo de plantilla en la línea de comando:

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

Configure el almacenamiento en caché externo para el motor de plantillas:

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 ejemplo completo

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