模板引擎的基础工作原理

2018-06-24 02:13:52来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

模板引擎的基本工作原理,简单来说就是利用正则表达式,替换模板当中预先定义好的标签。

具体是怎么运行的,下面我们举个简单的例子

-----------------------------------------------------------------------------

需求如下:

需要在网页上以表格的形式显示一个班级内各个学生的数据,例如:

姓名 学号 性别
小张 01
小四 02 
王五 03

 

 

 

 

假设我们从数据库中拿出来的数据是JSON格式,如下:

user =[{"name":"小张", "num":"01", "sex":"男"},
    {"name":"小四", "num":"02", "sex":"女"},
    {"name":"小五", "num":"03", "sex":"女"},
    ...
    ...
    {"name":"六", "num":"33", "sex":"女"}];

那,怎么将JSON格式的数据方便的放入到HTML结构中呢?

表格中每一行的html结构,只有"姓名","学号"和"性别"三个地方不同。那我们可以将每一行数据中相同的结构提取出来,姓名,学号和性别作为参数。然后使用javascript的方法,循环向table标签中追加新的标签,就可以方便的生成这个表格结构。

比如:

function getHTMLElement(name, num, sex) { 
    return  "<tr><td>" + name + "</td><td>" + num + "</td><td>" + sex + "</td></tr>";
}
var str = "";
for(i = 0; i < user.length; i++){
    str += getHTMLELement(user[i][name], user[i][num], user[i][sex])
}
document.getElementById("#table").innerHTML = str;

-----------------------------------------------------------------------------

但采用字符串拼接的形式,太过于麻烦,而且也不使用于复杂的场景,比如如果标签上存在属性,就必须考虑单引号双引号问题。所以,模板引擎采用正则匹配代替字符串拼接:代码更改如下

1)采用模板代替字符串拼接

<script type="text/plain"  id="template">  // 注意这个地方的type不能设置成text/javascript,要不浏览器就会以js解析标签中的数据,会报错
<
tr> <td>{{ name }}</td> <td>{{ num }}</td> <td>{{ sex }}</td> </tr>
</script>

 采用在script标签中写html结构的方式代替字符串拼接写结构。需要填充数据的地方,使用一种约定好的标记,比如我们这里,约定以

     {{ + 0~多个空格  + 代码具体数据的标识符 + 0~多个空格 + }}   

以"{{"开始以"}}"结束是为了将需要填充数据的部分与其他正常的html代码区分开来。

function template(tpl, data) {

var reg = /{{\s+([a-zA-Z]+)\s+}}/;  //用来匹配模板中的需填充字段

html = document.getElementById(tpl).innerHTML; //获取模板

var match;
while(match = reg.exec(html)) {    //遍历获取模板中所有需填充字段

console(match);   //  打印结果如 =>  ["{{ name }}", "name", index: 8, input: "<tr><td>{{name}}</td><td>{{num}}</td><td>{{sex}}</td></tr>"]

html = html.replace(match[0], data[match[1]]);  //实行替换
}

return  html;//返回替换好的html代码
}

最后一步只需要将数据追加到结构中就好

var str = "";
for(i = 0; i < user.length; i++){
    str += template("template", user[i]);
}
document.getElementById("#table").innerHTML = str;

-----------------------------------------------------------------------------

 最后给出一个完整版的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>模板引擎原理分析</h2>
    <table id="table" border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>学号</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody id="tBody">
        </tbody>
    </table>

    <script type="text/plain"  id="template">
        <tr>
            <td>{{ name }}</td>
            <td>{{ num }}</td>
            <td>{{ sex }}</td>
        </tr>
    </script>
    <script>
    //模板数据填充函数
        function example(tpl, data) {

            var reg = /{{\s+([a-zA-Z]+)\s+}}/;

            html = document.getElementById(tpl).innerHTML;

            var match;
            while(match = reg.exec(html)) {
                html = html.replace(match[0], data[match[1]]);
            }

            return html;
        }

    //JSON格式数据
    user =[{"name":"小张", "num":"01", "sex":"男"},
           {"name":"小四", "num":"02", "sex":"女"}, 
           {"name":"小五", "num":"03", "sex":"女"},
           {"name":"六", "num":"33", "sex":"女"}];

    var str = "";
    for(i = 0; i < user.length; i++){
        str += example("template", user[i]);
    }
    document.getElementById("tBody").innerHTML = str;
    </script>
</body>
</html>

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:博客园 css页面定制代码

下一篇:HTML 教程- (HTML5 标准)摘抄笔记