模板引擎的基础工作原理

104 阅读 0 评论 69 点赞

我是靠谱客的博主端庄大地，这篇文章主要介绍模板引擎的基础工作原理，现在分享给大家，希望可以做个参考。

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

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

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

需求如下：

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

姓名	学号	性别
小张	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标签中追加新的标签，就可以方便的生成这个表格结构。

比如：

复制代码

1
2
3
4
5
6
7
8
9
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）采用模板代替字符串拼接

复制代码

1
2
3
4
5
6
7
8
9
<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代码
}

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

复制代码

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

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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>