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