關于模板，我倒是用過了不少。最開始要數Java的JSP了，然后接觸了PHP的smarty，再就是Python的jinja2, Django內置模板，現在剛開始看Nodejs，也發現了不少類似的模板引擎，ejs, jade等等吧。

模板帶來的最直接的好處就是加速開發，前后端分離。除此之外，對于字符串的格式化同樣是個比較好的應用。習慣了python中

string = "hello {}".format("郭璞") # hello 郭璞 string = "hello {username}".format(username="郭璞") # hello 郭璞

這樣簡便的用法，突然來到nodejs中，沒有了這類特性的原生支持，寫起來打印語句就老是覺得很別扭，一點都不優雅。然后我就想自己做一個實現上述功能的工具函數，方便自己的使用。然后就想到了模板這一個方向，雖然想法還不夠成熟，甚至是有點拙略，但是“靈（瞎）感（鬧）”還是得記錄一下不是。

Function對象

JavaScript中有這么一個神奇的對象，那就是Function。如果函數體符合語法要求，那么你就可以動態創建出一個自己的函數出來。下面來個簡單的小例子。

無參模式

function create_function(){ var func_body = "var time = new Date(); console.log('創建時間：'+time);"; var func = new Function('', func_body); func(); } create_function();

運行結果如下：

E:\Code\Nodejs\learn\my-work\string>node one.js 創建時間：Tue Jun 13 2017 15:40:15 GMT+0800 (中國標準時間) E:\Code\Nodejs\learn\my-work\string>

有參模式

剛才演示了一個無參數的情況，那么有參數的情況如何呢？

function create_function_with_parameters() { var param1 = "郭璞"; var param2 = "遼寧大連"; var func_body = "console.log('Hello '+param1+', welcome to '+param2+'!' );"; var func = new Function('param1', 'param2', func_body); func(param1, param2); } create_function_with_parameters();

同樣的運行結果如下：

E:\Code\Nodejs\learn\my-work\string>node one.js Hello 郭璞, welcome to 遼寧大連! E:\Code\Nodejs\learn\my-work\string>

到這里，關于Function的內容就算是鋪墊完成了。只需要了解這

正則

探究模板的真實原理，有些語言中是編譯型的，有些是替換型的。但是不管是哪種類型，都離不開扣出變量關鍵字這個步驟。而這個過程用正則表達式基本上是最好的方法了。所以需要掌握一點相關的技巧。

如何表達？

在Nodejs中，使用正則表達式有兩種形式：

字面量： /pattern/flags

RegExp: new RegExp(pattern, flags)

關于正則表達式的具體的規則，鑒于篇幅很長，這里就不再贅述了。

需求獲取

根據一開始的設想，目標是獲取{{}} 和{%%} 這種語法下的變量名稱，然后替換成對應的變量值。 因此可以寫出如下的正則表達式：

var pattern1 = /{{([\s\S]+?)}}/gi; // 或者 var pattern2 = /{%([\s\S]+?)%}/gi;

默認規則如下：

在{{}} 中直接替換為變量名對應的值。

在{%%} 中的則是可以添加到函數體的代碼塊，要保留起來。

簡易實現

下面簡單的對照著實現一下。

直接變量形式

function test1(){ var tpl = "Hello {{visitorname}}, Welcome to {{worldname}}!"; var data = { visitorname: "游客", worldname: "冰雹工作室" }; var pattern = /{{([\s\S]+?)}}/gi; var result = tpl.replace(pattern, (match, tuple)=>{ return data[tuple]; }); console.log("渲染后的數據為：\n", result); }

實現結果：

E:\Code\Nodejs\learn\my-work\string>node one.js 渲染后的數據為： Hello 游客, Welcome to 冰雹工作室! E:\Code\Nodejs\learn\my-work\string>

對象形式

function test2(){ var tpl = "I'm {{user.name}}, and I come from {{user.address}}"; var user = {name: "郭璞", address: "遼寧大連"}; console.log(user.name); var pattern = /{{([\s\S]+?)}}/gi; var result = tpl.replace(pattern, function(match, tuple, offset){ return eval(''+tuple); }); console.log(result); }

運行效果：

E:\Code\Nodejs\learn\my-work\string>node one.js 郭璞 I'm 郭璞, and I come from 遼寧大連 E:\Code\Nodejs\learn\my-work\string>

混雜多參數實現

剛才實現了只有關鍵字的和有對象性質的參數的例子，但是實際中情況可能比這要復雜的多，比如混雜模式。接下來著手實現一下混雜模式下的替換策略。

function test3(){ var tpl = "I am {} of {} years old, and I come from {user.address}."; var name = '郭璞'; var index = 0; var paramindex = 0; // var parameters = [{name: '郭璞'}, {'age': 22}, {address: '遼寧大連'}]; var parameters = ['郭璞', 22, {user: {address: '遼寧大連'}}]; console.log(parameters[2]); var result = tpl.replace(/{([\s\S])*?}/gi, function(match, tuple, offset){ console.log('match:', match); console.log('tuple: ', tuple); tpl = tpl.slice(index, offset); index = offset + match.length; paramindex += 1; var temp = parameters[paramindex-1]; if(match.length > 2){ // 使用tuple不能正確獲取到標記中相關的變量名，故用match來代替. match = match.slice(1, match.length-1); return eval('parameters[paramindex-1].'+match); }else{ return temp; } // return parameters[paramindex-1]; }); console.log(result); }

運行結果如下：