案例：实现简易的模板引擎

2022-10-26 17:28:42 浏览数 (2)

实现步骤

定义模板结构
预调用模板引擎
封装template函数
导入并使用自定义的模板引擎

代码语言：javascript复制

<!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函数：

代码语言：javascript复制

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
}

函数模板引擎

0 人点赞