模板引擎的基础工作原理

461 0 0

作者:双面猫

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

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

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

需求如下：

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

姓名	学号	性别
小张	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结构的方式代替字符串拼接写结构。需要填充数据的地方，使用一种约定好的标记，比如我们这里，约定以

以"{{"开始以"}}"结束是为了将需要填充数据的部分与其他正常的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>

内容来源于网络如有侵权请私信删除

标签： HTML CSS HTML5 CSS3

你还没有登录，请先登录或注册！

还没有人评论，欢迎说说您的想法！

模板引擎的基础工作原理