Documentación china de Juicer: JavaScript sobre fibra

Documentación china del exprimidor.

Última versión actual: 0.6.14

Juicer es un motor de plantillas de front-end (Javascript) liviano y eficiente. Con Juicer se pueden realizar la separación de datos y el modelo de vista (MVC) en su código. Además de esto, puede ejecutarse en el entorno Node.js.

Eres libre de utilizarlo y distribuirlo según los términos de 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 tiene algunas buenas sugerencias durante el uso, no dude en enviarlas a Github Issues .

origen del nombre

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

Introducción del exprimidor

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

* Instrucciones

> Compile la plantilla y renderice inmediatamente el resultado según los datos proporcionados.

1
juicer(tpl, data);

> Solo compila la plantilla sin renderizarla, devolverá una función compilada reutilizable.

1
var compiled_tpl = juicer(tpl);

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

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

> Personalizar los caracteres de límite de sintaxis de la plantilla. Los siguientes son los caracteres de límite predeterminados de Juicer. Puede utilizar esto para resolver el conflicto entre la sintaxis de la plantilla de Juicer y alguna sintaxis de la plantilla del lenguaje 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 predeterminada

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

La configuración predeterminada es la forma recomendada de usar Juicer. Si realmente necesita cambiar estos parámetros durante el uso, puede hacer esto:

Los parámetros cambian 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
};

De forma predeterminada, Juicer almacenará en caché la plantilla compilada para evitar el tiempo dedicado a compilaciones repetidas cuando la misma plantilla se procesa varias veces. Si no hay una necesidad especial, no se recomienda desactivar el caché en los parámetros predeterminados. invalidará la caché del Juicer, reduciendo así el rendimiento.

* gramática

a.${variable}

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

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

Demostremos 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 una función personalizada 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 ha escapado. Si usamos $${item|links} arriba, obtendremos el resultado esperado. Esta es la forma de evitar el escape que se mencionará a continuación.

Escapar/evitar escapar

Por razones de seguridad, ${变量}el contenido se escapará antes de la salida. Si no desea que se escape el resultado de la salida, puede utilizar $${变量}para evitar esta situación. Por ejemplo:

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

Si necesita recorrer una matriz, puede usarlo 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. Juez {@if}... {@else if}... {@else}... {@/if}

También nos encontramos a menudo en ocasiones en las que 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 {# Contenido del comentario}

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

1
{# 这里是注释内容}

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

El bucle auxiliar es un azúcar sintáctico cuidadosamente creado por Juicer para usted. Tal vez lo necesite en algunas situaciones.

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

F. Anidamiento de subplantillas {@include tpl, data}

El anidamiento de subplantillas le permite organizar el código de su plantilla de manera más flexible. Además de introducir subplantillas especificadas en los datos, por supuesto, también puede #idusar códigos de plantilla escritos en scriptetiquetas 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 entorno Node.js

1
2
3
4
5
6
在命令行中执行:
npm install juicer

在代码中这么引入:
var juicer = require('juicer');
var html = juicer(tpl, data);

Utilizado en el marco Express.js

En las versiones de la serie Express 2.x:

1
2
3
4
5
6
7
8npm 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 las versiones de la serie Express 3.x:

1
2
3
4
5
6
7
8
9
10
11npm 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 las versiones de la serie Express 4.x:

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

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

Guía de desarrollo

Módulo básico

objetos incorporados

módulo comunitario