Documentazione cinese spremiagrumi

Ultima versione corrente: 0.6.14

Juicer è un motore di modelli front-end (Javascript) efficiente e leggero, l'utilizzo di Juicer può essere il tuo codice per ottenere la separazione dei dati e il modello di visualizzazione (MVC). Inoltre, può anche essere eseguito in un ambiente Node.js.

Sei libero di usarlo e distribuirlo purché rispetti la licenza MIT. Il codice di Juicer è completamente open source e ospitato su Github .Se trovi bug o qualche buon suggerimento nel processo di utilizzo, puoi inviarli su Github Issue .

origine del nome

Se pensiamo ai dati come frutta fresca e gustosa e modelli come acqua, Juicer è lo spremiagrumi che spreme la frutta e l'acqua dagli snippet HTML di cui abbiamo bisogno.

Introduzione di spremiagrumi

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

* Istruzioni

> Compilare il modello e rendere immediatamente il risultato in base ai dati forniti.

1
juicer(tpl, data);

> Basta compilare il modello e non eseguirne il rendering, restituirà una funzione compilata riutilizzabile.

1
var compiled_tpl = juicer(tpl);

> In base ai dati forniti, rendering dei dati del modello precedentemente compilato.

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

> Registra/annulla la registrazione di funzioni personalizzate (oggetti), ci saranno istanze in ${variable} di seguito.

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

> Delimitatore della sintassi del modello personalizzato, di seguito è riportato il delimitatore predefinito di Juicer. Puoi usarlo per risolvere le situazioni in cui la sintassi del modello Juicer è in conflitto con la sintassi del modello del linguaggio di back-end.

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

Configurazione parametri di default

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

La configurazione predefinita è la modalità consigliata per l'utilizzo di Juicer. Se hai davvero bisogno di modificare questi parametri durante l'uso, puoi farlo:

Modifica parametro per parametro:

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

Modifiche di massa ai parametri:

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

Juicer memorizzerà nella cache il modello compilato per impostazione predefinita, in modo da evitare il tempo di compilazione ripetuto quando lo stesso modello viene renderizzato più volte.Se non ce n'è bisogno speciale, si sconsiglia vivamente di chiudere la cache nei parametri predefiniti. invalidare la cache Juicer, riducendo così le prestazioni.

* grammatica

a. ${variabile}

Utilizzare per ${}restituire il valore della variabile, dove _è un riferimento all'origine dati (ad esempio ${_}, spesso utilizzato quando l'origine dati è una matrice). Supporta funzioni personalizzate (è possibile implementare molte funzioni interessanti tramite funzioni personalizzate, ad ${data|links}esempio è possibile assemblare dati direttamente tramite collegamenti a funzioni personalizzate predefinite <a href=".." alt=".." />).

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

Dimostriamo il meraviglioso uso delle funzioni personalizzate con un esempio.

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); //registra la funzione personalizzata juicer(tpl, json);

Dopo aver eseguito il codice sopra, troveremo che il risultato è il seguente:

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

Si può vedere che il risultato è sfuggito Se usiamo $${item|links} sopra, otterremo il risultato che ci aspettiamo, che è l'escape escape menzionato di seguito.

scappare/evitare di scappare

Per motivi di sicurezza, ${变量}verrà eseguito l'escape del contenuto prima dell'output. Se non si desidera eseguire l'escape dell'output, è $${变量}possibile evitarlo. Per esempio:

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

Se hai bisogno di scorrere l'array, puoi usarlo in questo modo each.

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

È anche molto conveniente se si desidera ottenere il valore dell'indice corrente durante il processo di attraversamento.

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

c. A giudicare {@if} ... {@else if} ... {@else} ... {@/if}

Spesso incontriamo anche il momento in cui esprimiamo giudizi logici sui dati.

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. Commenta {# contenuto del commento}

Per la manutenibilità e leggibilità del codice successivo, possiamo aggiungere commenti al modello.

1
{# 这里是注释内容}

e. Ciclo ausiliario {@each i in range(m, n)}

I loop ausiliari sono uno zucchero sintattico che Juicer ha preparato con cura per te, forse ne avrai bisogno in alcune situazioni.

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

f. Annidamento dei modelli secondari {@include tpl, data}

L'annidamento dei sottomodelli ti consente di organizzare il codice del tuo modello in modo più flessibile Oltre a importare i sottomodelli specificati nei dati, ovviamente, puoi anche #idutilizzare i codici dei modelli scritti nei scripttag specificando delle stringhe.

Codice HTML:

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

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

* Viene eseguito in un ambiente Node.js

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

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

Utilizzare nel framework Express.js

Nelle versioni della 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;
    }
});

Nelle versioni della 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);
    });
});

Nelle versioni della serie Express 4.x:

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

Precompilare i file modello sulla riga di 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` 可以获得更多帮助信息。

Configurare l'archiviazione cache esterna per il motore del modello:

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

Guida allo sviluppo

modulo base

oggetti incorporati

modulo comunitario