欢迎来到[自学php网] ①群 287460651

主页 > 前端 > javascript >

百度模板引擎BaiduTemplate

来源:未知    时间:2020-02-26 15:04 作者:小飞侠 阅读:

[导读] 今天带来百度模板引擎BaiduTemplate 文档地址: http://baidufe.github.io/BaiduTemplate/ https://github.com/wangxiao/BaiduTemplate/blob/master/test.html 最简单好用的JS模板引擎,JS语法学习无成本,调用也只是一...

今天带来 百度模板引擎BaiduTemplate

文档地址:http://baidufe.github.io/BaiduTemplate/

https://github.com/wangxiao/BaiduTemplate/blob/master/test.html

最简单好用的JS模板引擎,JS语法学习无成本,调用也只是一个函数哦!


栗子:

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


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com