/*
模板引擎封裝template
實現原理:
通過id獲取模板中的內容(注:內容爲字符串)
調用方式:
找到字符串中特殊的符號.如:標籤裏的{{name}}用正則表達式替換
使用對象對應的屬性進行替換
返回字符串
@param id:傳入的模板id.如<script id="template"></script>傳入template
@param:obj:傳入的對象數據.如:data={name:'哈哈',age:34}
*/
代碼如下：
function myTemplate(id,obj){
//獲取字符串
var str = document.querySelector('#'+id).innerHTML;
//定義正則檢索字符串匹配含雙大括號的內容,\w:匹配字符,+:匹配至少一個字符,():多次匹配
var reg = /{{(\w+)}}/;
//檢索滿足條件
var result = reg.exec(str);
//循環替換直到null爲止
while(reg.exec(str)!=null){
//替換字符串
var str = str.replace(result[0],obj[result[1]]);
//再次檢索
var result = reg.exec(str);
}
//獲取結果
//console.log(str);
return str;
}
使用模板引擎:
<!DOCTYPE html>
<html>
<head>
<title>jquery-ajax</title>
<meta charset="UTF-8" />
<style></style>
</head>
<body>
<h1>模板引擎</h2>
<div></div>
<!--模板引擎使用-->
<script id="template" type="text/html">
<ul>
<li>{{name}}</li>
<li>{{age}}</li>
</ul>
</script>
<!--導入自己的模板引擎-->
<script src="./template.js"></script>
<script>
var data={
name:'哈哈',
age:34
}
var str = document.querySelector('#template').innerHTML;
console.log('數據替換前');
console.log(str);
var result = myTemplate('template',data);
console.log('數據替換後');
document.querySelector('div').innerHTML = result;
</script>
</body>
</html>
效果圖:
