模板介绍
1、必要性：ajax请求从服务器接收到大量数据，此时再用普通的字符串拼接是很耗费时间的，这时候模板就有其必要性
2、便利性：插件套用，现在有很多主流的模板插件：BaiduTemplate(百度开发) 、ArtTemplate(腾讯开发)、 velocity.js(淘宝开发) Handlebars
基本逻辑
1、script标签的type类型不能是默认的，改成text/template，这样就可以作为一个模板而不会被执行了
2、读取模板内的innerHTML
3、正则
4、正则中的exec方法不断的验证模板中是否有匹配的数据，()括号中的子项是键
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/template" id="template"> <ul> <li><%= name %></li> <li><%= age %></li> <li><%= skill %></li> </ul> </script> <script> var tempStr=document.querySelector("#template").innerHTML; var obj={name:'wq',age:17,skill:'eat'}; var str=fox_template_pro(tempStr,obj); document.write(str); /* str:模板 obj:准备替换的数据 */ function fox_template_pro(str, obj) { var reg = /<%=s*([^%>]+S)s*%>/;// 中间的 小括号 可以对 正则 筛选出来的 字符串 再次筛选 var str = str;// 准备挖好坑的字符串 var obj = obj;// 准备 用来填坑的 对象 /* 第一个 <%= name %> 索引为0 第二个 name 索引为1 */ var result; while (result = reg.exec(str)) { var key = result[1];// 获取匹配的key var value = obj[key];// 通过key获取value str = str.replace(result[0], value);// 替换的是<%= name %> } return str;//执行完毕说明替换完成了 } </script> </body> </html>
腾讯模板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="js/template-native.js"></script> <script type="text/template" id="template"> <ul> <li><%=name%></li> <li><%=age%></li> <li><%=skill%></li> <li> <ul> <%for (var i = 0; i < food.length; i++) {%> <li><%=food[i]%></li> <%}%> </ul> </li> </ul> </script> <script> var obj = { name: 'wq', age: 18, skill: 'eat', food: ['米饭', '土豆丝', '番茄', '花生', '玉米'] }; /* 参数1: 模板ID 参数2: 替换数据 */ var resultStr = template('template',obj); document.write(resultStr); </script> </body> </html>
注意事项
1、接收数据单单是数组，必须包裹在对象中传入template方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="js/template-native.js"></script> <script type="text/template" id="template"> <ul> <li> <ul> <%for (var i = 0; i < info.length; i++) {%> <li><%=info[i]%></li> <%}%> </ul> </li> </ul> </script> <script> var ajax = new XMLHttpRequest(); ajax.open('get','10.php'); ajax.send(); ajax.onreadystatechange=function (ev) { if (ajax.readyState==4&&ajax.status==200) { var arr=JSON.parse(ajax.responseText); console.log(arr); var obj={info:arr}; var resultStr=template('template',obj); document.write(resultStr); } } </script> </body> </html>
<?php header("content-type:text/html;charset=utf-8"); echo file_get_contents('files/04.json'); ?>
["wq",17,"eat"]
2、接收数据是字符串，可以用[]括起来，然后包裹在对象中传入template方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script src="js/template-native.js"></script> <script type="text/template" id="template"> <ul> <li> <ul> <%for (var i = 0; i < info.length; i++) {%> <li><%=info[i]['name']%></li> <li><%=info[i]['age']%></li> <li><%=info[i]['sex']%></li> <%}%> </ul> </li> </ul> </script> <script> var ajax = new XMLHttpRequest(); ajax.open('get','10.php'); ajax.send(); ajax.onreadystatechange=function (ev) { if (ajax.readyState==4&&ajax.status==200) { var arr=JSON.parse(ajax.responseText); console.log(arr); var obj={info:[arr]}; var resultStr=template('template',obj); document.write(resultStr); } } </script> </body> </html>
<?php header("content-type:text/html;charset=utf-8"); echo file_get_contents('files/05.json'); ?>
{"name":"zs1","age":17,"sex":"nan"}