artTemplate使用

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