封装一个简易的模板引擎
HTML部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 7 <title>Document</title> 8 <!-- 第一步 导入模板引擎js 文件 --> 9 <script src="./zhouliang.js"></script> 10 </head> 11 <body> 12 <div id="box"></div> 13 <!-- 第三步 定义模板 --> 14 <script type="text/html" id="tpl-zl"> 15 <div>姓名：{{name}}</div> 16 <div>年龄：{{age}}</div> 17 <div>性别：{{sex}}</div> 18 <div>地址：{{address}}</div> 19 </script> 20 <script> 21 // 第二步 定义数据 22 let data = { name: "张三", age: 28, sex: "男", address: "浙江杭州西湖" }; 23 // 第四步 调用模板 24 let htmlStr = zhouliang("tpl-zl", data); 25 // 第五步 添加到html结构中 26 document.getElementById("box").innerHTML = htmlStr; 27 </script> 28 </body> 29 </html>
JS部分
1 function zhouliang(id, data) { 2 // 获取字符串 3 let str = document.getElementById(id).innerHTML; 4 // 书写正则 5 let reg = /{{\s*([a-zA-Z]+)\s*}}/g; 6 // 正则全局匹配替换 7 str = str.replace(reg, (...args) => { 8 return data[args[1]]; 9 }); 10 // 将结果返回 11 return str; 12 }
