模板引擎的原理

1、什么是模板引擎

概念：模板引擎（這里特指用于Web開發(fā)的模板引擎）是為了使用戶界面與業(yè)務(wù)數(shù)據(jù)（內(nèi)容）分離而產(chǎn)生的，它可以生成特定格式的文檔，用于網(wǎng)站的模板引擎就會生成一個標(biāo)準(zhǔn)的文檔。

原理：就我個人的理解模板的誕生是為了將顯示與數(shù)據(jù)分離，其本質(zhì)是將模板文件和數(shù)據(jù)通過模板引擎生成最終的HTML代碼（如圖）

模板引擎的基本機(jī)理就是替換（轉(zhuǎn)換），將指定的標(biāo)簽轉(zhuǎn)換為需要的業(yè)務(wù)數(shù)據(jù)；將指定的偽語句按照某種流程來變換輸出

我們來一行一行的解釋下代碼：

寫一個P標(biāo)簽包裹的字符串，我想展示的是把data里的name,age 里的值替換到字符串里；

全局匹配以<%開頭，中間不是%或>并以%>結(jié)尾的配配項(xiàng)，(如圖 )

如圖所示：如果我們選中了匹配后的數(shù)組的第2項(xiàng)即下標(biāo)為1的 name 和age 并利用data把值傳進(jìn)去就可以達(dá)成我們的目標(biāo)了

小結(jié)：

2、復(fù)雜邏輯模板引擎

問題：

(1)上面以data[“property”]的方式使用了一個簡單對象來傳遞數(shù)據(jù)，但是實(shí)際情況下我們很可能需要更復(fù)雜的嵌套對象。所以我們稍微修改了一下data對象：

(2)這樣子寫的話就實(shí)現(xiàn)不了我們想要的替換了，因?yàn)樵谀０逯惺褂?%profile.age%>的話，代碼會被替換成data[‘profile.age’]，結(jié)果是undefined。

這樣我們就不能簡單地用replace函數(shù)，而是要用別的方法。如果能夠在<%和%>之間直接使用Javascript代碼就最好了，這樣就能對傳入的數(shù)據(jù)直接求值，像下面這樣：

預(yù)備知識：

你可能會好奇，這是怎么實(shí)現(xiàn)的？這里使用了new Function的語法，根據(jù)字符串創(chuàng)建一個函數(shù)。我們不妨來看個例子：

fn可是一個貨真價實(shí)的函數(shù)。它接受一個參數(shù)，函數(shù)體是console.log(arg + 1);上述代碼等價于下面的代碼：

(3)通過這種方法，我們可以根據(jù)字符串構(gòu)造函數(shù)，包括它的參數(shù)和函數(shù)體。在構(gòu)造函數(shù)之前，我們先來看看函數(shù)體是什么樣子的。

按照之前的想法，這個模板引擎最終返回的應(yīng)該是一個編譯好的模板。還是用之前的模板字符串作為例子，那么返回的內(nèi)容應(yīng)該類似于：

(4)當(dāng)然，這個代碼不能直接跑，跑了會出錯。所以把所有的字符串放在一個數(shù)組里，在程序的最后把它們拼接起來。

下一步就是收集模板里面不同的代碼行，用于生成函數(shù)。通過前面介紹的方法，我們可以知道模板中有哪些占位符或者說正則表達(dá)式的匹配項(xiàng),以及它們的位置。

所以，依靠一個輔助變量（cursor，游標(biāo)），我們就能得到想要的結(jié)果。來看下代碼

我們來一行行的解釋下代碼：

生成模板文件跟數(shù)據(jù)；

正則全局匹配以<%開頭，中間不是%或>并以%>結(jié)尾的配配項(xiàng)

code保存函數(shù)體

游標(biāo)cursor告訴我們當(dāng)前解析到了模板中的哪個位置。我們需要依靠它來遍歷整個模板字符串

函數(shù)add，它負(fù)責(zé)把解析出來的代碼行添加到變量code中去。有一個地方需要特別注意，那就是需要把code包含的雙引號字符進(jìn)行轉(zhuǎn)義（escape）。否則生成的函數(shù)代碼會出錯。

HTML web前端

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。