JS之模板技術（aui / artTemplate）
artTemplate是個好東西啊，一個開源的js前端模板引擎，使用簡單，渲染效率特別的高。
我經常使用這個技術來在前端動態生成新聞列表，排行榜，歷史記錄等需要在前端列表顯示的資訊。
下面是artTemplate的下載連結：
https://github.com/aui/artTemplate
因為artTemplate比較簡單，容易上手，專案的例子，文件又比較齊全，大家有需要可以直接參考官方文件，例子進行深入瞭解，
我這裡就這是用簡單常用的，用於快速上手的一個例子吧！
先說明，我是下載artTemplate工程專案src目錄下的template.js的
內容大概為:
...略
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