模板介绍
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"}Ajax——模板引擎
原文地址：https://www.cnblogs.com/wuqiuxue/p/8176581.html