封装简易模板引擎

最新推荐文章于 2022-05-10 21:10:20 发布

在等星星呐

最新推荐文章于 2022-05-10 21:10:20 发布

阅读量98

点赞数

分类专栏：前后端交互文章标签：前后端交互模板引擎

本文链接：https://blog.csdn.net/Primary_Insist/article/details/123235722

版权

前后端交互专栏收录该内容

9 篇文章 0 订阅

订阅专栏

布局结构：

html文件：

<!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>
    <script src="./js/my.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/html" id="tpl-user">
        <div>姓名:{{name}}</div>
        <div>年龄:{{age}}</div>
        <div>性别:{{sex}}</div>
        <div>地址:{{address}}</div>
    </script>
    <script>
        var data={
            name:'张三',
            age:18,
            sex:'男',
            address:'上海'
        };
        var htmlStr=template('tpl-user',data);
        document.getElementById('container').innerHTML=htmlStr;
    </script>
</body>
</html>

js文件

function template(id,data){
    var str=document.getElementById(id).innerHTML;
    var pattern=/{{\s*([a-zA-Z]+)\s*}}/;
    while(pattern.exec(str)){
        str=str.replace(pattern.exec(str)[0],data[pattern.exec(str)[1]]);
    }
    return str;
}

在等星星呐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装简易模板引擎

布局结构：html文件：<!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">.
复制链接

扫一扫