简单模板引擎运用
效果展示:
代码展示:
<!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">
<title>Document</title>
<style>
li,p{
font-size: 30px;
color: pink;
font-weight: bolder;
}
</style>
</head>
<body>
<div class="container"></div>
<script type="text/html" id="mytemplate">
<p class="p">基本信息</p>
<ul>
<li>姓名:{{name}}</li>
<li>年龄:{{age}}</li>
<li>性别:{{gender}}</li>
</ul>
</script>
<script>
//模板函数
function template(id, data) {
var str = document.getElementById(id).innerHTML;
//定义一个正则表达式
var pattern = /{{([a-zA-Z]+)}}/
var res = null;
while (res = pattern.exec(str)) {
str = str.replace(res[0], data[res[1]]);
}
return str;
}
var data = { name: 'zs', age: 20, gender: 'man' };
//模板预调用
var str = template("mytemplate", data);//注意传入的参数
//渲染到ul界面
var div = document.querySelector(".container");
div.innerHTML = str;
</script>
</body>
</html>
注意事项:
1,模板引擎基本用法步骤。
2,注意template()函数参数的理解:
//模板函数
function template(id, data) {
var str = document.getElementById(id).innerHTML;
//定义一个正则表达式
var pattern = /{{([a-zA-Z]+)}}/
var res = null;
while (res = pattern.exec(str)) {
str = str.replace(res[0], data[res[1]]);
}
return str;
}
注意:拿到模板引擎的方式 (id) 没有'#'
var str = document.getElementById(id).innerHTML;
3,注意在script标签里面调用模板引擎时,传入参数。