BaiduTempalte的优点:
- 学习成本低,采用javaScript原生的语言,所以效率比较高。
- 默认的HTML转义,防XSS攻击,并支持url等多种转义。
- 变量未定义时,自动输出为空,防止页面错乱,功能强大。
例子:
- 如何定义模板块代码?
- 模版块可以放在
<script type="text/template" id="template-test">
<div>
<h1>title: <%= title %></h1>
<% for(var i = 0; i < 9 ; i++){ %>
<h2>二级标题:<%= i %></h2>
<ul>
<% for(var j = 0 ; j < 3; j++){ %>
<li>li <%=list[j]%></li>
<% } %>
</ul>
<% } %>
</div>
</script>
- 使用模板?
<script>
var data = {
'title':'baiduTemplate',
'list':["data1", "data2", "data3"],
};
var html = baidu.template('template-test' ,data);
$("#box").html(html);
</script>
- 还可以这样的方法使用模板
<script>
var data = {
'title':'baiduTemplate',
'list':["data1", "data2", "data3"],
};
var temp = baidu.template;
var fun = temp('template-test');
var html = fun(data);
$("#box").html(html);
</script>
### 总结
1. 在使用AJax获取Json数据文件,或者服务器端获取Json数据文件时,可以通过javaScript来操作
2. 模板可以再页面中定义,也可以通过服务器通过字符串的类型返回
3. baidu.template() 传入两个参数,一个是选区模块的DOM节点,另一个节点是需要传入选区模板的数据。
4. 下面有个大例子:
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="keywords" content="baidu template" />
<meta name="description" content="javascript前端模板" />
<title>test</title>
<script type="text/javascript" src="baiduTemplate.js"></script>
</head>
<body>
<h3>BaiduTemplate单元测试用例</h3>
<!-- 测试模板1开始 -->
<script id='t:_1234-abcd-1' type="text/template">
<br>
1、基本输出(自动HTML转义): <%=value1%>
<br>
<br>
2、容错写法: <%=value2;%>
<br>
<br>
3、不转义输出: <%:=value3%> 或 <%-value3%>
<br>
<br>
4、容错写法: <%:=value4;%>
<br>
<br>
5、URL转义输出: <%:u=value5%>
<br>
<br>
6、容错写法: <%:u=value6;%>
<br>
<br>
7、UI变量在页面标签事件中使用转义: <%:v=value7%>
<br>
<br>
8、容错写法:<%:v=value8;%>
<br>
<br>
9、HTML转义输出:<%:h=value9%>
<br>
<br>
10、容错写法:<%:h=value10;%>
<br>
<br>
11、变量未定义自动输出空:<%=value11%>
<br>
<br>
12、模板直接输出特殊字符:5个斜杠 / 5个单引 ‘’‘’‘ 5个双引 “”“”“
<br>
<br>
13、注释:
<!-- HTML注释支持 -->
<%* 模板自带注释 *%>
<% //js注释方式
%>
<br>
<br>
14、判断语句:
<%if(value14){%>
<input type="text" value="<%:v=value14%>"/>
<%}else{%>
无值
<%}%>
<br>
<br>
15、循环语句:
<br>
<ul>
<%for(var i=0;i<value17.length;i++){%>
<li><%=value17[i]%></li>
<%}%>
</ul>
<br>
<br>
16、a标签 <br>
单引问题:<a target='_blank' href='http://www.baidu.com ' onclick='alert("test");'>test</a><br>
双引问题:<a target="_blank" href="http://www.baidu.com" onclick="alert('test');">test</a><br>
17、定义变量:
<%var varTest1 = value1%>
varTest1: <%=varTest1;%>
<br>
18、定义变量容错:
<%var varTest2 = value2;%>
varTest2: <%=varTest2%>
<br>
</script>
<!-- 测试模板1结束 -->
<div id="results"></div>
<script type="text/javascript">
window.onload=function(){
//测试数据,对应每个用例
var data={
value1:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
value2:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
value3:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
value4:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
value5:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
value6:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
value7:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span><span style="color:red;">\\\'\"</span>',
value8:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span><span style="color:red;">\\\'\"</span>',
value9:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
value10:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
value14:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
value15:'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>',
value16:['<span style="color:red;">这是value</span>',123,'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>'],
value17:['<span style="color:red;">这是value</span>',123,'<span style="color:red;">http://wangxiao.github.com/BaiduTemplate/</span>']
};
//使用
var bat=baidu.template;
//设置分隔符
//bat.LEFT_DELIMITER='<!';
//bat.RIGHT_DELIMITER='!>';
//设置默认是否转义
//bat.ESCAPE = false;
var timestart = new Date().getTime();
//输出函数
var fun=bat('t:_1234-abcd-1');
var timeend = new Date().getTime();
alert('最大话编译一次时间:'+(timeend-timestart)+'毫秒');
timestart = new Date().getTime();
//输出HTML
var html=bat('t:_1234-abcd-1',data);
timeend = new Date().getTime();
alert('运行时间:'+(timeend-timestart)+'毫秒');
//显示结果
document.getElementById('results').innerHTML=html;
}
</script>
</body>
</html>