標籤：style http color java 使用 io 檔案 資料
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
