模闆介紹
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"} 轉載于:https://www.cnblogs.com/wuqiuxue/p/8176581.html