最近開發前端一直用的前端模板引擎;
一直使用的 TPPL 模板引擎 源代碼如下:
function tppl(tpl, _data) { tpl = tpl.replace(/(<)/g, "<").replace(/(&)/g, "&").replace(/(>)/g, ">"); var data = _data || {}; if (typeof data !== "object") { console.log("TEFinal -> data is not JSON Object"); return null; } var fn = function(d) { var i, k = [], v = []; for (i in d) { k.push(i); v.push(d[i]); } return new Function(k, fn.$).apply(d, v); }; if ( !fn.$ ) { var tpls = tpl.split(""); fn.$ = "var $empty=""; var $reg = RegExp(/object|undefined|function/i); var $="""; for (var t in tpls) { var p = tpls[t].split(" "); if (t != 0) { fn.$ += "=" == p[0].charAt(0) ? "+($reg.test(typeof(" + p[0].substr(1) + "))?$empty:" + p[0].substr(1) + ")" : ";" + p[0].replace(/ /g, "") + "$=$"; } fn.$ += "+"" + p[p.length - 1].replace(/"/g, """).replace(/ /g, " ").replace(/ /g, " ").replace(/ /g, " ") + """; } fn.$ += ";return $;"; } return data ? fn(data) : fn; }
今天突發奇想,考慮到eval()中放入自執行函數,而這個閉包又可以直接訪問到外部變量,那么經過整理,終極版的模板引擎出爐,代碼如下:
function evalTE (tpl, data) { tpl = tpl.replace(/^s+|s+$/gm, "").replace(/ /g, "").replace(/ /g, "") .replace(/ /g, "").replace(/(<)/g, "<").replace(/(&)/g, "&").replace(/(>)/g, ">"); var fn = "(function(){var $$ = """, evals = tpl.split(""); for (var t in evals) { var p = evals[t].split(" "); if (t != 0) { fn += "=" == p[0].charAt(0) ? "+" + p[0].substr(1) : ";" + p[0] + "$$=$$"; } fn += "+"" + p[p.length - 1] + """; } fn += ";return $$; })();"; return data ? eval(fn) : fn; }
通過eval()自執行函數,函數又可以訪問到外部的 data 數據; 如果不傳需要渲染的數據,那么可以返回該自執行函數字符串。當需要渲染的時候,可以通過eval()或者new Function()來調用
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89958.html
摘要:寫在前面模板的誕生是為了將顯示與數據分離,模板技術多種多樣,但其本質是將模板文件和數據通過模板引擎生成最終的代碼。目前有著很多這種模板引擎,諸如的,,的。當然在用過這么多的模板引擎后,也有著自己實現一個簡易模板引擎的沖動。 寫在前面 模板的誕生是為了將顯示與數據分離,模板技術多種多樣,但其本質是將模板文件和數據通過模板引擎生成最終的HTML代碼。目前有著很多這種模板引擎,諸如Node的...
摘要:個人前端文章整理從最開始萌生寫文章的想法,到著手開始寫,再到現在已經一年的時間了,由于工作比較忙,更新緩慢,后面還是會繼更新,現將已經寫好的文章整理一個目錄,方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法,到著手...
閱讀 1164·2021-09-10 10:51
閱讀 896·2019-08-30 15:53
閱讀 2724·2019-08-30 12:50
閱讀 976·2019-08-30 11:07
閱讀 1990·2019-08-30 10:50
閱讀 3598·2019-08-29 18:47
閱讀 1308·2019-08-29 18:44
閱讀 1599·2019-08-29 17:01