前言

所謂的模板引擎，其實最早接觸該形式的應該是jsp，在html程式碼中巢狀java程式碼，使用形式與模板很相似，實際上jsp就是一種模板語言，對於模板語言我的瞭解並不多，此處就不再詳細的描述了。

當我看見layui內建的模板引擎模組laytpl.js時，我首先想起的是Vue中{{}}模板的使用，但是Vue中還有雙向繫結的概念（你可已使用get/set方法來實現），laytpl.js中提供的模板型別有兩種，一種是單純的變數解析的形式，形如：

<h3>{{title}}</h3>

還有一種是表示式的解析處理，形如：

{{# 表示式}}

自實現簡單模板解析以及指令

自己實現的部分非常簡單，實際上就是操作DOM獲取指定的結構，替換{{變數}}的值而已，以後會研究Vue相關的原始碼，到時看看Vue中關於模板處理的處理實現，HTML結構以及實現效果圖如下所示：

我實現的模板只是{{}}的形式，不支援表示式的處理，同時實現了v-if、v-text的指令（Vue中相應的指令），實現思路很簡單，具體如下：

• 對於指令獲取節點元素的相應屬性，判斷屬性值對應的變數是否存在，存在就執行相應操作，最後清除掉對應的指令屬性，v-if支援單目運算子！
• 對於{{}}，查詢nodeType為3的文字節點，匹配相應的正則表示式，執行對應變數值內容填充

在上面的實現中使用遞迴函式，遍歷body下所有的節點，區分元素節點以及文字節點做不同的處理。

下面說說laytpl.js模組的處理方式，laytpl的使用形式如下：

laytpl(模板).render(data, function(html) {
	// html：模板解析後的形式
});
 

layuitpl.js內建模組中的組織結構圖如下所示：

可以看出程式碼組織簡潔清晰，主要的方法時render、parsey以及laytpl函式，
這幾個函式的具體功能在上圖中有了較為詳細的描述，該內建模組中是如何實現變數填充的呢？
實際上，在該內建模組內部，是將模板構建成js程式碼的形式，並將其構建成函式，從而完成變數的填充，例如：

var data = {'city': 'shanghai'}
layTpl('歡迎來到{{city}}').render(data, fucntion(html) {})

在內部實際上構建成了:

tpl = '歡迎來到' + (data.city);
tpl = '"use strict; var view = "' + tpl +'; return view;'
var tpl = new Function(d, _escape_, tpl);
 

最後執行tpl方法填充變數，實際上還可以使用ES6中字串模板來實現，當然方法很多種，但殊途同歸。

該內建模組詳細的程式碼註釋以及自實現demo會上傳到我的GitHub上，每天得要接觸新的內容，這樣自己才會一點點成長。