Module communautaire génial

Presse-agrumes Document chinois

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 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 réserve de respecter la licence MIT. Le code de Juicer est entièrement open source et hébergé sur Github . Si vous trouvez des bugs ou de bonnes suggestions dans le processus d'utilisation, vous pouvez les soumettre sur Github Issue .

origine du nom

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

Présentation de l'extracteur de jus

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

* Instructions

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

1
juicer(tpl, data);

> Seul le template compilé ne sera pas rendu, 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 fournies.

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

> Enregistrer/désenregistrer des fonctions personnalisées (objets), il y aura des exemples dans ${variables} 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 du modèle Juicer et la syntaxe du 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 la méthode d'utilisation recommandée par Juicer. Si vous avez vraiment besoin de modifier ces paramètres en cours d'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 de lot :

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

Par défaut, Juicer mettra en cache le modèle compilé pour éviter le temps consommé par la 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. invalidera le cache Juicer, réduisant ainsi les performances.

* grammaire

a. ${variables}

Utilisation de la ${}valeur de la variable de sortie, qui _est une référence à une source de données (par exemple ${_}, comme couramment utilisé dans le cas où le tableau de la source de données). Prise en charge des fonctions personnalisées (fonction personnalisée, vous pouvez obtenir de nombreuses fonctionnalités intéressantes, de la même manière que ${data|links}vous pouvez diriger vers les données assemblées par une fonction personnalisée des liens précédemment définis <a href=".." alt=".." />).

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

Démontrons la merveilleuse utilisation 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 une 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, qui est l'évitement de l'échappement mentionné ci-dessous.

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

Pour l'angle de sécurité, ${变量}il échappera à son contenu avant la sortie, si vous ne voulez pas que la sortie s'échappe, 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. Parcours de la boucle {@each} ... {@/each}

Si vous devez parcourir le tableau, vous pouvez l'utiliser comme ceci each.

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

C'est également très pratique si vous souhaitez obtenir la valeur d'index actuelle pendant le processus de 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 lorsque nous portons 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 {# Contenu du commentaire}

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

1
{# 这里是注释内容}

e. Boucle auxiliaire {@each i in range(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èle {@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'importer les sous-modèles spécifiés dans les données, vous pouvez également #idutiliser scriptle code du modèle écrit dans les balises en spécifiant des chaînes .

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