簡單模板引擎的實現

2021-09-18 01:27:40 字數 1254 閱讀 2715

需求：根據不同狀態（state為1,2,3三種情況），即type==1；type==2；type==3這三種情況，分別將狀態不同時要展示的內容新增到介面上。

做這個需求的時候，遇到的問題是，由於用的原生js寫的，所以需要操作dom；因此，我要判斷state，判斷以後，再建立新的節點，再將內容新增到節點，，更要命的是，節點裡還有節點需要建立需要新增，如此一來，多次操作節點，整個人都被繞暈了。

而模板語法的話，就可以直接在html裡寫js的邏輯操作，相對來說，就減少了操作dom所花費的精力。

那麼，如何實現模板語法呢？

用以下兩段**來說明：

//在裡的ul下面新增節點


//將script插入到html裡，新增上id:此處為template


/*以下是上面用到的資料內容，陣列裡內容被省略，原來的內容是一維陣列*/


var data = ,


businessplace:,


workunit:


}
接下來是處理這段html和js語句巢狀的**的方法

window.onload = function()


// 模板引擎


var barrettpl = function(str, data) else 


};var tplengine = function(tpl, data) ))(.*)?/g, 


code = 'var r=;\n', 


cursor = 0;


var add = function(line, js) 


while(match = reg.exec(tpl)) 


add(tpl.substr(cursor, tpl.length - cursor));


code += 'return r.join("");';


};
以下是第一版**和模板引擎**的對比：

通常的操作：

詩歌精選
選擇使用模板引擎：

詩歌精選
所以總的來說，就是，模板引擎相較於原生js而言，不用頻繁操作dom，寫起來比較簡單。我用這個知識點也只是實現了我想要的功能，對於這個技術也不是很了解，就是當初看的時候看的很心累，因為不懂，所以希望我這段**的表達方式能夠讓新手理解起來容易一點。

計算幾何的簡單模板

const double eps 1e 8 struct point typedef point vtor 向量的加減乘除 vtor operator vtor a,vtor b vtor operator point a,point b vtor operator vtor a,double p ...

c 之簡單模板的應用

直接上 裡面有一些需要注意的地方 1 函式模板和類模板如下 模板定義 模板就是實現 重用機制的一種工具，它可以實現型別引數化，即把型別定義為引數，從而實現了真正的 可重用性。模版可以分為兩類，乙個是函式模版，另外乙個是類模版。自己學習了c 的模板，感覺還是要自己程式設計才能掌握，所以做了乙個練習如下...

（三十二）模板引擎的簡單實現

var key,options,i 1 變數初始的值i從1開始 因為第乙個傳入的是target，從第二個開始遍歷即templatesettings和settings這兩個進行遍歷 if typeof target object for i len i return target 預設配置解析規則 v...