只有20行Javascript代码！手把手教你写一个页面模板引擎
不知道你有木有据说过一个基于Javascript的Web页面预处理器，叫作AbsurdJS。我是它的做者，目前我还在不断地完善它。最初我只是打算写一个CSS的预处理器，不事后来扩展到了CSS和HTML，能够用来把Javascript代码转成CSS和HTML代码。固然，因为能够生成HTML代码，你也能够把它当成一个模板引擎，用于在标记语言中填充数据。javascript
因而我又想着能不能写一些简单的代码来完善这个模板引擎，又能与其它现有的逻辑协同工做。AbsurdJS自己主要是以NodeJS的模块的形式发布的，不过它也会发布客户端版本。考虑到这些，我就不能直接使用现有的引擎了，由于它们大部分都是在NodeJS上运行的，而不能跑在浏览器上。我须要的是一个小巧的，纯粹以Javascript编写的东西，可以直接运行在浏览器上。当我某天偶然发现John Resig的这篇博客，我惊喜地发现，这不正是我苦苦寻找的东西嘛！我稍稍作了一些修改，代码行数差很少20行左右。其中的逻辑很是有意思。在这篇文章中我会一步一步重现编写这个引擎的过程，若是你能一路看下去的话，你就会明白John的这个想法是多么犀利！css
最初个人想法是这样子的：html
|
1
2
3
4
5
6
7
8
|
var
TemplateEngine =
function
(tpl, data) {
// magic here ...
}
var
template =
'<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>'
;
console.log(TemplateEngine(template, {
name:
"Krasimir"
,
age: 29
}));
|
一个简单的函数，输入是咱们的模板以及数据对象，输出么估计你也很容易想到，像下面这样子：java
|
1
|
<
p
>Hello, my name is Krasimir. I'm 29 years old.</
p
>
|
其中第一步要作的是寻找里面的模板参数，而后替换成传给引擎的具体数据。我决定使用正则表达式来完成这一步。不过我不是最擅长这个，因此写的很差的话欢迎随时来喷。git
|
1
|
var re = /<%([^%>]+)?%>/g;
|
这句正则表达式会捕获全部以<%开头，以%>结尾的片断。末尾的参数g（global）表示不仅匹配一个，而是匹配全部符合的片断。Javascript里面有不少种使用正则表达式的方法，咱们须要的是根据正则表达式输出一个数组，包含全部的字符串，这正是exec所作的。github
|
1
2
|
var
re = /<%([^%>]+)?%>/g;
var
match = re.exec(tpl);
|
若是咱们用console.log把变量match打印出来，咱们会看见：正则表达式
|
1
2
3
4
5
6
7
|
[
"<%name%>"
,
" name "
,
index: 21,
input:
"<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>"
]
|
不过咱们能够看见，返回的数组仅仅包含第一个匹配项。咱们须要用while循环把上述逻辑包起来，这样才能获得全部的匹配项。数组
|
1
2
3
4
|
var
re = /<%([^%>]+)?%>/g;
while
(match = re.exec(tpl)) {
console.log(match);
}
|
若是把上面的代码跑一遍，你就会看见<%name%> 和 <%age%>都被打印出来了。浏览器
下面，有意思的部分来了。识别出模板中的匹配项后，咱们要把他们替换成传递给函数的实际数据。最简单的办法就是使用replace函数。咱们能够像这样来写：app
|
1
2
3
4
5
6
7
|
var
TemplateEngine =
function
(tpl, data) {
var
re = /<%([^%>]+)?%>/g;
while
(match = re.exec(tpl)) {
tpl = tpl.replace(match[0], data[match[1]])
}
return
tpl;
}
|
好了，这样就能跑了，可是还不够好。这里咱们以data["property"]的方式使用了一个简单对象来传递数据，可是实际状况下咱们极可能须要更复杂的嵌套对象。因此咱们稍微修改了一下data对象：
|
1
2
3
4
|
{
name:
"Krasimir Tsonev"
,
profile: { age: 29 }
}
|
不过直接这样子写的话还不能跑，由于在模板中使用<%profile.age%>的话，代码会被替换成data[‘profile.age’]，结果是undefined。这样咱们就不能简单地用replace函数，而是要用别的方法。若是可以在<%和%>之间直接使用Javascript代码就最好了，这样就能对传入的数据直接求值，像下面这样：
|
1
|
var
template =
'<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>'
;
|
你可能会好奇，这是怎么实现的？这里John使用了new Function的语法，根据字符串建立一个函数。咱们不妨来看个例子：
|
1
2
|
var
fn =
new
Function(
"arg"
,
"console.log(arg + 1);"
);
fn(2);
// outputs 3
|
fn但是一个货真价实的函数。它接受一个参数，函数体是console.log(arg + 1);。上述代码等价于下面的代码：
|
1
2
3
4
|
var
fn =
function
(arg) {
console.log(arg + 1);
}
fn(2);
// outputs 3
|
经过这种方法，咱们能够根据字符串构造函数，包括它的参数和函数体。这不正是咱们想要的嘛！不过先别急，在构造函数以前，咱们先来看看函数体是什么样子的。按照以前的想法，这个模板引擎最终返回的应该是一个编译好的模板。仍是用以前的模板字符串做为例子，那么返回的内容应该相似于：
|
1
2
3
4
5
6
|
return
"<p>Hello, my name is "
+
this
.name +
". I\'m "
+
this
.profile.age +
" years old.</p>"
;
|
固然啦，实际的模板引擎中，咱们会把模板切分为小段的文本和有意义的Javascript代码。前面你可能看见我使用简单的字符串拼接来达到想要的效果，不过这并非100%符合咱们要求的作法。因为使用者极可能会传递更加复杂的Javascript代码，因此咱们这儿须要再来一个循环，以下：
|
1
2
3
4
5
|
var
template =
'My skills:'
+
'<%for(var index in this.skills) {%>'
+
'<a href=""><%this.skills[index]%></a>'
+
'<%}%>'
;
|
若是使用字符串拼接的话，代码就应该是下面的样子：
|
1
2
3
4
5
6
7
|
return
'My skills:'
+
for
(
var
index
in
this
.skills) { +
'<a href="">'
+
this
.skills[index] +
'</a>'
+
}
|
固然，这个代码不能直接跑，跑了会出错。因而我用了John的文章里写的逻辑，把全部的字符串放在一个数组里，在程序的最后把它们拼接起来。
|
1
2
3
4
5
6
7
8
|
var
r = [];
r.push(
'My skills:'
);
for
(
var
index
in
this
.skills) {
r.push(
'<a href="">'
);
r.push(
this
.skills[index]);
r.push(
'</a>'
);
}
return
r.join(
''
);
|
下一步就是收集模板里面不一样的代码行，用于生成函数。经过前面介绍的方法，咱们能够知道模板中有哪些占位符（译者注：或者说正则表达式的匹配项）以及它们的位置。因此，依靠一个辅助变量（cursor，游标），咱们就能获得想要的结果。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
var
TemplateEngine =
function
(tpl, data) {
var
re = /<%([^%>]+)?%>/g,
code =
'var r=[];\n'
,
cursor = 0;
var
add =
function
(line) {
code +=
'r.push("'
+ line.replace(/"/g,
'\\"'
) +
'");\n'
;
}
while
(match = re.exec(tpl)) {
add(tpl.slice(cursor, match.index));
add(match[1]);
cursor = match.index + match[0].length;
}
add(tpl.substr(cursor, tpl.length - cursor));
code +=
'return r.join("");'
;
// <-- return the result
console.log(code);
return
tpl;
}
var
template =
'<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>'
;
console.log(TemplateEngine(template, {
name:
"Krasimir Tsonev"
,
profile: { age: 29 }
}));
|
上述代码中的变量code保存了函数体。开头的部分定义了一个数组。游标cursor告诉咱们当前解析到了模板中的哪一个位置。咱们须要依靠它来遍历整个模板字符串。此外还有个函数add，它负责把解析出来的代码行添加到变量code中去。有一个地方须要特别注意，那就是须要把code包含的双引号字符进行转义（escape）。不然生成的函数代码会出错。若是咱们运行上面的代码，咱们会在控制台里面看见以下的内容：
|
1
2
3
4
5
6
|
var
r=[];
r.push(
"<p>Hello, my name is "
);
r.push(
"this.name"
);
r.push(
". I'm "
);
r.push(
"this.profile.age"
);
return
r.join(
""
);
|
等等，貌似不太对啊，this.name和this.profile.age不该该有引号啊，再来改改。
|
1
2
3
4
5
6
7
8
9
|
var
add =
function
(line, js) {
js? code +=
'r.push('
+ line +
');\n'
:
code +=
'r.push("'
+ line.replace(/"/g,
'\\"'
) +
'");\n'
;
}
while
(match = re.exec(tpl)) {
add(tpl.slice(cursor, match.index));
add(match[1],
true
);
// <-- say that this is actually valid js
cursor = match.index + match[0].length;
}
|
占位符的内容和一个布尔值一块儿做为参数传给add函数，用做区分。这样就能生成咱们想要的函数体了。
|
1
2
3
4
5
6
|
var
r=[];
r.push(
"<p>Hello, my name is "
);
r.push(
this
.name);
r.push(
". I'm "
);
r.push(
this
.profile.age);
return
r.join(
""
);
|
剩下来要作的就是建立函数而且执行它。所以，在模板引擎的最后，把本来返回模板字符串的语句替换成以下的内容：
|
1
|
return
new
Function(code.replace(/[\r\t\n]/g,
''
)).apply(data);
|
咱们甚至不须要显式地传参数给这个函数。咱们使用apply方法来调用它。它会自动设定函数执行的上下文。这就是为何咱们能在函数里面使用this.name。这里this指向data对象。
模板引擎接近完成了，不过还有一点，咱们须要支持更多复杂的语句，好比条件判断和循环。咱们接着上面的例子继续写。
|
1
2
3
4
5
6
7
8
|
var
template =
'My skills:'
+
'<%for(var index in this.skills) {%>'
+
'<a href="#"><%this.skills[index]%></a>'
+
'<%}%>'
;
console.log(TemplateEngine(template, {
skills: [
"js"
,
"html"
,
"css"
]
}));
|
这里会产生一个异常，Uncaught SyntaxError: Unexpected token for。若是咱们调试一下，把code变量打印出来，咱们就能发现问题所在。
|
1
2
3
4
5
6
7
8
9
|
var
r=[];
r.push(
"My skills:"
);
r.push(
for
(
var
index
in
this
.skills) {);
r.push(
"<a href=\"\">"
);
r.push(
this
.skills[index]);
r.push(
"</a>"
);
r.push(});
r.push(
""
);
return
r.join(
""
);
|
带有for循环的那一行不该该被直接放到数组里面，而是应该做为脚本的一部分直接运行。因此咱们在把内容添加到code变量以前还要多作一个判断。
|
1
2
3
4
5
6
7
8
|
var
re = /<%([^%>]+)?%>/g,
reExp = /(^( )?(
if
|
for
|
else
|
switch
|
case
|
break
|{|}))(.*)?/g,
code =
'var r=[];\n'
,
cursor = 0;
var
add =
function
(line, js) {
js? code += line.match(reExp) ? line +
'\n'
:
'r.push('
+ line +
');\n'
:
code +=
'r.push("'
+ line.replace(/"/g,
'\\"'
) +
'");\n'
;
}
|
这里咱们新增长了一个正则表达式。它会判断代码中是否包含if、for、else等等关键字。若是有的话就直接添加到脚本代码中去，不然就添加到数组中去。运行结果以下：
|
1
2
3
4
5
6
7
8
9
|
var
r=[];
r.push(
"My skills:"
);
for
(
var
index
in
this
.skills) {
r.push(
"<a href=\"#\">"
);
r.push(
this
.skills[index]);
r.push(
"</a>"
);
}
r.push(
""
);
return
r.join(
""
);
|
固然，编译出来的结果也是对的。
|
1
|
My skills:<a href=
"#"
>js</a><a href=
"#"
>html</a><a href=
"#"
>css</a>
|
最后一个改进可使咱们的模板引擎更为强大。咱们能够直接在模板中使用复杂逻辑，例如：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
template =
'My skills:'
+
'<%if(this.showSkills) {%>'
+
'<%for(var index in this.skills) {%>'
+
'<a href="#"><%this.skills[index]%></a>'
+
'<%}%>'
+
'<%} else {%>'
+
'<p>none</p>'
+
'<%}%>'
;
console.log(TemplateEngine(template, {
skills: [
"js"
,
"html"
,
"css"
],
showSkills:
true
}));
|
除了上面说的改进，我还对代码自己作了些优化，最终版本以下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var
TemplateEngine =
function
(html, options) {
var
re = /<%([^%>]+)?%>/g, reExp = /(^( )?(
if
|
for
|
else
|
switch
|
case
|
break
|{|}))(.*)?/g, code =
'var r=[];\n'
, cursor = 0;
var
add =
function
(line, js) {
js? (code += line.match(reExp) ? line +
'\n'
:
'r.push('
+ line +
');\n'
) :
(code += line !=
''
?
'r.push("'
+ line.replace(/"/g,
'\\"'
) +
'");\n'
:
''
);
return
add;
}
while
(match = re.exec(html)) {
add(html.slice(cursor, match.index))(match[1],
true
);
cursor = match.index + match[0].length;
}
add(html.substr(cursor, html.length - cursor));
code +=
'return r.join("");'
;
return
new
Function(code.replace(/[\r\t\n]/g,
''
)).apply(options);
}
|
代码比我预想的还要少，只有区区15行！
这篇文章中全部涉及的源代码均可以在这里找到。
- 1. 只有20行Javascript代码！手把手教你写一个页面模板引擎
- 2. 大神手把手教你写一个页面模板引擎，只需20行Javascript代码！
- 3. 100来行代码, 本身动手写一个模板引擎
- 4. 翻译_只需20行代码创造JavaScript模板引擎（二）
- 5. [译] 只有 20 行的 JavaScript 模板引擎
- 6. 学习V神的手把手教你写脚本引擎 一
- 7. 手把手教你写一个RPC
- 8. 手把手教你写一个react validator
- 9. 手把手教你写一个 Webpack Loader
- 10. 手把手教你创建一个Java游戏引擎
- 更多相关文章...
- • Eclipse 代码模板 - Eclipse 教程
- • jQuery Mobile 面板 - jQuery Mobile 教程
- • 再有人问你分布式事务，把这篇扔给他
- • IntelliJ IDEA代码格式化设置
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字节跳动21届秋招运营两轮面试经验分享
- 2. Java 3 年，25K 多吗？
- 3. mysql安装部署
- 4. web前端开发中父链和子链方式实现通信
- 5. 3.1.6 spark体系之分布式计算-scala编程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在线
- 8. 在线画图
- 9. devtools热部署
- 10. 编译和链接