实现步骤
- 定义模板结构
- 预调用模板引擎
- 封装template函数
- 导入并使用自定义的模板引擎
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/template.js"></script>
<title>Document</title>
</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: 20, gender: '男', address: '新加坡' }
//调用模板引擎
var htmlStr = template('tpl-user', data)
//渲染html结构
document.getElementById('user-box').innerHTML = htmlStr
</script>
</body>
</html>自己封装的template函数：
function template(id,data){
var str= document.getElementById(id).innerHTML
var pattern=/{{\s*([a-zA-Z]+\s*)}}/
var pattResult=null
while(pattResult=pattern.exec(str)){
str=str.replace(pattResult[0],data[pattResult[1]])
}
return str
}
