Entsafter chinesische Dokumentation

Aktuelle neueste Version: 0.6.14

Juicer ist eine effiziente, leichte Front-End-Vorlagen-Engine (Javascript). Mit Juicer können Sie die Trennung von Daten und Ansichtsmodellen (MVC) in Ihrem Code realisieren. Darüber hinaus kann es in der Node.js-Umgebung ausgeführt werden.

Es steht Ihnen frei, es gemäß den Bedingungen der MIT-Lizenz zu verwenden und zu verbreiten. Der Juicer-Code ist vollständig Open Source und wird auf Github gehostet. Wenn Sie während der Verwendung Fehler finden oder gute Vorschläge haben, können Sie diese gerne auf Github Issues einreichen .

Herkunft des Namens

Wenn wir Daten mit frischem und köstlichem Obst und Vorlagen mit Wasser vergleichen, ist Juicer ein Entsafter, der Obst und Wasser in die von uns benötigten HTML-Codeschnipsel presst.

Einführung von Juicer

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

* Anweisungen

> Kompilieren Sie die Vorlage und rendern Sie sofort das Ergebnis basierend auf den angegebenen Daten.

1
juicer(tpl, data);

> Kompilieren Sie die Vorlage nur, ohne sie zu rendern. Dadurch wird eine wiederverwendbare kompilierte Funktion zurückgegeben.

1
var compiled_tpl = juicer(tpl);

> Führen Sie basierend auf den angegebenen Daten ein Datenrendering für die zuvor kompilierte Vorlage durch.

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

> Benutzerdefinierte Funktionen (Objekte) registrieren bzw. die Registrierung aufheben. Beispiele finden Sie unten in ${variables}.

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

> Passen Sie die Grenzzeichen der Vorlagensyntax an. Im Folgenden sind die Standard-Grenzzeichen von Juicer aufgeführt. Sie können dies verwenden, um den Konflikt zwischen der Juicer-Vorlagensyntax und der Syntax einiger Backend-Sprachvorlagen zu lösen.

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

Standardparameterkonfiguration

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

Die Standardkonfiguration ist die empfohlene Art, Juicer zu verwenden. Wenn Sie diese Parameter während der Verwendung wirklich ändern müssen, können Sie Folgendes tun:

Parameteränderungen nacheinander:

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

Änderungen der Batch-Parameter:

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

Standardmäßig speichert Juicer die kompilierte Vorlage im Cache, um den Zeitaufwand für die wiederholte Kompilierung zu vermeiden, wenn dieselbe Vorlage mehrmals gerendert wird. Wenn kein besonderer Bedarf besteht, wird dringend davon abgeraten, den Cache in den Standardparametern zu deaktivieren. Tun Sie dies macht den Juicer-Cache ungültig und verringert dadurch die Leistung.

* Grammatik

a. ${variable}

Wird verwendet, um ${}den Variablenwert auszugeben, wobei _es sich um einen Verweis auf die Datenquelle handelt (wird beispielsweise ${_}häufig verwendet, wenn die Datenquelle ein Array ist). Unterstützt benutzerdefinierte Funktionen (Sie können viele interessante Funktionen durch benutzerdefinierte Funktionen erreichen, z. B. ${data|links}das direkte Zusammenstellen von Daten über vordefinierte benutzerdefinierte Funktionslinks <a href=".." alt=".." />).

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

Lassen Sie uns die wunderbare Verwendung benutzerdefinierter Funktionen anhand eines Beispiels demonstrieren.

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); //Eine benutzerdefinierte Funktion registrieren Juicer(tpl, json);

Nachdem wir den obigen Code ausgeführt haben, werden wir feststellen, dass das Ergebnis wie folgt aussieht:

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

Es ist ersichtlich, dass das Ergebnis maskiert ist. Wenn wir oben $${item|links} verwenden, erhalten wir das erwartete Ergebnis. Dies ist die Vermeidung von Escapezeichen, die weiter unten erwähnt wird.

Flucht/Flucht vermeiden

Aus Sicherheitsgründen ${变量}wird der Inhalt vor der Ausgabe maskiert. Wenn Sie nicht möchten, dass das Ausgabeergebnis maskiert wird, können Sie $${变量}diese Situation vermeiden. Zum Beispiel:

1
2
3
4
5
6
7
8
9
var json = {
    value: '<strong>juicer</strong>'
};

var escape_tpl='${value}';
var unescape_tpl='$${value}';

juicer(escape_tpl, json); //输出 '<strong>juicer</strong>'
juicer(unescape_tpl, json); //输出 '<strong>juicer</strong>'

b. Schleife durch {@each} ... {@/each}

Wenn Sie ein Array durchlaufen müssen, können Sie es wie folgt verwenden each.

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

Dies ist auch sehr praktisch, wenn Sie während des Durchlaufvorgangs den aktuellen Indexwert abrufen möchten.

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

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

Wir erleben auch oft Zeiten, in denen wir Daten logisch beurteilen.

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. Kommentar {# Kommentarinhalt}

Für die Wartbarkeit und Lesbarkeit des nachfolgenden Codes können wir der Vorlage Kommentare hinzufügen.

1
{# 这里是注释内容}

e. Hilfsschleife {@each i in range(m, n)}

Die Hilfsschleife ist ein syntaktischer Zucker, der von Juicer sorgfältig für Sie eingerichtet wurde. Vielleicht werden Sie ihn in manchen Situationen benötigen.

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

f. Untervorlagenverschachtelung {@include tpl, data}

Durch die Verschachtelung von Untervorlagen können Sie Ihren Vorlagencode flexibler organisieren. Neben der Einführung von in den Daten angegebenen Untervorlagen können Sie natürlich auch #idVorlagencodes verwenden, die in scriptTags geschrieben sind, indem Sie Zeichenfolgen angeben.

HTML Quelltext:

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

* In der Node.js-Umgebung ausführen

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

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

Wird im Express.js-Framework verwendet

In den Versionen der Express 2.x-Serie:

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

In den Versionen der Express 3.x-Serie:

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

In Express 4.x-Serienversionen:

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

Kompilieren Sie Vorlagendateien in der Befehlszeile vor:

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

Richten Sie externen Cache-Speicher für die Template-Engine ein:

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

juicer.set('cachestore', cache);

* Ein vollständiges Beispiel

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