先贊一下，百度加入開源是個好創舉，傳播開源精神，態度會讓更多遍布各個公司的開發人員受到影響，進而使我們的開源更加繁榮。
記錄一些今天適用baidutemplate.js模版。
具體項目參見：http://tangram.baidu.com/BaiduTemplate/
先展示兩個例子，然後說說對baidutemplate.js的理解，從而將這一工具加到個人百寶箱裡。
執行個體一：
1.怎麼定義模版？
下面是定義模版塊代碼
<script id="bd_t1" type="text/template"><div> <h1>title:<%=title%></h1> <%if(list.length>1) { %> <h2>list:<%=list.length%></h2> <ul> <%for(var i=0;i<5;i++){%> <li><%=list[i]%></li> <%}%> </ul> <%}else{%> <h2>list不存在</h2> <%}%></div></script>
從上面代碼可以看到JSP的影子，只是這些代碼寫到了Script塊裡面去了。很自然，模版少不了編號來標識，這裡ID就是唯一標識模版。
2.怎麼為模版添加資料渲染）？
<!-- 使用模版 --> <script type="text/javascript"> var data2 = { "title" : "先編譯模版，然後填入資料", "list" : [ "data1", "data2", "data3" ] }; var bt = baidu.template; var fun = bt("bd_t1"); var html2 = fun(data2); document.getElementById("bd_div_2").innerHTML = html2; </script>
從上面代碼看baidu.template(模版ID)編譯模版，然後編譯添加資料後會產生HTML，最後添加到要放置的位置。
3.：
650) this.width=650;" src="http://www.bkjia.com/uploads/allimg/131229/122Q2M20-0.png" title="1.png" alt="194653252.png" />
如數通過模版渲染到DOM中。
執行個體二：
一個簡單完整代碼：
<!DOCTYPE html><html><head><title>test1.html</title><meta charset="utf-8"><script type="text/javascript" src=\'#\'" /script></head><body><script type="text/javascript"> var bt=baidu.template; function show(){ var s="<h1>內容：<%=title%></h1>"; var fun=bt(s); var data={"title":"this is a title"}; var html=fun(data); document.getElementById("bt_div_1").innerHTML=html; }</script><input type="button" value="查看"/><div id="bt_div_1"></div></body></html>
上面的模版作為string直接編譯，然後添加資料進行渲染，這是另外一種方式。
總結：
1.資料來源可以通過Ajax擷取JSON資料檔案，或者伺服器端返回JSON格式的資料通過JavaScript來操作。
2.模版可以在頁面中定義，亦可以通過伺服器端以字串的類型返回。
3.模版的編寫和JSP頁面嵌套Java代碼相似，當然<% xxx %> 分隔字元可以自訂。
4.JSON對象來在頁面通過模版的形式展現，使的Ajax擷取JSON資料並且在DOM中渲染交付給瀏覽器用戶端處理。
5.如執行個體一中要顯示5個元素值，但是JSON中資料中只有3個，baidutemplate做了很好的處理用Null 字元串代替，而不是“undefined”這樣的對象未定義。
6.baidutemplate模版代碼200多好，輕巧，靈便，還有很多逸出字元處理，HTML標籤，URL處理等。
7.一個好用的JS工具，值得收藏並適時實地的使用。
同時推薦baidu的第一個開源JavaScript庫：tangram http://tangram.baidu.com/
本文出自 “野馬紅塵” 部落格，謝絕轉載！
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
