Content Table

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