百度模板
2017-01-26 本文已影响0人
Victor细节
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>
