JavaScript||模仿GitHub模板引擎（实现内容替换）

桃扇骨 2023-03-13 03:43 11阅读 0赞

## 前言 ##

上一篇文章中模板引擎我是直接从GitHub下载的，但是根据自己的实际需求（替换指定内容），完全可以自己写一个满足需求的模板引擎。下面一起康康叭~

## 模板引擎简易版 ##

步骤：  
1）创建模板  
2）获取模板内容  
3）正则表达式定义要检索的字符  
4）定义要替换的具体数据  
5）while循环检索替换

<!DOCTYPE html>
    <html>
        <head>
            <title>面向问题的模板引擎</title>
            <meta charset="utf-8" />
        </head>
        <body>
            <p>面向问题的模板引擎--模板引擎简易版</p>
        </body>
    </html>
    <script type="text/html" id="test">
        <ul>
            <li>名字: { { name}}</li>
            <li>年龄: { { age}}</li>
        </ul>
    </script>
    <script>
        var test = document.getElementById("test").innerHTML;
        console.log(test);
    
        //正则表达式定义要检索的字符
        var str = /{ {(\w+)}}/;
    
        //定义要替换的具体数据
        var date = { 
            name : "张三",
            age : 29
        }
    
        //检索
        while(str.exec(test)){ 
            var res = str.exec(test);
            test = test.replace(res[0], date[res[1]]);
        }
        console.log(test);
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]

## 模板引擎封装 ##

前面很明显将数据写死了，不利于复用。下面先对模板引擎进行封装再使用。（功能和上面一样，不再赘述）  
【mbyq.js】

【index.html】

<!DOCTYPE html>
    <html>
        <head>
            <title>模板引擎封装</title>
            <meta charset="utf-8" />
        </head>
        <body>
            <p>模板引擎封装--模板引擎升级版</p>
        </body>
    </html>
    <script type="text/html" id="test">
        <ul>
            <li>名字: { { name}}</li>
            <li>年龄: { { age}}</li>
        </ul>
    </script>
    <script src="mbyq.js"></script>
    <script>
        var date = { 
            name : "李四",
            age : 18
        };
        var res = mbyq("test", date);
        console.log(res);
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70]: /images/20230312/d47fe576c2b84a2a9f5d954191dec992.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTQzOTIw_size_16_color_FFFFFF_t_70 1]: /images/20230312/c976a219c823482c98310fac33fde6ba.png