只有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. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven