百度JS模板引擎

1. 應用場景

前端使用的模板系統  或  後端Javascript環境發佈頁面

2. 功能描述

提供一套模板語法，用戶能夠寫一個模板區塊，每次根據傳入的數據，生成對應數據產生的HTML片斷，渲染不一樣的效果。

3. 特性

1）、語法簡單，學習成本極低，開發效率提高很大，性價比較高（使用Javascript原生語法）；
2）、默認HTML轉義（防XSS攻擊），而且支持包括URL轉義等多種轉義；
3）、變量未定義自動輸出爲空，防止頁面錯亂；
4）、功能強大，如分隔符可自定等多種功能；

4. 使用步驟

1）在頁面中引入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 = {username:"username"}
//數組
var data={testarr:['test data 1','test data 2','test data3']}
//對象
var data =
 {person:"id":4,"username":"king","password":"123456","age":19}}
//list集合
var data = {list: [{"id":1,"username":"king","password":"1","age":25},{"id":2,"username":"king","password":"11","age":19},{"id":3,"username":"king","password":"11","age":19},{"id":4,"username":"king","password":"123456","age":19}]}

4)  數據傳入模板，生成html片斷

   方法一： 傳入模板的同時，也傳入數據

   若是模板片斷是script或者在textarea中定義的，則使用id傳入方法,

// 'test1'表示模板片斷中的id號， data表示準備的模板數據
var data_html = baidu.template('test1',data); 

 若是是像tpl同樣保存在變量中時，格式相似，以下

//tpl表示定義的模板變量
var data_html = baidu.template(tpl, data)

 

 方法二：傳入模板後，不傳數據，能夠當作一個函數使用，這樣就分兩步操做。

//傳入模板
var fun1 = baidu.template('test1');
var fun2 = baidu.template(tpl);

//使用上面的函數
var data_html = fun1(data)
var data_html = fun2(data)

上面兩種方法中，方法二將模板封裝爲函數，能夠屢次調用。

因此 若是是一個通用的模板建議使用方法二，不然使用方法一。具體根據實際狀況來。

若是以爲baidu.template比較長，也能夠定義一個別名如 var bt = baidu.template;

5） 使用生成的html片斷

//js中使用html片斷填充下面的div
document.getElementById('div_1').innerHTML=data_html;


//定義空的div容器
<div id ='div_1'></div>

5. 如何書寫模板

在4.2中簡單說明了定義模板的格式，下面具體說明如何定義模板，如下使用script爲例子

<%  %>表示分隔符，分隔符內語法爲js語法：

//輸出單個變量
<%=title%>

//if判斷
<%if(list.length){%>
    <h2><%=list.length%></h2>
<%}else{%>
    <h2>list長度爲0<h2>
<%}%>

//for循環
<%for(var i=0;i<list.length;i++){%>
     <li><%=list[i]%></li>
<%}%>

//關於轉義，默認html轉義，若是不轉義，使用以下
<%:=title%> 或 <%-title%>

//另外有個全局轉義變量控制
//設置默認輸出變量是否自動HTML轉義，true自動轉義，false不轉義
baidu.template.ESCAPE = false;

//模板內註釋
<!-- 模板中能夠用HTML註釋 -->  或  <%* 這是模板自帶註釋格式 *%>

 

到此結束，很是簡單。上面這些都是摘自官網的說明。

通常應用在輕量級的前端開發中，單純使用js來開發的前端頁面，如移動h5的開發，避免使用jquery等重量級的前端框架影響性能。

baidu.template.js下載地址(不肯定是否是官方出品的)：http://baidufe.github.io/BaiduTemplate/