Juicer Chinese documentatie-JavaScript op glasvezel

Sapcentrifuge Chinese documentatie

Huidige nieuwste versie: 0.6.14

Juicer is een efficiënte, lichtgewicht front-end (Javascript) template-engine waarmee Juicer de scheiding van data en view-modellen (MVC) in uw code kan realiseren. Daarnaast kan het in de Node.js-omgeving worden uitgevoerd.

U bent vrij om het te gebruiken en te distribueren onder de voorwaarden van de MIT-licentie. De Juicer-code is volledig open source en wordt gehost op Github . Als u bugs tegenkomt of goede suggesties heeft tijdens het gebruik, kunt u deze indienen op Github Issues .

oorsprong van de naam

Als we gegevens vergelijken met vers en lekker fruit en sjablonen met water, is Juicer een sapcentrifuge die het fruit en het water in de HTML-codefragmenten perst die we nodig hebben.

Introductie van de sapcentrifuge

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

* Instructies

> Stel het sjabloon samen en render onmiddellijk het resultaat op basis van de opgegeven gegevens.

1
juicer(tpl, data);

> Compileer de sjabloon alleen zonder deze weer te geven; deze retourneert een herbruikbare gecompileerde functie.

1
var compiled_tpl = juicer(tpl);

> Voer op basis van de gegeven gegevens een gegevensweergave uit op de eerder samengestelde sjabloon.

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

> Aangepaste functies (objecten) registreren/deregistreren, er staan voorbeelden in ${variables} hieronder.

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

> Pas de grenstekens van de syntaxis van de sjabloon aan. Hieronder volgen de standaard grenstekens van Juicer. U kunt dit gebruiken om het conflict op te lossen tussen de syntaxis van de Juicer-sjabloon en de syntaxis van bepaalde backend-taalsjablonen.

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

Standaard parameterconfiguratie

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

De standaardconfiguratie is de aanbevolen manier om Juicer te gebruiken. Als u deze parameters tijdens het gebruik echt moet wijzigen, kunt u dit doen:

Parameterwijzigingen één voor één:

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

Batchparameterwijzigingen:

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

Standaard zal Juicer de gecompileerde sjabloon in de cache opslaan om de tijd te vermijden die wordt besteed aan herhaalde compilatie wanneer dezelfde sjabloon meerdere keren wordt weergegeven. Als er geen speciale noodzaak is, wordt het ten zeerste afgeraden om de cache uit te schakelen in de standaardparameters. zal de cache van de Juicer ongeldig maken, waardoor de prestaties afnemen.

* Grammatica

a. ${variabele}

Gebruik dit om ${}de variabelewaarde uit te voeren, waarbij _een verwijzing naar de gegevensbron staat (bijvoorbeeld ${_}vaak gebruikt als de gegevensbron een array is). Ondersteunt aangepaste functies (u kunt veel interessante functies bereiken via aangepaste functies, zoals ${data|links}het direct samenstellen van gegevens via vooraf gedefinieerde aangepaste functiekoppelingen <a href=".." alt=".." />).

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

Laten we het prachtige gebruik van aangepaste functies demonstreren aan de hand van een voorbeeld.

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); //Registreer een aangepaste functie juicer(tpl, json);

Na het uitvoeren van de bovenstaande code zullen we ontdekken dat het resultaat als volgt is:

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

Je kunt zien dat het resultaat is geëscaped. Als we hierboven $${item|links} gebruiken, krijgen we het verwachte resultaat. Dit is het vermijden van escapen dat hieronder wordt vermeld.

Ontsnappen/ontsnappen vermijden

Om veiligheidsredenen ${变量}wordt de inhoud ge-escaped voordat deze wordt uitgevoerd. Als u niet wilt dat het uitvoerresultaat wordt ge-escaped, kunt u dit gebruiken $${变量}om deze situatie te voorkomen. Bijvoorbeeld:

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. Loop door {@each} ... {@/each}

Als u een array moet doorlopen, kunt u deze als volgt gebruiken each.

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

Het is ook erg handig als u tijdens het doorloopproces de huidige indexwaarde wilt verkrijgen.

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

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

We komen ook vaak momenten tegen waarop we logische oordelen vellen over gegevens.

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. Commentaar {# Commentaarinhoud}

Voor de onderhoudbaarheid en leesbaarheid van de daaropvolgende code kunnen we opmerkingen aan de sjabloon toevoegen.

1
{# 这里是注释内容}

e. Hulplus {@elke i binnen bereik(m, n)}

De hulplus is een syntactische suiker die zorgvuldig door Juicer voor u is samengesteld en die u in sommige situaties misschien nodig heeft.

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

f. Nesten van subsjablonen {@include tpl, data}

Met het nesten van subsjablonen kunt u uw sjablooncode flexibeler indelen. Naast het introduceren van subsjablonen die in de gegevens zijn gespecificeerd, kunt u natuurlijk ook #idsjablooncodes gebruiken die in scripttags zijn geschreven door strings op te geven.

HTML code:

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

JavaScript-code:

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

* Uitvoeren in Node.js-omgeving

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

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

Gebruikt in het Express.js-framework

In versies van de Express 2.x-serie:

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

In versies van de Express 3.x-serie:

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

In releases van de Express 4.x-serie:

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

Sjabloonbestanden vooraf compileren op de opdrachtregel:

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

Stel externe cacheopslag in voor de sjabloonengine:

1
2
3
4
5
var juicer = require('juicer');
var LRUCache = require('lru-native');
var cache = new LRUCache({ maxElements: 1000 });

juicer.set('cachestore', cache);

* Een compleet voorbeeld

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

Ontwikkelingsgids

Basismodule

ingebouwde objecten

gemeenschapsmodule