Module communautaire génial

Document chinois Juicer

Dernière version actuelle: 0.6.14

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

Vous pouvez l'utiliser et le distribuer librement sous le principe de respecter la licence MIT. Le code de Juicer est entièrement open source et hébergé sur Github . Si vous trouvez des bogues ou de bonnes suggestions lors de l'utilisation, veuillez les soumettre sur Github Issue .

origine du nom

Si nous comparons les données à des fruits frais et délicieux, et le modèle en tant qu'eau, Juicer est un presse-agrumes qui extrait les fruits 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 le résultat immédiatement en fonction des données fournies.

1
juicer(tpl, data);

> Seul le modèle compilé ne sera pas rendu temporairement, il renverra une fonction compilée réutilisable.

1
var compiled_tpl = juicer(tpl);

> Effectuer le rendu des données sur le modèle précédemment compilé en fonction des données données.

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

> Enregistrer / désenregistrer la fonction personnalisée (objet), il y aura des exemples 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 le conflit entre la syntaxe de modèle de Juicer et une syntaxe de modèle de langage d'arrière-plan.

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 avez vraiment besoin de modifier ces paramètres pendant l'utilisation, vous pouvez le faire:

Modifiez les paramètres un par un:

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

Modifications des paramètres par lots:

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 de compilation répétée lorsque le même modèle est rendu plusieurs fois. S'il n'y a pas de besoin particulier, il est fortement recommandé de ne pas désactiver le cache dans les paramètres par défaut. Cela invalidera le cache Juicer. Réduisant ainsi les performances.

* Grammaire

a. $ {variables}

Utilisez ${} générer des valeurs de variable, où _ est une référence à la source de données (par exemple, ${_} souvent utilisé 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 directement assembler des données via des liens de fonctions personnalisées prédéfinies <a href=".." alt=".." /> ).

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

Laissez-nous vous démontrer 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 trouverons 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, ce qui évite l'échappement mentionné ci-dessous.

S'échapper / éviter de s'échapper

Pour des raisons de sécurité, ${变量} échappera à son contenu avant la sortie. Si vous ne voulez pas que le résultat de la sortie soit échappé, 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 très pratique si vous souhaitez obtenir la valeur d'index actuelle pendant le parcours.

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

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

Nous rencontrons également souvent 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. Commenter {# Comment content}

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

1
{# 这里是注释内容}

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

La boucle auxiliaire est un sucre syntaxique soigneusement réglé 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 le code de votre 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 l'environnement Node.js

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

Utilisation dans le framework Express.js

Dans la version de la série Express 2.x:

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 de la série Express 3.x:

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

Pré-compilez les fichiers modèles 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);