master

分支 (3)

管理

管理

master

gh-pages

dev

clay
/
test.html

<!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>