Documentació xinesa de Juicer-JavaScript en fibra

Documentació xinesa de Juicer

Darrera versió actual: 0.6.14

Juicer és un motor de plantilles d'interfície (Javascript) eficient i lleuger. Si feu servir Juicer, podeu realitzar la separació de dades i el model de visualització (MVC) al vostre codi. A més d'això, es pot executar a l'entorn Node.js.

Sou lliure d'utilitzar-lo i distribuir-lo sota els termes de la llicència MIT. El codi de Juicer és completament de codi obert i allotjat a Github . Si trobeu algun error o teniu alguns bons suggeriments durant l'ús, no dubteu a enviar-los a Github Issues .

origen del nom

Si comparem dades amb fruita fresca i deliciosa i plantilles amb aigua, Juicer és un espremedor que esprem la fruita i l'aigua als fragments de codi HTML que necessitem.

Introducció de Juicer

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

* Instruccions

> Compileu la plantilla i visualitzeu immediatament el resultat en funció de les dades proporcionades.

1
juicer(tpl, data);

> Només compileu la plantilla sense representar-la, retornarà una funció compilada reutilitzable.

1
var compiled_tpl = juicer(tpl);

> A partir de les dades proporcionades, realitzeu la representació de dades a la plantilla compilada prèviament.

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

> Registreu/anul·leu el registre de funcions personalitzades (objectes), hi haurà exemples a ${variables} a continuació.

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

> Personalitza els caràcters de límit de sintaxi de la plantilla. Els següents són els caràcters de límit predeterminats de Juicer. Podeu utilitzar-ho per resoldre el conflicte entre la sintaxi de la plantilla de Juicer i la sintaxi d'alguna de la plantilla del 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ó per defecte és la forma recomanada d'utilitzar Juicer. Si realment necessiteu canviar aquests paràmetres durant l'ús, podeu fer això:

Els paràmetres canvien un per un:

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

Canvis dels paràmetres del lot:

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

De manera predeterminada, Juicer emmagatzemarà a la memòria cau la plantilla compilada per evitar el temps dedicat a la compilació repetida quan la mateixa plantilla es renderitza diverses vegades. Si no hi ha cap necessitat especial, no es recomana desactivar la memòria cau amb els paràmetres predeterminats. invalidarà la memòria cau del Juicer, reduint així el rendiment.

* gramàtica

a. ${variable}

Utilitzeu-lo per ${}generar el valor de la variable, on _és una referència a la font de dades (per exemple ${_}, s'utilitza sovint quan la font de dades és una matriu). Admet funcions personalitzades (pots aconseguir moltes funcions interessants mitjançant funcions personalitzades, com ara ${data|links}l'acoblament de dades directament mitjançant enllaços de funcions personalitzades predefinides <a href=".." alt=".." />).

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

Demostrem el meravellós ús de les funcions personalitzades mitjançant 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); //Registreu una funció personalitzada juicer(tpl, json);

Després d'executar el codi anterior, trobarem que el resultat és el següent:

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 el resultat s'escapa. Si fem servir $${item|links} més amunt, obtindrem el resultat esperat. Aquest és l'evitació d'escapament que s'esmentarà a continuació.

Fugir/evitar escapar

Per motius de seguretat, ${变量}el contingut s'escaparà abans de la sortida. Si no voleu que s'escape el resultat de la sortida, podeu utilitzar $${变量}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. Recorre {@each}... {@/each}

Si necessiteu fer un bucle per una 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. Jutge {@if} ... {@else if} ... {@else} ... {@/if}

També ens trobem sovint amb moments en què 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. Comenta {# Contingut del comentari}

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

1
{# 这里是注释内容}

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

El bucle auxiliar és un sucre sintàctic configurat acuradament per Juicer per a vostè. Potser el necessitareu en algunes situacions.

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

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

La nidificació de subplantilles us permet organitzar el vostre codi de plantilla de manera més flexible. A més d'introduir subplantilles especificades a les dades, per descomptat també podeu #idutilitzar codis de plantilla escrits en scriptetiquetes 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 a l'entorn Node.js

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

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

S'utilitza al framework Express.js

A les versions de la sèrie 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;
    }
});

A les versions de la sèrie 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);
    });
});

A les versions 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);

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

Guia de desenvolupament

Mòdul bàsic

objectes incorporats

mòdul comunitari