Módulo de comunidad impresionante

Exprimidor Documento chino

Última versión actual: 0.6.14

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

Puede usarlo y distribuirlo libremente 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 algunas buenas sugerencias durante el uso, envíelo en Github Issue .

origen del nombre

Si comparamos los datos con frutas frescas y deliciosas, y vemos las plantillas 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 y renderice inmediatamente el resultado en función de los datos proporcionados.

1
juicer(tpl, data);

> Solo no se renderizará la plantilla compilada, devolverá una función compilada reutilizable.

1
var compiled_tpl = juicer(tpl);

> Realice la renderización de datos en la plantilla previamente compilada de acuerdo con los datos proporcionados.

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

> Registrar / anular el registro de funciones personalizadas (objetos), habrá ejemplos en $ {variables} 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 el conflicto entre la sintaxis de la plantilla de Juicer y alguna sintaxis de la plantilla de lenguaje de backend.

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

La configuración predeterminada es el método de uso recomendado por Juicer. Si realmente necesita cambiar estos parámetros durante el uso, puede hacer esto:

Cambie los parámetros uno por uno:

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

Cambios de parámetros por lotes:

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

Juicer almacenará en caché la plantilla compilada de forma predeterminada, para evitar el tiempo consumido por la compilación repetida cuando la misma plantilla se procesa varias veces. Si no hay una necesidad especial, se recomienda encarecidamente no desactivar la caché en los parámetros predeterminados. Si lo hace, invalidará la caché de Juicer y, por lo tanto, reducirá el rendimiento.

* Gramática

a. $ {variables}

Usando el ${}valor de la variable de salida, que _es una referencia a una fuente de datos (por ejemplo ${_}, como se usa comúnmente en el caso donde la matriz de la fuente de datos). Soporte para funciones personalizadas (función personalizada puede lograr una gran cantidad de características interesantes, similar a través de la ${data|links}que puede dirigir a los datos ensamblados por una función personalizada enlaces previamente definidos <a href=".." alt=".." />).

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

Demostremos el maravilloso uso de las 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 una función personalizada juicer (tpl, json);

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

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 es un escape. Si usamos $$ {item | links} arriba, obtendremos el resultado esperado, que es evitar el escape mencionado a continuación.

Escapar / Evitar Escapar

Por motivos de seguridad, ${变量}escapará de su contenido antes de la salida, si no desea que la salida se escape, puede utilizar $${变量}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. Recorrido de bucle {@each} ... {@ / each}

Si necesita recorrer la matriz, puede usarla así each.

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

También es muy 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 nos encontramos a menudo cuando hacemos 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. Comentar {# Comment content}

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

1
{# 这里是注释内容}

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

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

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

f. Anidación de subplantillas {@include tpl, data}

El anidamiento de sub-plantillas le permite organizar su código de plantilla de manera más flexible. Además de importar sub-plantillas especificadas en los datos, también puede #idutilizar scriptel código de plantilla escrito en etiquetas especificando cadenas .

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 el entorno Node.js

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

Usar en el marco 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 archivos 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 de 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);