摘要：翻譯行代碼創(chuàng)造模板引擎一想看博客原文鏈接，請(qǐng)點(diǎn)擊下方一個(gè)非常好用的學(xué)習(xí)正則表達(dá)的網(wǎng)站正則表達(dá)式圖文解說網(wǎng)站譯文事情的起因，我想編寫一個(gè)邏輯簡單的模板引擎，它可以很好滿足我現(xiàn)在的需求。，表示全局匹配。

JavaScript template engine in just 20 lines

一個(gè)非常好用的學(xué)習(xí)正則表達(dá)的網(wǎng)站
正則表達(dá)式圖文解說網(wǎng)站

事情的起因，我想編寫一個(gè)邏輯簡單的模板引擎，它可以很好滿足我現(xiàn)在的需求。

我知道不能找一些現(xiàn)有的引擎，因?yàn)樗鼈兘^大多數(shù)是基于NodeJS的，很難在瀏覽器中去實(shí)現(xiàn)它們。

而我希望用原生JavaScript去寫，這樣也可以在瀏覽器上運(yùn)行。

我是從John Resig的博客[](https://johnresig.com/blog/ja...。

我稍微改動(dòng)了一下，縮減到20行。 這個(gè)腳本的工作原理，非常有趣。

在本文中， 將一步一步來創(chuàng)建這個(gè)引擎，這樣你就體會(huì)到來自John的奇思妙想。

functiom TemplateEngine(tpl, data) {
    //魔法細(xì)節(jié)在這里 magic details here!
}

var tpl = "
Hello, my name is <%name%>. I"m <%age%> years old.
";

var data = {
    name: "Shaw",
    age: 18
}

console.log(TemplateEngine(tpl, data)); 
//按照構(gòu)思，我們想實(shí)現(xiàn)的需要和想得到結(jié)果 應(yīng)該是 "
Hello, my name is Shaw. I"m 18 years old.
"

一個(gè)簡單的函數(shù)，接收兩個(gè)參數(shù)：tpl（模板字符竄），data（JS對(duì)象格式）；

動(dòng)態(tài)模塊是指在 tpl（模板字符竄）中，你想要匹配并用數(shù)據(jù)替換的部分。

"<%string%>"

//舉個(gè)例子
//tpl中的動(dòng)態(tài)模塊有兩個(gè)：<%name%>和<%age%>。

var tpl = "
Hello, my name is <%name%>. I"m <%age%> years old.
";

在這里，我決定用正則表達(dá)式去實(shí)現(xiàn)，正則表達(dá)式不是我的強(qiáng)項(xiàng)，所以有什么建議，盡管暢所欲言。

Tips: 其實(shí)正則沒那么難，平時(shí)多練練就好了。 首先克服內(nèi)心的恐懼，嘗試著寫，想不出來，多翻翻基礎(chǔ)知識(shí)。

var regEx = /<%([^%>]+)?%>/g

這個(gè)正則表達(dá)式是什么意思呢？

如果實(shí)在看不懂正則，可以看下這篇博客。 正則表達(dá)式-基礎(chǔ)知識(shí)Review

在一個(gè)字符竄中，匹配以"<%"開頭 和 "%>" 結(jié)尾的字符竄片段。

g，表示全局匹配。

在這里，我們需要用到正則表達(dá)式的exec()方法。

該方法用于正則表達(dá)式模式在字符竄中運(yùn)行查找，如果exec()找到匹配的文本，則返回一個(gè)數(shù)組，否則返回null。

regExp.exec(str);

var tpl = "
Hello, my name is <%name%>. I"m <%age%> years old.
";
var regEx =  /<%([^%>]+)?%>/g;

console.log(regEx.exec(tpl));
/*
[0: "<%name%>", 1: "name", index: 21, input: "
Hello, my name is <%name%>. I"m <%age%> years old.
", length: 2, groups: undefined]
*/

得到了正則表達(dá)式在字符竄中匹配的字符竄片段。

只得到一個(gè)匹配的字符竄片段！

可是我們需要所有匹配的字符竄片段。

這時(shí)，我們需要一個(gè)while循環(huán)語句來依次得到匹配字符竄。

var tpl = "
Hello, my name is <%name%>. I"m <%age%> years old.
";

var regEx = /<%([^%>]+)?%>/g;

var match;

while(match = regEx.exec(tpl)) {

    console.log(match);

    //["<%name%>", "name", index: 21, input: "
Hello, my name is <%name%>. I"m <%age%> years old.
", groups: undefined]

    //["<%age%>", "age", index: 35, input: "
Hello, my name is <%name%>. I"m <%age%> years old.
", groups: undefined]
}

這里要了解RegExp.exec()方法，在全局匹配中的特性：

調(diào)用全局的RegExp對(duì)象的exec()時(shí)，它會(huì)在RegExp實(shí)例的lastIndex屬性指定的字符處開始檢索字符竄string

當(dāng)exec()找到了與表達(dá)式相匹配的文本時(shí)， 在匹配后， 它將把RegExp實(shí)例的lastIndex屬性設(shè)置為匹配文本的最后一個(gè)字符的下一個(gè)位置。可以通過反復(fù)調(diào)用exec()方法來遍歷字符竄中的所有匹配文本。

==當(dāng)exec()再也找不到匹配的文本時(shí)，它將返回null，并把lastIndex屬重置為0。==

var reg = /d/g;

var r =  reg.exec("a1b2c3");

console.log(r);

console.log(reg.lastIndex); // 2

r = reg.exec("a1b2c3");

console.log(reg.lastIndex); // 4

var reg = /d/g;

while (r = reg.exec("a1b2c3")) {
    console.log(r.index + ":" + r[0])
}

//1:1 , 3:2, 5:3

現(xiàn)在，變得有趣了！！

給函數(shù)傳遞一個(gè)真實(shí)的數(shù)據(jù)（JS對(duì)象格式）。

然后用數(shù)據(jù)替換匹配的字符竄片段。

能想到的最簡單的方法，就是使用String.prototype.replace()方法了。

我們可以這樣寫

function TemplateEngine(tpl, data){
    var regEx = /<%([^%>]+)?%>/g, matchStrArr;

    while(matchStrArr = regEx.exec(tpl)) {
        tpl = tpl.replace(matchStrArr[0], data[matchStrArr[1]])
    }

    return tpl;
}

var tpl = "
Hello, my name is <%name%>. I"m <%age%> years old.
";

var personalInfo = {
    name: "Shaw",
    age: 18
}

var htmlStr = TemplateEngine(tpl, personalInfo);

console.log(htmlStr); // 
Hello, my name is Shaw. I"m 18 years old.

//運(yùn)行成功，可以使用。

測試，運(yùn)行成功！

但是這還不夠好，數(shù)據(jù)是非常簡單的JS對(duì)象，使用object["property"]對(duì)象的中括號(hào)語法，很容易去讀取對(duì)象的值。

但在實(shí)踐中，我們用到的數(shù)據(jù)中，可能有復(fù)雜的嵌套對(duì)象。

//嵌套對(duì)象
data = {
    name: "Krasimir Tsonev",
    profile: {age:29}
}