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/