Module communautaire génial
  1. page de garde
  2. module communautaire
  3. Documentation chinoise sur le presse-agrumes

Documentation chinoise sur le presse-agrumes

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 réaliser la séparation des données et du modèle de vue (MVC) dans votre code. En plus de cela, il peut s'exécuter dans l'environnement Node.js.

Vous êtes libre de l'utiliser et de le distribuer selon les termes de la licence MIT. Le code de Juicer est entièrement open source et hébergé sur Github . Si vous trouvez des bugs ou avez de bonnes suggestions lors de l'utilisation, n'hésitez pas à les soumettre sur Github Issues .

origine du nom

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

Introduction du presse-agrumes

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

* Instructions

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

1
juicer(tpl, data);

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

1
var compiled_tpl = juicer(tpl);

> Sur la base des 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);

> Enregistrez/désinscrivez 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');

> Personnalisez les caractères de limite de syntaxe du modèle. Voici les caractères de limite par défaut de Juicer. Vous pouvez l'utiliser pour résoudre le conflit entre la syntaxe du modèle Juicer et celle de certaines syntaxes de modèles de langage 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': '}'
});

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 manière recommandée d'utiliser Juicer. Si vous avez vraiment besoin de modifier ces paramètres pendant l'utilisation, vous pouvez le faire :

Les paramètres changent un par un :

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

Modifications des paramètres du 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 passé à une 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 déconseillé de désactiver le cache dans les paramètres par défaut. cela invalidera le cache de Juicer, réduisant ainsi les performances.

* grammaire

a. ${variable}

Utilisez pour ${}afficher la valeur de la variable, où _se trouve 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, telles que ${data|links}l'assemblage direct de données via des liens de fonctions personnalisés prédéfinis <a href=".." alt=".." />).

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

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

Après avoir exécuté le code ci-dessus, 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. C'est l'évitement de l'échappement qui sera mentionné ci-dessous.

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

Pour des raisons de sécurité, ${变量}le contenu sera échappé avant la sortie. Si vous ne souhaitez 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 parcourir un 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 actuelle de l'index pendant le processus de parcours.

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

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

Nous rencontrons également souvent des moments où 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. Commentaire {# Contenu du commentaire}

Pour la maintenabilité et la lisibilité du code ultérieur, 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 mis en place par Juicer pour vous. Vous en aurez peut-être besoin dans certaines situations.

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 bien sûr également #idutiliser des codes de modèle écrits dans scriptdes 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);

Utilisé dans le framework Express.js

Dans les versions 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 les versions 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 les versions 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èles :

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);
© Copyright 2012-2024 fibjs.org | Soutenez-nous