layui源碼詳細分析系列之模板引擎

前言

所謂的模板引擎，其實最早接觸該形式的應該是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內置模塊中的組織結構圖如下所示：
laytpl組織結構圖

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

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

在內部實際上構建成了:

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

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

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

致遠行的你我

本文鏈接：https://blog.csdn.net/s1879046/article/details/76942044

智能推薦

Eureka Client源碼詳細分析

一，Eureka Client概述 1，Eureka Client工作流程圖 2，@EnableDiscoveryClient注解注意：Eureka Client在1版本是必須要加@EnableDiscoveryClient注解的，2版本@EnableDiscoveryClient注解加不加都沒有影響。 3，EurekaClientConfig和EurekaInstanceConfig Eure...

LiveData詳細分析

目錄介紹 01.LiveData是什么東西 02.使用LiveData的優勢 03.使用LiveData的步驟 04.簡單使用LiveData 05.observe()和observerForever() 06.LiveData原理介紹 07.observe訂閱源碼分析 08.setValue發送源碼分析 09.observeForever源碼 10.LiveData源碼總結 00.使用LiveD...

Lifecycle詳細分析

Lifecycle源碼分析目錄介紹 01.Lifecycle的作用是什么 02.Lifecycle的簡單使用 03.Lifecycle的使用場景 04.如何實現生命周期感知 05.注解方法如何被調用 06.addObserver調用分析 07.知識點梳理和總結一下 00.使用AAC實現bus事件總線利用LiveData實現事件總線，替代EventBus。充分利用了生命周期感知功能，可以在act...

ConcurrentHashmap 詳細分析

詳盡的分析 JDK8 后的ConcurrentHashmap，思路分析輔以源碼走讀，徹底讀懂 ConcurrentHashmap。簡介放入數據容器元素總數更新容器擴容協助擴容遍歷簡介在從 JDK8 開始，為了提高并發度，ConcurrentHashMap的源碼進行了很大的調整。在 JDK7 中，采用的是分段鎖的思路。簡單的說，就是ConcurrentHashMap是由多個HashM...

ION詳細分析

參考： http://blog.csdn.net/armwind/article/details/53454251?locationNum=2&fps=1 代碼路徑驅動代碼： kernel-3.18/drivers/staging/android/ion Native lib代碼: system\core\libion & vendor/mediatek/proprietary/...