百度JS模板引擎 baiduTemplate 1.0.6 版
應用在前端模版系統或則后端JavaScript的環境發布頁面，它提供了一套模版語法，用戶可以寫一個模版區塊，每次根據傳入的數據生成對應數據產生的Html，渲染不同界面效果；它的優點：愈發簡單，學習成本極低，開發效率提升很大，采用javascript的原生語法，所以效率比較高， 默認HTML轉義（防XSS攻擊），並且支持包括URL轉義等多種轉義，變量未定義自動輸出為空，防止頁面錯亂，功能強大，如分隔符可自定等多種功能；
下面是一個應用舉例：
//直接復制即可使用，記得要下載baiduTemplate.js //index.html <!doctype html> <html> <head> <meta charset="utf-8"/> <title>test</title> <!-- 引入baiduTemplate --> <script type="text/javascript" src="./baiduTemplate.js"></script> </head> <body> <div id='result'></div> <!-- 模板1開始，可以使用script（type設置為text/html）來存放模板片段，並且用id標示 --> <script id="t:_1234-abcd-1" type="text/html"> <div> <!-- 我是注釋，語法均為Javascript原生語法，默認分割符為 <% %> ，也可以自定義，參見API部分 --> <!-- 輸出變量語句，輸出title --> <h1>title:<%=title%></h1> <!-- 判斷語句if else--> <%if(list.length>1) { %> <h2>輸出list，共有<%=list.length%>個元素</h2> <ul> <!-- 循環語句 for--> <%for(var i=0;i<5;i++){%> <li><%=list[i]%></li> <%}%> </ul> <%}else{%> <h2>沒有list數據</h2> <%}%> </div> </script> <!-- 模板1結束 --> <!-- 使用模板 --> <script type="text/javascript"> var data={ "title":'歡迎使用baiduTemplate', "list":[ 'test1:默認支持HTML轉義，如輸出<script>，也可以關掉，語法<:=value> 詳見API', 'test2:', 'test3:', 'test4:list[5]未定義，模板系統會輸出空' ] }; //使用baidu.template命名空間 var bt=baidu.template; //可以設置分隔符 //bt.LEFT_DELIMITER='<!'; //bt.RIGHT_DELIMITER='!>'; //可以設置輸出變量是否自動HTML轉義 //bt.ESCAPE = false; //最簡使用方法 var html=bt('t:_1234-abcd-1',data); //渲染 document.getElementById('result').innerHTML=html; </script> </body> </html>
基本的用法很簡單，待我慢慢講解
1.引入文件
baiduTemplate使用僅需引入baiduTemplate.js文件；
<script type="text/javascript" src="./baiduTemplate.js"></script>
2.放置模板片段
頁面中，模版塊可以放在<script>中，設置type屬性為text/template或text/html，用id標識，如：
<script id='test1' type="text/template"> <!-- 模板部分 --> <!-- 模板結束 --> </script>
或者存放在 <textarea> 中，一般情況設置其CSS樣式display:none來隱藏掉textarea，同樣用id標識，如：
<textarea id='test2' style='display:none;'> <!-- 模板部分 --> <!-- 模板結束 --> </textarea>
模板也可以直接存儲在一個變量中
var tpl = "<!-- 模板開始 --> 模板內容 <!-- 模板結束 -->";
3.調用引擎的方式
模版數據結構是一個JSON，可以從服務器端加載過來，數據結構如：
var data={ title:'baiduTemplate', list:[ 'test data 1', 'test data 2', 'test data3' ] }
baiduTemplate占用baidu.template命名空間，調用方法1：
tpl是傳入的模板(String類型)，可以是模板的id也可以是一個模板片段字符串，傳入模板和對應數據返回對應的HTML片段；如下：
//方法一：直接傳入data，返回編譯后的HTML片段 var html0 = baidu.template(tpl,data); //或直接傳入id即可 var html0 = baidu.template('test1',data);
方法二：或者可以只傳入tpl，這時返回的是一個編譯后的函數，可以把這個函數緩存下來，傳入不同的data就可以生成不同的HTML片段，如下：
//方法二：先不傳入data，返回編譯后的函數 var fun = baidu.template(tpl); //或直接傳入id即可 var fun = baidu.template('test1'); //之后通過改變數據，調用緩存下來的函數，產生不同的HTML片段 var html1 = fun(data1); var html2 = fun(data2);
最后把生成的html插入到一個容器里面即可，如下：
document.getElementById('result0').innerHTML=html0; document.getElementById('result1').innerHTML=html1; document.getElementById('result2').innerHTML=html2;
基本的使用方法就這么多，是不是很簡單啊，下面介紹一下模版的基本的語法，模版的語法自認為和webform的語法基本類似，所以學過webform的朋友一看就懂了
模版的分隔符為<%%>，也可以自定義，自定義的語法如下：
//設置左分隔符為 <! baidu.template.LEFT_DELIMITER='<!'; //設置右分隔符為 <! baidu.template.RIGHT_DELIMITER='!>';
自定義默認輸出變量是否自動HTML轉義，語法如下：
//設置默認輸出變量是否自動HTML轉義，true自動轉義，false不轉義 baidu.template.ESCAPE = false;
模版的是在分隔符內寫，模版的語法也就是js的語法和webform的一些語法，如：
<% var test = function(){ //函數體 }; if(1){}else{}; function testFun(){ return; }; %>
假定事先設置數據為
var data={ title:'baiduTemplate', list:['test1<script>','test2','test3'] }
模版的注釋方法：
<!-- 模板中可以用HTML注釋 --> 或 <%* 這是模板自帶注釋格式 *%> <% //分隔符內支持JS注釋 %>
輸出變量的方法如下：
//默認HTML轉義，如果變量未定義輸出為空 <%=title%> //不轉義 <%:=title%> 或 <%-title%> //URL轉義，UI變量使用在模板鏈接地址URL的參數中時需要轉義 <%:u=title%> //UI變量使用在HTML頁面標簽onclick等事件函數參數中需要轉義 //“<”轉成“<”、“>”轉成“>”、“&”轉成“&”、“'”轉成“\'” //“"”轉成“\"”、“\”轉成“\\”、“/”轉成“\/”、\n轉成“\n”、\r轉成“\r” <%:v=title%> //HTML轉義（默認自動） <%=title%> 或 <%:h=title%>
判斷語句語法如下：
判斷語句 <%if(list.length){%> <h2><%=list.length%></h2> <%}else{%> <h2>list長度為0<h2> <%}%>
循環語句語法如下：
<%for(var i=0;i<list.length;i++){%> <li><%=list[i]%></li> <%}%>
BaiduTemplate的在線體驗調試地址：http://tangram.baidu.com/BaiduTemplate/debug/