封装步骤:
定义自己的模板样式、定义数据、自己封装template函数、调用模板渲染HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./js/template.js"></script>
</head>
<body>
<div id="user-box"></div>
<script type="text/html" id="tpl-user">
<div>姓名:{{name}}</div>
<div>年龄:{{age}}</div>
<div>性别:{{ gender}}</div>
<div>住址:{{ address}}</div>
</script>
<script>
// 定义数据
var data = {
name: '李华',
age: 27,
gender: '男',
address: '*******'
}
var data1 = {
name: '小明',
age: 25,
gender: '男',
address: '&&&&&&&'
}
// 调用模板引擎
var htmlStr = template('tpl-user', data)
var htmlStr1 = template('tpl-user', data1)
// 渲染HTML结构
// console.log(htmlStr);
// console.log(htmlStr1);
let div = document.querySelector('#user-box')
div.innerHTML = htmlStr + htmlStr1
</script>
</body>
</html>
function template(id, data) {
let str = document.getElementById(id).innerHTML
let pattern = /{{\s*([a-zA-Z]+)\s*}}/
let newStr = null
while (newStr = pattern.exec(str)) {
str = str.replace(newStr[0], data[newStr[1]])
}
return str
}