Content Table
2016-07-14

JS 模版 artTempalte

使用模版就可以不用在 JS 里手动的使用字符串相加拼写 HTML 片段了。

JS 中有很多模版库，例如 artTempalte 、doT、juicer、laytpl、Mustache、Underscore Templates、Embedded JS Templates、HandlebarsJS、Jade templating、baiduTemplate、kissyTemplate 等等，总的比较下来，语法上更喜欢的是 artTempalte ，其性能也不错；laytpl 号称性能之王，比 artTemplate 和 doT 还快，如果追求性能，可以试试它 http://laytpl.layui.com。

artTempalte 用法:

  1. 定义模版

    1
    2
    3
    4
    // type="text/html" 是为了让其不被浏览器作为 JS 解析，同时还不可见
    <script id="templateId" type="text/html">
        Your name: {{name}}
    </script>

  2. 定义模版使用的数据的 Json 对象:

    1
    var data = {name: 'John'};

  3. 使用 函数 template() + 模版 + 数据 生成 HTML

    1
    2
    // templateId 是 <script> 的 id
    var html = template('templateId', data);

  4. 添加生成的 HTML 到 DOM

artTempalte 实例

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
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Art Template Demo</title>
    <script src="template.js" charset="utf-8"></script>
</head>

<body>
    <div id="zoo">
        <!-- [1]. 定义模版 -->
        <script id="templateId" type="text/html">
            Boolean: {{valid}} - {{valid?'Valid':'Invalid'}}
            
            <ul data-name="{{name}}" data-city="{{city}}">
                <!--遍历基础类型数组-->
                {{each animals as animal}}
                <li>{{animal}}</li>
                {{/each}}
            </ul>

            <ul>
                <!--遍历对象数组-->
                {{each staffs as staff}}
                <li>{{staff.name}} - {{staff.age}}</li>
                {{/each}}
            </ul>
        </script>
    </div>

    <script type="text/javascript">
        // [2]. 模版使用的数据
        var data = {
            valid: false,
            name: 'Zoologischer Garten',
            city: 'Berlin',
            animals: ['大象', '老虎', '狮子', '猴子'], // 基础类型数组
            staffs: [{
                    name: 'Alice',
                    age: 20
                }, {
                    name: 'Bob',
                    age: 22
                }] // 对象数组
        };

        // [3]. 使用模版生成 HTML，默认对输出进行转义，不转义使用 {{#value}}
        var html = template('templateId', data);
        document.getElementById('zoo').innerHTML = html; // [4]. 添加生成的 HTML 到 DOM
    </script>
</body>

</html>

在模版里直接 boolean 变量不会输出任何东西

1
{{boolean}} 输出为空白

需要判断后再输出，例如 

1
{{valid?'Valid':'Invalid'}}

ArtTemplate Github

更多的详细说明和使用案例请参考 https://github.com/aui/artTemplate

下载 artTemplate: https://raw.github.com/aui/artTemplate/master/dist/template.js