baiduTemplate希望創造一個用戶覺得“簡單好用”的JS模板引擎
先展示兩個例子，然后說說對baidutemplate.js的理解，從而將這一工具加到個人百寶箱里。 <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，最后添加到要放置的位置。 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做了很好的處理用空字符串代替，而不是“undefined”這樣的對象未定義。 6.baidutemplate模版代碼200多好，輕巧，靈便，還有很多轉義字符處理，HTML標簽，URL處理等。 7.一個好用的JS工具，值得收藏並適時實地的使用。
百度模板引擎：http://baidufe.github.io/BaiduTemplate/
artTemplate模板引擎: https://github.com/aui/artTemplate
JS 模板引擎 BaiduTemplate 和 ArtTemplate 對比及應用： http://www.cnblogs.com/Fengger/p/3826241.html
各種JS模板引擎(Template)對比數據(高性能JavaScript模板引擎) http://www.07net01.com/program/306389.html
各種瀏覽器測試結果 ie8瀏覽器（8.0.6001.18702） 各種JS模板引擎(Template)對比數據(高性能JavaScript模板引擎) chrome瀏覽器（版本 26.0.1410.64 m） 各種JS模板引擎(Template)對比數據(高性能JavaScript模板引擎) Firefox瀏覽器（19.0.2） 各種JS模板引擎(Template)對比數據(高性能JavaScript模板引擎)內核版本：21.0.1180.89） 各種JS模板引擎(Template)對比數據(高性能JavaScript模板引擎) 通過對各模板引擎測試結果，可以看出 artTemplate，juicer與doT引擎模板整體性能要有絕對優勢； 其中doT引擎模板在IE與safari瀏覽器表現非常優越； tmpl模板引擎在IE中運行能完美勝出，但在其它瀏覽器中表現就差很多； 延伸 通過對模板引擎的熟知，不同瀏覽器渲染能力也不一樣；渲染快的打開網頁速度就快；chrome與360瀏覽器打開速是最快的；IE瀏覽器的速度是最慢； 各個模板引擎下載地址： baiduTemplate: http://baidufe.github.io/BaiduTemplate/ artTemplate: https://github.com/aui/artTemplate juicer: http://juicer.name/或https://github.com/PaulGuo/Juicer/zipball/master#download doT：doT source:https://github.com/olado/doT Docs:http://olado.github.com/doT/ tmpl：https://github.com/BorisMoore/jquery-tmpl handlebars:http://handlebarsjs.com/或https://raw.github.com/wycats/handlebars.js/1.0.0-rc.4/dist/handlebars.js easyTemplate：https://github.com/qitupstudios/easyTemplate underscoretemplate: http://documentcloud.github.io/underscore/ mustache:https://github.com/janl/mustache.js kissytemplate:https://github.com/ktmud/kissy