Module communautaire génial

Documentation de Juicer Chinese

Dernière version actuelle: 0.6.14

Juicer est un moteur de modèle frontal (Javascript) efficace et léger. L'utilisation de Juicer peut être votre code pour réaliser la séparation des données et afficher le modèle (MVC). De plus, il peut également s'exécuter dans l'environnement Node.js.

Vous êtes libre de l'utiliser et de le distribuer sous réserve de respecter la licence MIT. Le code Juicer est complètement open source et hébergé sur Github . Si vous trouvez des bugs ou de bonnes suggestions pendant le processus d'utilisation, veuillez les soumettre sur le problème Github .

origine du nom

Si nous comparons les données à des fruits frais et délicieux, et considérons le modèle comme de l'eau, Juicer est un presse-agrumes qui extrait le fruit et l'eau des fragments de code HTML dont nous avons besoin.

Introduction de Juicer

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

* Instructions

> Compilez le modèle et affichez immédiatement les résultats en fonction des données fournies.

1
juicer(tpl, data);

> Compilez uniquement le modèle sans rendu, il retournera une fonction compilée réutilisable.

1
var compiled_tpl = juicer(tpl);

> Selon les données fournies, effectuez le rendu des données sur le modèle précédemment compilé.

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

> Enregistrer / désinscrire des fonctions personnalisées (objets), il y aura des instances dans $ {variable} ci-dessous.

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

> Caractère de limite de syntaxe de modèle personnalisé, ci-dessous est le caractère de limite par défaut de Juicer. Vous pouvez l'utiliser pour résoudre des situations où la syntaxe du modèle Juicer entre en conflit avec une syntaxe de modèle de langage principal.

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

Configuration des paramètres par défaut

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

La configuration par défaut est recommandée par Juicer. Si vous devez modifier ces paramètres pendant l'utilisation, vous pouvez le faire:

Changement de paramètre par paramètre:

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

Modifications des paramètres de lot:

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

Juicer mettra en cache le modèle compilé par défaut, afin d'éviter le temps nécessaire pour répéter la compilation lors du rendu de plusieurs données du même modèle. S'il n'y a pas de besoin particulier, il est fortement déconseillé de désactiver le cache dans les paramètres par défaut. Cela invalidera le cache Juicer. Cela réduit les performances.

* Grammaire

a. $ {variable}

Utilisez ${} afficher la valeur de la variable, où _ est une référence à la source de données (telle que ${_} , qui est souvent utilisée lorsque la source de données est un tableau). Prend en charge les fonctions personnalisées (vous pouvez obtenir de nombreuses fonctions intéressantes grâce à des fonctions personnalisées, similaires à ${data|links} vous pouvez assembler directement les données <a href=".." alt=".." /> via des liens de fonction personnalisés prédéfinis <a href=".." alt=".." /> ).

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

Montrons l'utilisation merveilleuse des fonctions personnalisées à travers 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); // Enregistrer la fonction personnalisée juicer (tpl, json);

Une fois le code ci-dessus exécuté, nous constaterons que le résultat est le suivant:

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

On peut voir que le résultat est échappé. Si nous utilisons $$ {item | links} ci-dessus, nous obtiendrons le résultat attendu. Ceci est l'évitement de l'évasion mentionné ci-dessous.

Échapper / éviter l'évasion

Pour des raisons de sécurité, ${变量} va échapper le contenu avant la sortie. Si vous ne voulez pas que la sortie soit échappée, vous pouvez utiliser $${变量} pour éviter cette situation. Par 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. Parcourez {@each} ... {@ / each}

Si vous avez besoin de boucle à travers le réseau, vous pouvez utiliser each comme ça.

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

Il est également pratique si vous souhaitez obtenir la valeur d'index actuelle pendant le processus de traversée.

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

c. Jugement {@if} ... {@else if} ... {@else} ... {@ / if}

Nous rencontrons également souvent le temps de porter des jugements logiques sur les données.

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. Commentaire {# content content}

Pour la maintenabilité et la lisibilité du code suivant, nous pouvons ajouter des commentaires au modèle.

1
{# 这里是注释内容}

e. Boucle auxiliaire {@chaque i dans la plage (m, n)}

La boucle auxiliaire est un sucre syntaxique soigneusement défini par Juicer pour vous, peut-être en aurez-vous besoin dans une certaine situation.

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

f. Imbrication de sous-modèles {@include tpl, data}

L'imbrication de sous-modèles vous permet d'organiser votre code de modèle de manière plus flexible. En plus d'introduire des sous-modèles spécifiés dans les données, vous pouvez également utiliser le code de modèle écrit dans la balise de script en spécifiant la chaîne #id .

Code HTML:

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

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

* Exécuter dans un environnement Node.js

1 2 3 4 5 6
在命令行中执行: npm install juicer 在代码中这么引入: var juicer = require('juicer'); var html = juicer(tpl, data);

Utilisé dans le framework Express.js

Dans la version Express 2.x series:

1 2 3 4 5 6 7 8
npm install juicer var juicer = require('juicer'); app.set('view engine', 'html'); app.register('.html', { compile: function(str, options) { return juicer.compile(str, options).render; } });

Dans la version Express 3.x series:

1 2 3 4 5 6 7 8 9 10 11
npm 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); }); });

Dans la version série Express 4.x:

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

Précompilez le fichier modèle sur la ligne de commande:

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

Configurez le stockage de cache externe pour le moteur de modèle:

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