Juicer Chinese Documentation-JavaScript on Fiber

Documentación de Juicer Chinese

Última versión actual: 0.6.14

Juicer é un motor de modelos de interface (Javascript) eficiente e lixeiro. Usar Juicer pode realizar a separación de datos e modelos de visualización (MVC) no teu código. Ademais disto, pode executarse no ambiente Node.js.

Vostede é libre de usalo e distribuílo baixo os termos da Licenza MIT. O código de Juicer é completamente de código aberto e está aloxado en Github . Se atopas algún erro ou tes boas suxestións durante o uso, non dubides en envialos en Github Issues .

orixe do nome

Se comparamos os datos con froitas frescas e deliciosas e modelos con auga, Juicer é un espremedor que espreme a froita e a auga nos fragmentos de código HTML que necesitamos.

Introdución de Juicer

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

*Instrucións

> Compile o modelo e inmediatamente render o resultado en función dos datos proporcionados.

1
juicer(tpl, data);

> Compile só o modelo sen renderizalo, devolverá unha función compilada reutilizable.

1
var compiled_tpl = juicer(tpl);

> A partir dos datos proporcionados, realice a representación de datos no modelo compilado previamente.

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

> Rexistrar/anular o rexistro de funcións personalizadas (obxectos), a continuación haberá exemplos en ${variables}.

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

> Personaliza os caracteres de límite de sintaxe do modelo. Os seguintes son os caracteres de límite predeterminados de Juicer. Podes usar isto para resolver o conflito entre a sintaxe do modelo de Juicer e algunha sintaxe do modelo da linguaxe 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]
}

A configuración predeterminada é a forma recomendada de usar Juicer. Se realmente necesitas cambiar estes parámetros durante o uso, podes facelo:

Os parámetros cambian un por un:

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

Cambios de parámetros do lote:

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

De forma predeterminada, Juicer almacenará na caché o modelo compilado para evitar o tempo dedicado á compilación repetida cando o mesmo modelo se representa varias veces. Se non hai necesidade especial, non se recomenda encarecidamente desactivar a caché nos parámetros predeterminados. invalidará a caché de Juicer, reducindo así o rendemento.

* gramática

a. ${variable}

Utilízase para ${}emitir o valor da variable, onde _é unha referencia á fonte de datos (por exemplo ${_}, úsase a miúdo cando a fonte de datos é unha matriz). Admite funcións personalizadas (podes conseguir moitas funcións interesantes a través de funcións personalizadas, como ${data|links}reunir directamente datos mediante ligazóns de funcións personalizadas predefinidas <a href=".." alt=".." />).

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

Demostramos o marabilloso uso das funcións personalizadas a través dun exemplo.

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

Despois de executar o código anterior, descubriremos que o resultado é o seguinte:

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

Pódese ver que o resultado é escapado. Se usamos $${item|links} arriba, obteremos o resultado esperado. Esta é a evitación de escapar que se mencionará a continuación.

Fuxir/evitar escapar

Por motivos de seguridade, ${变量}o contido escaparase antes da saída. Se non queres que se escape o resultado da saída, podes utilizar $${变量}para evitar esta situación. Por exemplo:

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

Se precisas pasar por unha matriz, podes usala así each.

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

Tamén é moi conveniente se queres obter o valor do índice actual durante o proceso de percorrido.

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

c. Xuíz {@if} ... {@else if} ... {@else} ... {@/if}

Tamén adoitamos atopar momentos nos que facemos xuízos lóxicos sobre os 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 {# Contido do comentario}

Para manter e lexibilidade do código posterior, podemos engadir comentarios ao modelo.

1
{# 这里是注释内容}

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

O bucle auxiliar é un azucre sintáctico configurado coidadosamente por Juicer para ti. Quizais o necesites nalgunhas situacións.

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

f. Anidamento de submodelos {@include tpl, data}

A agrupación de submodelos permítelle organizar o código do modelo de forma máis flexible. Ademais de introducir submodelos especificados nos datos, por suposto que tamén pode #idutilizar códigos de modelo escritos en scriptetiquetas especificando cadeas.

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

* Executar no entorno Node.js

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

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

Usado no framework Express.js

Nas versións da 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;
    }
});

Nas versións da 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);
    });
});

Nas versións da serie Express 4.x:

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

Precompilar ficheiros de modelos na liña de comandos:

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

Configura o almacenamento de caché externo para o motor de modelos:

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 exemplo 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 desenvolvemento

Módulo básico

obxectos incorporados

módulo comunitario