JavaScript模板引擎-artTemplate

来源：互联网发布：vs怎么编译c语言编辑：程序博客网时间：2024/05/16 09:53

一、为什么使用JavaScript模板引擎

项目中，部分模块（filter、toolbar）业务复杂，过多依赖jQuery去铺数据，导致整体性能不高，且使用jquery操作导致代码量和冗余度增大，后期维护不变。
使用javascript模板引擎可以有效的实现界面与数据分离（解耦），大大提升开发效率，且重用性较高。

二、什么是JavaScript模板引擎

首先要说明，模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在JavaScript下有模板引擎，在PHP下也有模板引擎，甚至Asp开发都会用到模板引擎技术。
模板引擎可以生成特定格式的文档。JavaScript模板引擎，会生成一个标准的HTML文档。

三、什么场景下使用JavaScript模板引擎

1、如果有大量的动态ajax请求数据并需要封装成视图展现给用户，现有的实现方式不满性能要求；
2、如果有大量的HTML段，是通过动态拼串生成；
3、如果在页面布局中，存在共性模块和布局，可以提取出公共模板，减少维护的数量。（当然模块化同样可以解决）

四、如何选择JavaScript模板引擎

n条数据 * m次渲染，在不同浏览器所需时间；
GitHub星数量，和最新更新情况；（更新时间离现在越近越好，证明有人维护）
兼容性，可扩展性，容错及调试便捷性等；（容错，因其原理是动态执行JavaScript字符串，如没进行容错，出现数据异常将会导致整个应用崩溃；调试，动态执行调试器无法定位到错误）
自己编码习惯，和掌握程度。（大部分JavaScript模板引擎都简单易懂，不需太多学习成本）

（参考自：http://www.cnblogs.com/guohu/p/3870677.html）
根据上述规则，我们选择腾讯公司的artTemplate

五、JavaScript模板引擎原理及artTemplate优点

原理：动态执行JavaScript字符串！
优点：
1. 预编译：渲染需要动态编译JavaScript字符串完成变量赋值。而artTemplate的编译赋值过程却是在渲染之前完成的
2. 更快的字符串相加方式： IE6-8的浏览器下，数组push方法拼接字符串会比“+=”快，而在v8引擎中，使用“+=”方式比数组拼接快4.7倍；所以 artTemplate 根据JavaScript引擎特性采用了两种不同的字符串拼接方式。
3. 支持运行时调试，可精确定位异常模板所在语句：（动态解析，所以调试器无法定位到错误）渲染的时候遇到错误会进入调试模式重新编译模板，而不会影响正常的模板执行效率。模板编译器根据模板换行符记录行号，当执行过程遇到错误，立马抛出异常模板对应的行号，模板调试器再根据行号反查模板对应的语句并打印到控制台。源码L282
4. 对Node端支持良好，便于以后统一扩展！

六、JavaScript模板引擎示例

artTemplate提供了两个版本的模板语法可以选择：简洁语法（{{}}）、原生语法（<% %>）。
选用原生语法，因为项目中使用了AngularJS，“{{}}”被angularjs的双向数据绑定占用，且原生语法支持原生JavaScript方法！

Object.keys(template)["version", "config", "defaults", "cache", "render", "renderFile", "get", "utils", "helper", "helpers", "onerror", "compile"]1
2
1
2

<!DOCTYPE html><html><head>    <title>JavaScript模板引擎</title>    <script type="text/javascript" src="./template-native-debug.js"></script></head><body>    <!-- 示例1 开始 -->    <div id="content1"></div>    <hr/>    <script id="test1tpl" type="text/html">        <h1><%=title%></h1>        <ul>            <%for(var i = 0; i < list.length; i++) {%>                <li><%=i+1%> <%=list[i]%> <%=window.location.href %></li>            <%}%>        </ul>    </script>    <script type="text/javascript">        var title = "基本例子",            list = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];        var html = template('test1tpl', {title: title, list: list, window: window});        document.getElementById('content1').innerHTML = html;    </script>    <!-- 示例1 结束 -->    <!-- 示例2 开始 -->    <div id="content2"></div>    <hr/>    <script id="test2tpl" type="text/html">        <h1><%=title%></h1>        <p>不转义：<%=#value %></p>        <p>转义（默认）：<%=value %></p>    </script>    <script type="text/javascript">        html = template('test2tpl', {title: '不转义HTML', value: '<span style="color:#F00">hello world!</span>'});        document.getElementById("content2").innerHTML = html;    </script>    <!-- 示例2 结束 -->    <!-- 示例3 开始 -->    <div id="content3"></div>    <hr/>    <script type="text/javascript">        var source ="<h1><%=title %></h1>"                     + "<ul>"                        + "<%for(var i = 0; i < list.length; i++) {%>"                            + "<li><%=i+1%> <%=list[i]%></li>"                        + "<%}%>"                    + "</ul>";            var render = template.render(source);            html = render({                    title: '在javascript中存放模板',                    list: ['摄影', '电影', '民谣', '旅行', '吉他']                });            document.getElementById("content3").innerHTML = html;    </script>    <!-- 示例3 结束 -->    <!-- 示例4 开始 -->    <div id="content4"></div>    <hr/>    <script id="test4tpl" type="text/html">        <h1><%=title%></h1>        <%include('test4tpl_list')%>    </script>    <script id="test4tpl_list" type="text/html">        <ul>            <% for(var j = 0; j < list.length; j++) {%>                <li><%=list[j]%></li>            <%}%>        </ul>    </script>    <script type="text/javascript">        var title = "嵌入子模板",            list = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];        var html = template('test4tpl', {title: title, list: list});        document.getElementById('content4').innerHTML = html;    </script>    <!-- 示例4 结束 -->    <!-- 示例5 开始 -->    <div id="content5"></div>    <script id="test5tpl" type="text/html">        <h1><%=title%></h1>        <%=#dateFormat(time, 'yyyy<b>年</b> MM<b>月</b> dd<b>日</b> hh:mm:ss')%>    </script>    <script>    /**      * 对日期进行格式化，      * @param date 要格式化的日期      * @param format 进行格式化的模式字符串     *     支持的模式字母有：      *     y:年,      *     M:年中的月份(1-12),      *     d:月份中的天(1-31),      *     h:小时(0-23),      *     m:分(0-59),      *     s:秒(0-59),      *     S:毫秒(0-999),     *     q:季度(1-4)     * @return String     * @author yanis.wang     * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/     */    template.helper('dateFormat', function (date, format) {        date = new Date(date);        var map = {            "M": date.getMonth() + 1, //月份             "d": date.getDate(), //日             "h": date.getHours(), //小时             "m": date.getMinutes(), //分             "s": date.getSeconds(), //秒             "q": Math.floor((date.getMonth() + 3) / 3), //季度             "S": date.getMilliseconds() //毫秒         };        format = format.replace(/([yMdhmsqS])+/g, function(all, t){            var v = map[t];            if(v !== undefined){                if(all.length > 1){                    v = '0' + v;                    v = v.substr(v.length-2);                }                return v;            }            else if(t === 'y'){                return (date.getFullYear() + '').substr(4 - all.length);            }            return all;        });        return format;    });    // --------    var data = {        title: "辅助方法",        time: (new Date).toString()    };    var html = template('test5tpl', data);    document.getElementById('content5').innerHTML = html;    </script>    <!-- 示例5 结束 --></body></html>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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155

七、JavaScript模板引擎使用注意事项

不要滥用JavaScript模板引擎，不支持DOM元素获取。
注意语法不能和其他框架冲突（如angularjs的“{{}}”）

阅读全文

0 0