artTemplate是個好東西啊，一個開源的js前端模板引擎，使用簡單，渲染效率特別的高。
我經常使用這個技術來在前端動態生成新聞列表，排行榜，歷史記錄等需要在前端列表顯示的信息。
下面是artTemplate的下載鏈接：
https://github.com/aui/artTemplate
因為artTemplate比較簡單，容易上手，項目的例子，文檔又比較齊全，大家有需要可以直接參考官方文檔，例子進行深入了解，
我這里就這是用簡單常用的，用於快速上手的一個例子吧！
先說明，我是下載artTemplate工程項目src目錄下的template.js的
內容大概為:
artTemplate 是新一代 javascript 模板引擎，它采用預編譯方式讓性能有了質的飛躍，並且充分利用 javascript 引擎特性，使得其性能無論在前端還是后端都有極其出色的表現。在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。
除了性能優勢外，調試功能也值得一提。模板調試器可以精確定位到引發渲染錯誤的模板語句，解決了編寫模板過程中無法調試的痛苦，讓開發變得高效，也避免了因為單個模板出錯導致整個應用崩潰的情況發生。
使用的方法很簡單，第一步：編寫模板，第二部，渲染模板。
編寫模板的方法就是很常用的拼接，與Velocity的模板編寫也挺相似。
var source =
'<ul>'
+ '<% for (var i = 0; i < list.length; i ++) { %>'
+ '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'
+ '<% } %>'
+ '</ul>';
值得注意的是list是json數據的key，並不是數據的變量名，如果需要循環，可以這樣寫
var data={
"list":datasource;
};
渲染的方法
var render = template.compile(source); var html = render(data);
其中data是從后台獲取的json格式的數據，最后就可以將html變量插入到dom里。
另外，渲染的方法還有兩種：
template.compile([id], source);//id可選 template.render(id, data);//也可以直接渲染
id是script中定義的屬性，data的格式是{key: value}的形式。這里的key就是模板的id，數據放在value部分。
更加詳細的內容可參考官方文檔。
...略
var template = function (id, content) {
return template[
typeof content === 'object' ? 'render' : 'compile'
].apply(template, arguments);
};
...略
其中主要也就是使用到這個函數。
前端的頁面內容主要為
<body>
<center><h1><font color="#f00">這是template模板技術使用示例</font></h1></center>
<script id="personListId" type="text/html">
<font color="#f00" size="24">
<$for (var i = 0; i < personList.length; i++) {$>
客戶姓名：<$=personList[i].name$> 客戶年齡：<$=personList[i].age$><br/>
<$}$>
</font>
</script>
<div id="templateContent"></div>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/template.js"></script>
<script type="text/javascript" src="js/page/index.js"></script>
</body>
其中我使用了jquery，template，這兩個都可以上網下載，放置到對應目錄就ok。
下面這段代碼使用模板技術進行for循環，格式為：
<$$>對內可寫js代碼，<$=val$>是輸出js的變量val的值，
看着這個for循環，需要注意三點：
1）<script></script>必須標上唯一id，如<script id="personListId"></script>
2）<script></script>的type的值是text/html，而不是text/javascript
3）personList這個js變量從哪里來的，這里先留個疑問吧
4）對於這個列表要怎么顯示，你就對應怎么寫就好，這里是最簡單的顯示客戶姓名和客戶年齡，也沒帶什么圖片，樣式之類的
客戶姓名：<$=personList[i].name$> 客戶年齡：<$=personList[i].age$><br/>。
<script id="personList" type="text/html">
<font color="#f00" size="24">
<$for (var i = 0; i < personList.length; i++) {$>
客戶姓名：<$=personList[i].name$> 客戶年齡：<$=personList[i].age$><br/>
<$}$>
</font>
</script>
接下來就是寫自己的js代碼，使用template模板技術，動態渲染以上前端代碼
代碼寫在js/page/index.js這個文件中，內容為：
$(function(){
var persons= [
{
name : "11111111111",
age : 1111111111111111
},
{
name : "2222222222",
age : 2222222222
},
{
name : "33333333333",
age : 333333333333
}
];//自定義的json格式數據，實際應用中一般都是使用ajax請求服務器獲取json格式的數據，不知道從js的哪個版本起，js已經內置支持json格式的數據
var html = template('personListId',{personList : persons});//看着這行代碼，是否注意到之前提到的personListId和personList 已經在這里使用上和定義好了
$('#templateContent').html('').html(html);//jquery的用法，目的就是將動態生成的內容（html）填充到id為templateContent的div
});
write less，do more，i like