1、應用場景:
前端使用的模板系統 或 后端Javascript環境發布頁面
2、功能概述:
提供一套模板語法,用戶可以寫一個模板區塊,每次根據傳入的數據,生成對應數據產生的HTML片段,渲染不同的效果。
3、特性:
1、語法簡單,學習成本極低,開發效率提升很大,性價比較高(使用Javascript原生語法);
2、默認HTML轉義(防XSS攻擊),并且支持包括URL轉義等多種轉義;
3、變量未定義自動輸出為空,防止頁面錯亂;
4、功能強大,如分隔符可自定等多種功能;
使用百度模板小栗子
//直接復制即可使用,記得要下載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>