主页 > 前端 > javascript >
来源：未知 时间：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
