artTemplate 是新一代 javascript 模板引擎，用来渲染页面的。它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。
编写模板
1 <script id="test" type="text/html">
2 <h1>{{title}}</h1>
3 <ul>
4 {{each list as value i}}
5 <li>索引 {{i + 1}} ：{{value}}</li>
6 {{/each}}
7 </ul>
8 </script>
渲染模板
1 var data = {
2 title: '标签',
3 list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
4 };
5 var html = template('test', data);
6 document.getElementById('content').innerHTML = html;
应用实例：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>城市天气</title>
6 <style type="text/css">
7 #weather{
8 position: absolute;
9 left: 50%;
10 margin-left: -150px;
11 width: 300px;
12 background: lightGreen;
13 height: 500px;
14 text-align: center;
15 }
16 #weather select,input{
17 height: 30px;
18 margin-top: 10px;
19 }
20 #weaInfo{
21 background: lightBlue;
22 width: 300px;
23 margin-top: 10px;
24 }
25 #weaInfo ul{
26 padding-left: 0px;
27 list-style: none;
28 text-align: left;
29 padding-top: 10px;
30 }
31 #weaInfo ul li{
32 height: 30px;
33 padding-left: 50px;
34 }
35 </style>
36 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
37 <script src="template-web.js"></script>
38 <script id="artid" type="text/html" >
39 {{if longitude}}
40 <ul>
41 <li>经度：{{longitude}}</li>
42 <li>维度：{{latitude}}</li>
43 <li>海拔高度：{{altitude}}</li>
44 <li>天气：{{weather}}</li>
45 <li>温度：{{temp}}</li>
46 <li>最低温度：{{l_tmp}}</li>
47 <li>最高温度：{{h_tmp}}</li>
48 <li>风向：{{WD}}</li>
49 <li>风速：{{WS}}</li>
50 <li>日出时间：{{sunrise}}</li>
51 <li>日落时间：{{sunset}}</li>
52 </ul>
53 {{/if}}
54 </script>
55 </head>
56 <body>
57 <div id="weather">
58 <div>
59 <select>
60 <option value="1">北京</option>
61 <option value="2">上海</option>
62 <option value="3">广州</option>
63 <option value="4">深圳</option>
64 </select>
65 <input type="button" value="查询" id="btn">
66 </div>
67 <div id="weaInfo"></div>
68 </div>
69 <script type="text/javascript">
70 $(function(){
71 $('#btn').click(function(){
72
73 var cityName = $('#weather select option:selected').text();
74 queryWeather(cityName);
75 });
76 $('#weather select').change(function() {
77 $('#weaInfo').html('');
78 });
79 });
80
81
82 function queryCitycode(cityCode){
83 $.ajax({
84 type : "get",
85 url : './weather.php',
86 dataType : "json",
87 data:{cityCode:cityCode},
88 success : function(data){
89 var html = template('artid', data.retData);
90 $('#weaInfo').html(html);
91 // console.log(data);
92 // var wea = data.retData;
93 // // 解析天气内容
94 // var tag = '';
95 // tag += '<li>经度:' +wea.longitude+ '</li>';
96 // tag += '<li>维度:' +wea.latitude+ '</li>';
97 // tag += '<li>海拔高度:' +wea.altitude+ '</li>';
98 // tag += '<li>天气:' +wea.weather+ '</li>';
99 // tag += '<li>温度:' +wea.temp+ '</li>';
100 // tag += '<li>最高温度:' +wea.h_tmp+ '</li>';
101 // tag += '<li>最低温度:' +wea.l_tmp+ '</li>';
102 // tag += '<li>风向:' +wea.WD+ '</li>';
103 // tag += '<li>风速:' +wea.WS+ '</li>';
104 // tag += '<li>日出时间:' +wea.sunrise+ '</li>';
105 // tag += '<li>日落时间:' +wea.sunset+ '</li>';
106
107 // var info = $('<ul>').html(tag);
108 // $('#weaInfo').html(info);
109 },error:function(){
110 console.log('fail');
111 }
112 });
113 }
114 function queryWeather(cityName){
115 $.ajax({
116 type : "get",
117 url : './citycode.php',
118 dataType : "json",
119 data:{cityName:cityName},
120 success : function(data){
121 queryCitycode(data.cityCode);
122 },error:function(){
123 console.log('fail');
124 }
125 });
126
127
128 }
129
130
131
132
133 </script>
134 </body>
135 </html>
github项目网址 https://github.com/yanhaijing/template.js
高性能JavaScript模板引擎原理解析 http://cdc.tencent.com/2012/06/15/%E9%AB%98%E6%80%A7%E8%83%BDjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/