Juicer Chinese Document-JavaScript on Fiber

Documento cinese spremiagrumi

Ultima versione corrente: 0.6.14

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

Puoi usarlo e distribuirlo liberamente con la premessa di osservare la licenza MIT. Il codice di Juicer è completamente open source e ospitato su Github Se trovi qualche bug o qualche buon suggerimento nel processo di utilizzo, puoi inviarlo su Github Issue .

origine del nome

Se confrontiamo i dati con frutti freschi e deliziosi e vediamo i modelli come acqua, Juicer è uno spremiagrumi che spreme frutta e acqua dai frammenti di codice HTML di cui abbiamo bisogno.

Introduzione di Juicer

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

> Solo il modello compilato non verrà visualizzato, restituirà una funzione compilata riutilizzabile.

1
var compiled_tpl = juicer(tpl);

> Eseguire il rendering dei dati sul modello precedentemente compilato secondo i dati forniti.

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

> Registra/cancella funzioni personalizzate (oggetti), ci saranno esempi in ${variabili} di seguito.

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

> Carattere di confine della sintassi del modello personalizzato, di seguito è riportato il carattere di confine predefinito di Juicer. Puoi usarlo per risolvere il conflitto tra la sintassi del modello Juicer e la sintassi di alcuni modelli di lingua di 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': '}'
});

Configurazione dei parametri di default

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

La configurazione predefinita è il metodo di utilizzo consigliato da Juicer.Se hai davvero bisogno di modificare questi parametri durante l'uso, puoi farlo:

Modificare i parametri uno per uno:

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

Modifiche ai parametri batch:

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

Per impostazione predefinita, Juicer memorizzerà nella cache il modello compilato per evitare il tempo impiegato dalla compilazione ripetuta quando lo stesso modello viene visualizzato più volte.Se non c'è una necessità particolare, si consiglia vivamente di non disattivare la cache nei parametri predefiniti. invaliderà la cache di Juicer, riducendo così le prestazioni.

* grammatica

a. ${variabili}

Utilizzando il ${}valore della variabile di output, che _è un riferimento a un'origine dati (ad esempio ${_}, come comunemente usato nel caso in cui l'array dell'origine dati). Supporto per funzioni personalizzate (funzione personalizzata è possibile ottenere molte funzionalità interessanti, in modo simile ${data|links}è possibile indirizzare ai dati assemblati da una funzione personalizzata collegamenti precedentemente definiti <a href=".." alt=".." />).

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

Dimostriamo il meraviglioso utilizzo delle funzioni personalizzate attraverso 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 una funzione personalizzata juicer(tpl, json);

Dopo aver eseguito il codice sopra, scopriremo che il risultato è simile a questo:

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 è l'escape.Se usiamo $${item|links} sopra, otterremo il risultato atteso, che è l'evitare l'escape menzionato di seguito.

Scappare/Evitare la fuga

Per l'angolo di sicurezza, ${变量}verrà eseguito l'escape del suo contenuto prima dell'output, se non si desidera che l'output venga sfuggito, è possibile utilizzare $${变量}per evitare questa situazione. 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. Attraversamento loop {@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. Giudizio {@if} ... {@else if} ... {@else} ... {@/if}

Incontriamo spesso anche quando 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. Commento {# Contenuto del commento}

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

1
{# 这里是注释内容}

e. Circuito ausiliario {@ogni i nell'intervallo(m, n)}

Il ciclo ausiliario è uno zucchero sintattico impostato con cura da Juicer per te, forse ne avrai bisogno in una certa situazione.

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

f. Annidamento di sottomodelli {@include tpl, data}

L'annidamento dei sottomodelli ti consente di organizzare il codice del modello in modo più flessibile. Oltre a importare i sottomodelli specificati nei dati, puoi anche #idutilizzare scriptil codice del modello scritto nei tag specificando le 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'
    }
});

* Esegui nell'ambiente Node.js

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

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

Utilizzo nel framework Express.js

Nella versione 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;
    }
});

Nella versione 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);
    });
});

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

Configura l'archiviazione cache esterna per il motore dei modelli:

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