简单易用的baidutemplate模板的使用
生活随笔
收集整理的這篇文章主要介紹了
简单易用的baidutemplate模板的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
按照官網（http://baidufe.github.io/BaiduTemplate/）的說法，baidutemplate介紹如下：
A、baiduTemplate 簡介
0、baiduTemplate希望創造一個用戶覺得“簡單好用”的JS模板引擎
注：等不及可以直接點左側導航中的”C、使用舉例“，demo即刻試用。1、應用場景：
前端使用的模板系統 或 后端Javascript環境發布頁面2、功能概述：
提供一套模板語法，用戶可以寫一個模板區塊，每次根據傳入的數據， 生成對應數據產生的HTML片段，渲染不同的效果。3、特性：
1、語法簡單，學習成本極低，開發效率提升很大，性價比較高（使用Javascript原生語法）； 2、默認HTML轉義（防XSS攻擊），并且支持包括URL轉義等多種轉義； 3、變量未定義自動輸出為空，防止頁面錯亂； 4、功能強大，如分隔符可自定等多種功能；
那如何使用呢？下面我們通過官網上一個例子來看看：
<!Doctype html> <html> <head><meta charset="utf-8"/><title>test</title><!-- 引入baiduTemplate --> <script type="text/javascript" src="../libs/baiduTemplate/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);//var html = baidu.template('t:_1234-abcd-1',data); //渲染 document.getElementById('result').innerHTML=html; </script></body> </html>
看到效果之后，我們在看看代碼就很容易理解：
0、引入文件：
baiduTemplate使用僅需引入baiduTemplate.js文件，未壓縮是考慮大家調錯閱讀等方便，上線前請自行壓縮代碼。
<script type="text/javascript" src="./baiduTemplate.js"></script>1、放置模板片段：
頁面中，模板塊可以放在 <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 = "<!-- 模板開始 --> 模板內容 <!-- 模板結束 -->";2、調用引擎方式
（1）、數據結構是一個JSON，如：
var data={title:'baiduTemplate',list:['test data 1','test data 2','test data3'] }（2）、baiduTemplate占用baidu.template命名空間
//可以付值給一個短名變量使用 var bt = baidu.template;（3）、方法一：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);（4）、最后將他們插入到一個容器中即可
document.getElementById('result0').innerHTML=html0; document.getElementById('result1').innerHTML=html1; document.getElementById('result2').innerHTML=html2;3、模板基本語法（默認分隔符為<% %>，也可以自定義）
分隔符內語句為js語法，如：
<% 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> <%}%>4、不推薦使用功能
用戶可以自定義分隔符，默認為 <% %>，如：
//設置左分隔符為 <! baidu.template.LEFT_DELIMITER='<!';//設置右分隔符為 <! baidu.template.RIGHT_DELIMITER='!>';自定義默認輸出變量是否自動HTML轉義
//設置默認輸出變量是否自動HTML轉義，true自動轉義，false不轉義 baidu.template.ESCAPE = false;D、性能相關數據
前端模板引擎在傳統桌面電腦的瀏覽器端編譯模板并渲染頁面，無較大的性能開銷。但在移動端上面，性能數據較為重要，故發布移動端性能數據列表，希望能夠給各位開發者提供一個參考。
總結：編譯執行時間（前端模版編譯以及json被轉換為html字符串的時間）范圍約在10~90毫秒，大部分集中在20~60毫秒之間。Dom渲染時間（html字符串通過dom.innerHTML被插入到div里的時間）范圍約在40~160毫秒，大部分集中在50~130毫秒之間。測試頁面（50條數據記錄）：http://tieba.baidu.com/tb/test/s.html（數據在頁面多次刷新時會有一些小范圍浮動，只反映大致情況，2012-09-20 百度貼吧整理）
總的來說，這個模板在實際項目中比較好用，給前端開發帶來了很大的便利性，不用自己造輪子就可以使用，推薦使用。
總結
以上是生活随笔為你收集整理的简单易用的baidutemplate模板的使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： d3.js选择、插入、删除元素
- 下一篇： dojo解决这个问题Tried to r