JavaScript模板引擎实现数据交互
经过1年的磨练，近期终于稍微明白到,前端是怎么做到企业要求的:数据交互.
1,ajax+json这个是必须学的,但没问题,我们可以通过这个博客来慢慢了解怎么回事？
2,可以通过JS框架和JS模板来实现,但最后还是要用到ajax+json的.
注意:
个人建议如下：
假如项目页面数量是少于50-100个的，那么推荐使用JS模板引擎；
如果大于100个的用JS框架.各有各优势嘛。
先分享JS模板的内容:我这次推荐使用百度的模板引擎,因为他比腾讯的art运行速度快1倍.(而且腾讯的模板，我看不懂怎么分情况去做.)
HTML：这个是官方的
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title> <!-- 引入baiduTemplate -->
<script type="text/javascript" src="js/template.min.js"></script> </head>
<body>
<h3>BaiduTemplate单元测试用例</h3>
<!-- 测试模板1开始 -->
<script id='content' 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('content'); var timeend = new Date().getTime();
alert('最大话编译一次时间：'+(timeend-timestart)+'毫秒');
timestart = new Date().getTime();
//输出HTML
var html=bat('content',data);
timeend = new Date().getTime();
alert('运行时间：'+(timeend-timestart)+'毫秒');
//显示结果
document.getElementById('results').innerHTML=html;
}
</script> </body>
</html>
官方的JS代码:有心学习的，还是要认真看看里面的注释！
/**
* 特性:
1、语法简单，学习成本极低，开发效率提升很大，性价比较高（使用Javascript原生语法）；
2、默认HTML转义（防XSS攻击），并且支持包括URL转义等多种转义；
3、变量未定义自动输出为空，防止页面错乱；
4、功能强大，如分隔符可自定等多种功能；
*/ ;(function(window){ //取得浏览器环境的baidu命名空间，非浏览器环境符合commonjs规范exports出去
//修正在nodejs环境下，采用baidu.template变量名
var baidu = typeof module === 'undefined' ? (window.baidu = window.baidu || {}) : module.exports; //模板函数（放置于baidu.template命名空间下）
baidu.template = function(str, data){ //检查是否有该id的元素存在，如果有元素则获取元素的innerHTML/value，否则认为字符串为模板
var fn = (function(){ //判断如果没有document，则为非浏览器环境
if(!window.document){
return bt._compile(str);
}; //HTML5规定ID可以由任何不包含空格字符的字符串组成
var element = document.getElementById(str);
if (element) { //取到对应id的dom，缓存其编译后的HTML模板函数
if (bt.cache[str]) {
return bt.cache[str];
}; //textarea或input则取value，其它情况取innerHTML
var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;
return bt._compile(html); }else{ //是模板字符串，则生成一个函数
//如果直接传入字符串作为模板，则可能变化过多，因此不考虑缓存
return bt._compile(str);
}; })(); //有数据则返回HTML字符串，没有数据则返回函数 支持data={}的情况
var result = bt._isObject(data) ? fn( data ) : fn;
fn = null; return result;
}; //取得命名空间 baidu.template
var bt = baidu.template; //标记当前版本
bt.versions = bt.versions || [];
bt.versions.push('1.0.6'); //缓存 将对应id模板生成的函数缓存下来。
bt.cache = {}; //自定义分隔符，可以含有正则中的字符，可以是HTML注释开头 <! !>
bt.LEFT_DELIMITER = bt.LEFT_DELIMITER||'<%';
bt.RIGHT_DELIMITER = bt.RIGHT_DELIMITER||'%>'; //自定义默认是否转义，默认为默认自动转义
bt.ESCAPE = true; //HTML转义
bt._encodeHTML = function (source) {
return String(source)
.replace(/&/g,'&')
.replace(/</g,'<')
.replace(/>/g,'>')
.replace(/\\/g,'\')
.replace(/"/g,'"')
.replace(/'/g,''');
}; //转义影响正则的字符
bt._encodeReg = function (source) {
return String(source).replace(/([.*+?^=!:${}()|[\]/\\])/g,'\\$1');
}; //转义UI UI变量使用在HTML页面标签onclick等事件函数参数中
bt._encodeEventHTML = function (source) {
return String(source)
.replace(/&/g,'&')
.replace(/</g,'<')
.replace(/>/g,'>')
.replace(/"/g,'"')
.replace(/'/g,''')
.replace(/\\\\/g,'\\')
.replace(/\\\//g,'\/')
.replace(/\\n/g,'\n')
.replace(/\\r/g,'\r');
}; //将字符串拼接生成函数，即编译过程(compile)
bt._compile = function(str){
var funBody = "var _template_fun_array=[];\nvar fn=(function(__data__){\nvar _template_varName='';\nfor(name in __data__){\n_template_varName+=('var '+name+'=__data__[\"'+name+'\"];');\n};\neval(_template_varName);\n_template_fun_array.push('"+bt._analysisStr(str)+"');\n_template_varName=null;\n})(_template_object);\nfn = null;\nreturn _template_fun_array.join('');\n";
return new Function("_template_object",funBody);
}; //判断是否是Object类型
bt._isObject = function (source) {
return 'function' === typeof source || !!(source && 'object' === typeof source);
}; //解析模板字符串
bt._analysisStr = function(str){ //取得分隔符
var _left_ = bt.LEFT_DELIMITER;
var _right_ = bt.RIGHT_DELIMITER; //对分隔符进行转义，支持正则中的元字符，可以是HTML注释 <! !>
var _left = bt._encodeReg(_left_);
var _right = bt._encodeReg(_right_); str = String(str) //去掉分隔符中js注释
.replace(new RegExp("("+_left+"[^"+_right+"]*)//.*\n","g"), "$1") //去掉注释内容 <%* 这里可以任意的注释 *%>
//默认支持HTML注释，将HTML注释匹配掉的原因是用户有可能用 <! !>来做分割符
.replace(new RegExp("<!--.*?-->", "g"),"")
.replace(new RegExp(_left+"\\*.*?\\*"+_right, "g"),"") //把所有换行去掉 \r回车符 \t制表符 \n换行符
.replace(new RegExp("[\\r\\t\\n]","g"), "") //用来处理非分隔符内部的内容中含有 斜杠 \ 单引号 ‘ ，处理办法为HTML转义
.replace(new RegExp(_left+"(?:(?!"+_right+")[\\s\\S])*"+_right+"|((?:(?!"+_left+")[\\s\\S])+)","g"),function (item, $1) {
var str = '';
if($1){ //将 斜杠 单引 HTML转义
str = $1.replace(/\\/g,"\").replace(/'/g,''');
while(/<[^<]*?'[^<]*?>/g.test(str)){ //将标签内的单引号转义为\r 结合最后一步，替换为\'
str = str.replace(/(<[^<]*?)'([^<]*?>)/g,'$1\r$2')
};
}else{
str = item;
}
return str ;
}); str = str
//定义变量，如果没有分号，需要容错 <%var val='test'%>
.replace(new RegExp("("+_left+"[\\s]*?var[\\s]*?.*?[\\s]*?[^;])[\\s]*?"+_right,"g"),"$1;"+_right_) //对变量后面的分号做容错(包括转义模式 如<%:h=value%>) <%=value;%> 排除掉函数的情况 <%fun1();%> 排除定义变量情况 <%var val='test';%>
.replace(new RegExp("("+_left+":?[hvu]?[\\s]*?=[\\s]*?[^;|"+_right+"]*?);[\\s]*?"+_right,"g"),"$1"+_right_) //按照 <% 分割为一个个数组，再用 \t 和在一起，相当于将 <% 替换为 \t
//将模板按照<%分为一段一段的，再在每段的结尾加入 \t,即用 \t 将每个模板片段前面分隔开
.split(_left_).join("\t"); //支持用户配置默认是否自动转义
if(bt.ESCAPE){
str = str //找到 \t=任意一个字符%> 替换为 ‘，任意字符,'
//即替换简单变量 \t=data%> 替换为 ',data,'
//默认HTML转义 也支持HTML转义写法<%:h=value%>
.replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'");
}else{
str = str //默认不转义HTML转义
.replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':$1,'");
}; str = str //支持HTML转义写法<%:h=value%>
.replace(new RegExp("\\t:h=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'") //支持不转义写法 <%:=value%>和<%-value%>
.replace(new RegExp("\\t(?::=|-)(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':$1,'") //支持url转义 <%:u=value%>
.replace(new RegExp("\\t:u=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':encodeURIComponent($1),'") //支持UI 变量使用在HTML页面标签onclick等事件函数参数中 <%:v=value%>
.replace(new RegExp("\\t:v=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':baidu.template._encodeEventHTML($1),'") //将字符串按照 \t 分成为数组，在用'); 将其合并，即替换掉结尾的 \t 为 ');
//在if，for等语句前面加上 '); ，形成 ');if ');for 的形式
.split("\t").join("');") //将 %> 替换为_template_fun_array.push('
//即去掉结尾符，生成函数中的push方法
//如：if(list.length=5){%><h2>',list[4],'</h2>');}
//会被替换为 if(list.length=5){_template_fun_array.push('<h2>',list[4],'</h2>');}
.split(_right_).join("_template_fun_array.push('") //将 \r 替换为 \
.split("\r").join("\\'"); return str;
}; })(window);
我压缩后的JS代码:
;(function(window){var baidu=typeof module==="undefined"?(window.baidu=window.baidu||{}):module.exports;
//模板函数(放置于baidu.template命名空间下)
baidu.template=function(str,data){var fn=(function(){if(!window.document){return bt._compile(str)}var element=document.getElementById(str);if(element){if(bt.cache[str]){return bt.cache[str]}var html=/^(textarea|input)$/i.test(element.nodeName)?element.value:element.innerHTML;return bt._compile(html)}else{return bt._compile(str)}})();var result=bt._isObject(data)?fn(data):fn;fn=null;return result};
var bt=baidu.template;//取得命名空间 baidu.template
bt.versions=bt.versions||[];bt.versions.push("1.0.6");bt.cache={};
//自定义分隔符，可以含有正则中的字符，可以是HTML注释开头 <! !>
bt.LEFT_DELIMITER=bt.LEFT_DELIMITER||"<%";bt.RIGHT_DELIMITER=bt.RIGHT_DELIMITER||"%>";
bt.ESCAPE=true;bt._encodeHTML=function(source){return String(source).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/\\/g,"\").replace(/"/g,""").replace(/'/g,"'")};bt._encodeReg=function(source){return String(source).replace(/([.*+?^=!:${}()|[\]/\\])/g,"\\$1")};bt._encodeEventHTML=function(source){return String(source).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'").replace(/\\\\/g,"\\").replace(/\\\//g,"/").replace(/\\n/g,"\n").replace(/\\r/g,"\r")};bt._compile=function(str){var funBody="var _template_fun_array=[];\nvar fn=(function(__data__){\nvar _template_varName='';\nfor(name in __data__){\n_template_varName+=('var '+name+'=__data__[\"'+name+'\"];');\n};\neval(_template_varName);\n_template_fun_array.push('"+bt._analysisStr(str)+"');\n_template_varName=null;\n})(_template_object);\nfn=null;\nreturn _template_fun_array.join('');\n";
return new Function("_template_object",funBody);};bt._isObject=function(source){return'function'===typeof source||!!(source&&'object'===typeof source)};bt._analysisStr=function(str){var _left_=bt.LEFT_DELIMITER;var _right_=bt.RIGHT_DELIMITER;var _left=bt._encodeReg(_left_);var _right=bt._encodeReg(_right_);str=String(str).replace(new RegExp("("+_left+"[^"+_right+"]*)//.*\n","g"),"$1").replace(new RegExp("<!--.*?-->","g"),"").replace(new RegExp(_left+"\\*.*?\\*"+_right,"g"),"").replace(new RegExp("[\\r\\t\\n]","g"),"").replace(new RegExp(_left+"(?:(?!"+_right+")[\\s\\S])*"+_right+"|((?:(?!"+_left+")[\\s\\S])+)","g"),function(item,$1){var str="";if($1){str=$1.replace(/\\/g,"\").replace(/'/g,"'");while(/<[^<]*?'[^<]*?>/g.test(str)){str=str.replace(/(<[^<]*?)'([^<]*?>)/g,"$1\r$2")}}else{str=item}return str});str=str.replace(new RegExp("("+_left+"[\\s]*?var[\\s]*?.*?[\\s]*?[^;])[\\s]*?"+_right,"g"),"$1;"+_right_).replace(new RegExp("("+_left+":?[hvu]?[\\s]*?=[\\s]*?[^;|"+_right+"]*?);[\\s]*?"+_right,"g"),"$1"+_right_).split(_left_).join("\t");if(bt.ESCAPE){str=str.replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'")}else{str=str.replace(new RegExp("\\t=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':$1,'")}str=str.replace(new RegExp("\\t:h=(.*?)"+_right,"g"),"',typeof($1) === 'undefined'?'':baidu.template._encodeHTML($1),'").replace(new RegExp("\\t(?::=|-)(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':$1,'").replace(new RegExp("\\t:u=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':encodeURIComponent($1),'").replace(new RegExp("\\t:v=(.*?)"+_right,"g"),"',typeof($1)==='undefined'?'':baidu.template._encodeEventHTML($1),'").split("\t").join("');").split(_right_).join("_template_fun_array.push('").split("\r").join("\\'");return str};})(window);
今天我发现，如果你直接拿官方的来去压缩，有可能会出错,因为网上不是所有的JS压缩工具都会帮你做好，
同时你有可能会发现,压缩前跟压缩后运行的时间并不一样，压缩后的代码可能会经常性的慢2-5毫秒不等.
原因:JavaScript处理的HTML的内容,其实我们应该压缩的是html,而不是JS.
那么我们为什么习惯性或者道听途说的遇到这样就压缩JS文件呢？那是为了后端.
你所不知道的是对于大型项目来说，10KB可以让你的公司每年节省不少费用.
所以，前端需要压缩的文件有html,css,js,img，对就是全部文件都得压缩，当然了，img得分情况，不然压缩后会失真.
好了，现在分享下我对模板引擎的一些使用分享:
<!DOCTYPE html>
<html>
<head>
<title>百度JS模板引擎</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" name="no-store" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" />
<meta name="renderer" content="webkit">
<meta name="msapplication-tap-highlight" content="no">
<script type="text/javascript" src="js/template.min.js"></script>
<style>
li{list-style:none;}
</style>
</head> <body>
<!-- 模板开始 -->
<script id='content' type="text/html">
<h1><%=title%></h1> <ul>
<!-- 循环语句 for-->
<%for(var i=0,len=list.length;i<len;i++){%>
<li>
<%=list[i]%>
</li>
<%}%>
</ul> <!-- 判断语句if else;是用来dom判断选择的-->
<%var j=0%>
<%if(select.length>1) { %>
<h2>select,共有<%=select.length%>个元素</h2>
<ul>
<li>
<%=select[j]%>
</li>
<!--
<%for(var j=0,len=select.length;j<len;j++){%>
<li><%=select[j]%></li>
<%}%>
-->
</ul>
<%}
else{%>
<h2>select没数据</h2>
<%}%>
<p><%=footer%></p>
</script>
<!-- 模板结束 -->
<div id="results"></div> <script type="text/javascript">
var data = {
title: "百度JS模板引擎--数据交互的学习",
list: [
"这里使用的是for循环",
"for循环的作用是用来遍历数据"
],
select: [
"if语句的使用是用来dom判断选择的;同时只能输出一个数据",
"想把这个给遍历出来吗？那就用for循环"
],
footer:"不需要考虑太多,直接用<%=value%>来写你的内容即可"
};
//模板调用
var bat = baidu.template;
//输出函数
var fun = bat('content');
//输出HTML
var html = bat('content', data);
//显示结果
document.getElementById('results').innerHTML = html; </script>
</body> </html>
解释下data里面的数据：
title,list在JS里面可以不加引号的,但在JSON里面，你必须得加引号.
好了，我们正常情况下已经完成很多了，那么该怎么做下一步的AJAX呢？
那么我们开始写AJAX只需要把上面JS里面的数据放到JSON里面，把调用函数放到AJAX的回调函数里面就行:
var xml=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
xml.onreadystatechange=function() {
if(xml.readyState==4&&xml.status==200){
/*原理我就不解释了,我们只需要在回调函数里面写这些就行*/
//模板调用
var bat = baidu.template;
//输出函数
var fun = bat('content');
var data = xml.responseText;
var html = bat("content",JSON.parse(xml.responseText));
document.getElementById("results").innerHTML = html;
/*到这里结束*/
}
}
xml.open("GET", "js/template.json", true);
xml.send();
JSON文件如下:
template.json文件路径我是放到js文件夹里面的.
JSON里面都是用{}来括住里面的所有数据:
{
"title": "百度JS模板引擎--数据交互的学习",
"list": [
"这里使用的是for循环",
"for循环的作用是用来遍历数据"
],
"select": [
"if语句的使用是用来dom判断选择的;同时只能输出一个数据",
"想把这个给遍历出来吗？那就用for循环"
],
"footer":"不需要考虑太多,直接用<%=value%>来写你的内容即可"
}
(看到效果了吧，所以我还是推荐 "key":"value" 这样提前把key也写上双引号就简单多了.)
也有写朋友会想到要是用JQ不是更简单吗？(记得在头部引入JQ文件哦)
$.ajax({
type: "get",
dataType: "json",
url: "js/template.json",
success: function(data) {
var bat = baidu.template;
//输出函数
var fun = bat('content');
var html = bat("content",data);
document.getElementById("results").innerHTML = html;
}
});
区别在于:
var data = xml.responseText;
var html = bat("content",JSON.parse(xml.responseText));
JS里面是需要你写上这个来进行数据转换，因为之前是字符串.
JQ不需要是因为它本来就是个库,封装了很多，不然你也不会去用它啦.
好了我们已经把AJAX+JSON，整个数据交互，前端负责的这块写完了，
以后你可能会发现，其实JS模板或JS框架写法非常类似，所以学习起来成本不会特别高.
完整的HTML代码如下:
<!DOCTYPE html>
<html>
<head>
<title>百度JS模板引擎</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Pragma" name="no-store" />
<meta http-equiv="Cache-Control" name="no-store" />
<meta http-equiv="window-target" content="_top" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta content="telephone=no" name="format-detection" />
<meta name="renderer" content="webkit">
<meta name="msapplication-tap-highlight" content="no">
<script type="text/javascript" src="js/template.min.js"></script>
<style>
li {
list-style: none;
}
</style>
</head> <body>
<!-- 模板开始 -->
<script id='content' type="text/html">
<h1><%=title%></h1> <ul>
<!-- 循环语句 for-->
<%for(var i=0,len=list.length;i<len;i++){%>
<li>
<%=list[i]%>
</li>
<%}%>
</ul> <!-- 判断语句if else;是用来dom判断选择的-->
<%var j=0%>
<%if(select.length>1) { %>
<h2>select,共有<%=select.length%>个元素</h2>
<ul>
<li>
<%=select[j]%>
</li>
<!--
<%for(var j=0,len=select.length;j<len;j++){%>
<li><%=select[j]%></li>
<%}%>
-->
</ul>
<%} else{%>
<h2>select没数据</h2>
<%}%>
<p>
<%=footer%>
</p>
</script>
<!-- 模板结束 -->
<div id="results"></div>
<script type="text/javascript">
var xml=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHttp");
xml.onreadystatechange=function() {
if(xml.readyState==4&&xml.status==200){
/*原理我就不解释了,我们只需要在回调函数里面写这些就行*/
//模板调用
var bat = baidu.template;
//输出函数
var fun = bat('content');
var data = xml.responseText;
var html = bat("content", JSON.parse(xml.responseText));
document.getElementById("results").innerHTML = html;
/*到这里结束*/
}
}
xml.open("GET", "js/template.json", true);
xml.send();
</script>
</body> </html>
对于移动端，我一直是坚持写原生JS为主，就算是插件我都坚持找JS的，逼不得已才会去找JQ的来解决企业需求。
我的学习方式是:熟读唐诗300首，不懂吟诗也会偷.(长大了才真正理解小学老师说这个话)
"套模板",我会建立一套适合自己学习的,而且是固定式的"模板",通过练习或实际应用后,会知道优缺点.
(我所指的模板并非IT里面的专业术语，而是我们日常简单的词组,通过固定写法，然后套进去就可以了)
JavaScript模板引擎实现数据交互的更多相关文章
- Ajax概述，封装以及联合模板引擎进行数据交互
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 更多资料可参考Ajax 介绍 ...
- 各种JS模板引擎对比数据(高性能JavaScript模板引擎)
最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...
- 【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...
- 高性能JavaScript模板引擎原理解析
随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC ...
- 高性能JavaScript模板引擎实现原理详解
这篇文章主要介绍了JavaScript模板引擎实现原理详解,本文着重讲解artTemplate模板的实现原理,它采用预编译方式让性能有了质的飞跃,是其它知名模板引擎的25.32 倍,需要的朋友可以参考 ...
- JavaScript模板引擎artTemplate.js——为什么使用模板引擎？
作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...
- JavaScript模板引擎实例应用
在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...
- JavaScript模板引擎
JavaScript模板引擎实例应用 在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...
- 推荐13款javascript模板引擎
javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...
随机推荐
- BZOJ1922 [Sdoi2010]大陆争霸
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- Bzoj2648 SJY摆棋子
Time Limit: 20 Sec Memory Limit: 128 MB Submit: 3128 Solved: 1067 Description 这天,SJY显得无聊.在家自己玩.在一个 ...
- Discuz X1.5 X2.5 X3 UC_KEY Getshell Write PHPCODE into config/config_ucenter.php Via /api/uc.php Vul
目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 在Discuz中,uc_key是UC客户端与服务端通信的通信密钥.因此使用uc_k ...
- Git分支学习简记
简介 开始过了两遍Git的内容,第二天就已经忘记了分支(branch)的概念,开始还觉得不太用的到.然后又看了第二遍,才发现为什么大家说这个是Git里边极其重要的一个东西. 所谓branch,就类似于 ...
- CentOS 下安装
2016年12月5日15:25:58 ----------------------------------- 通常情况下在centos下安装软件就用yum. 关键是,使用yum你要知道安装包的名字是什 ...
- 获取URL列表，设置代理请求URL，https的加密方式处理
做了一个测试的一个小工具,需求如下: 1.有一批URL列表,需要知道哪个URL请求响应内容中包含http:关键字的. 2.url请求包括http和https 2种协议 3.要部署在linux服务器上, ...
- 《JavaScript权威指南》学习笔记 第五天 window对象的方法。
前天和昨天大致浏览了犀牛书的函数.类与模块.正则表达式.JavaScript扩展.以及服务端的js.这些方面对于我目前的水平来说比较难,一些最基本的概念都不能领会.不过最复杂的知识占用平时使用的20% ...
- Mac & XCode 使用技巧总结
Mac OS 是基于UNIX 的操作系统. 一 基本技巧 1. 允许安装任何来源的APP 系统偏好设置 -> 安全性和隐私 -> 通用 选择”允许从以下位置下载的应用程序“ 中的 “任何来 ...
- HDU 1116 Play on Words（有向欧拉判断）
题目链接 题意:给出一些单词,问全部单词能否首尾相连 直接 将每一个单词第一个和最后一个字母建立一条有向边,保证除了首尾两个出入度不相等,其他的要保证相等.还有一个条件就是 首尾两个出入度差为1 同时 ...
- Yocto开发笔记之《根文件系统裁剪》（QQ交流群：519230208）
开了一个交流群,欢迎爱好者和开发者一起交流,转载请注明出处. QQ群:519230208,为避免广告骚扰,申请时请注明 “开发者” 字样 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ...