詳解nodejs模板引擎制作
關于模板，我倒是用過了不少。最開始要數(shù)Java的JSP了，然后接觸了PHP的smarty，再就是Python的jinja2, Django內(nèi)置模板，現(xiàn)在剛開始看Nodejs，也發(fā)現(xiàn)了不少類似的模板引擎，ejs, jade等等吧。
模板帶來的最直接的好處就是加速開發(fā)，前后端分離。除此之外，對于字符串的格式化同樣是個比較好的應用。習慣了python中
string = "hello {}".format("郭璞") # hello 郭璞
string = "hello {username}".format(username="郭璞") # hello 郭璞這樣簡便的用法，突然來到nodejs中，沒有了這類特性的原生支持，寫起來打印語句就老是覺得很別扭，一點都不優(yōu)雅。然后我就想自己做一個實現(xiàn)上述功能的工具函數(shù)，方便自己的使用。然后就想到了模板這一個方向，雖然想法還不夠成熟，甚至是有點拙略，但是“靈（瞎）感（鬧）”還是得記錄一下不是。
Function對象
JavaScript中有這么一個神奇的對象，那就是Function。如果函數(shù)體符合語法要求，那么你就可以動態(tài)創(chuàng)建出一個自己的函數(shù)出來。下面來個簡單的小例子。
無參模式
function create_function(){
var func_body = "var time = new Date(); console.log('創(chuàng)建時間：'+time);";
var func = new Function('', func_body);
func();
}
create_function();運行結果如下：
E:\Code\Nodejs\learn\my-work\string>node one.js 創(chuàng)建時間：Tue Jun 13 2017 15:40:15 GMT+0800 (中國標準時間) E:\Code\Nodejs\learn\my-work\string>
有參模式
剛才演示了一個無參數(shù)的情況，那么有參數(shù)的情況如何呢？
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的內(nèi)容就算是鋪墊完成了。只需要了解這
正則
探究模板的真實原理，有些語言中是編譯型的，有些是替換型的。但是不管是哪種類型，都離不開扣出變量關鍵字這個步驟。而這個過程用正則表達式基本上是最好的方法了。所以需要掌握一點相關的技巧。
如何表達？
在Nodejs中，使用正則表達式有兩種形式：
- 字面量： /pattern/flags
- RegExp: new RegExp(pattern, flags)
關于正則表達式的具體的規(guī)則，鑒于篇幅很長，這里就不再贅述了。有興趣的可以瀏覽下面的這篇文章。
//www.dbjr.com.cn/article/39623.htm?source=1
需求獲取
根據(jù)一開始的設想，目標是獲取{{}} 和{%%} 這種語法下的變量名稱，然后替換成對應的變量值。 因此可以寫出如下的正則表達式：
var pattern1 = /{{([\s\S]+?)}}/gi;
// 或者
var pattern2 = /{%([\s\S]+?)%}/gi;默認規(guī)則如下：
- 在{{}} 中直接替換為變量名對應的值。
- 在{%%} 中的則是可以添加到函數(shù)體的代碼塊，要保留起來。
簡易實現(xiàn)
下面簡單的對照著實現(xiàn)一下。
直接變量形式
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("渲染后的數(shù)據(jù)為：\n", result);
}
實現(xiàn)結果：
E:\Code\Nodejs\learn\my-work\string>node one.js 渲染后的數(shù)據(jù)為： 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>
混雜多參數(shù)實現(xiàn)
剛才實現(xiàn)了只有關鍵字的和有對象性質(zhì)的參數(shù)的例子，但是實際中情況可能比這要復雜的多，比如混雜模式。接下來著手實現(xiàn)一下混雜模式下的替換策略。
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);
}
運行結果如下：
E:\Code\Nodejs\learn\my-work\string>node one.js
{ user: { address: '遼寧大連' } }
match: {}
tuple: undefined
match: {}
tuple: undefined
match: {user.address}
tuple: s
******* s
I am 郭璞 of 22 years old, and I come from 遼寧大連.
E:\Code\Nodejs\learn\my-work\string>
關于正則這塊，大致的內(nèi)容就是這樣了。如果要想更簡單的調(diào)用，只需要封裝起來，用外部參數(shù)代替就好了。
當然，注意變量名的命名風格。
實戰(zhàn)
廢話連篇說了兩個小節(jié)，還沒到正式的模板制作。下面就整合一下剛才例子。模擬著實現(xiàn)一下好了。
(!完整)代碼
來個不完整的代碼，示意一下算了。
/**
* 通過正則表達式和Function語法創(chuàng)建一個簡單的模板引擎。
*/
const pattern = /{{([\s\S]+?)}}|{%([\s\S]+?)%}|$/img;
function template(text, params, name) {
// 聲明最終要返回的解析好的文本串,也就是構造Function所需的函數(shù)體部分。
var func_body = '';
// 函數(shù)體里面最終效果是返回一個代表了解析完成的字符串的變量，因此要聲明一個出來
func_body += 'var parsedstr="";';
func_body += 'parsedstr+="';
var index = 0;
// 開始正則匹配，根據(jù)捕獲到的元組進行剖析
text.replace(pattern, function (matchedtext, interpolate, evaluate, offset) {
// 匹配到正常的HTML文本，則直接添加到func_body中即可
func_body += text.slice(index, offset);
// 如果是evaluate類型的文本，則作為代碼進行拼接
if (evaluate) {
func_body += '";' + evaluate + 'parsedstr+="';
}
// 匹配到interpolate類型的文本，則作為變量值進行替換
if (interpolate) {
func_body += '"+' + interpolate + '+"';
}
// 更新偏移量index，讓程序向后移動
index = offset + matchedtext.length;
// 貌似返回值沒什么用吧
return matchedtext;
});
// 完成函數(shù)體的構建之后就可以調(diào)用Function的語法實現(xiàn)渲染函數(shù)的構建了
func_body += '"; return parsedstr;';
return new Function('obj', 'name', func_body)(params, name);
}
function test() {
var obj = [
{ text: '張三' },
{ text: '李四' },
{ text: '王五' },
{ text: '趙六' },
{ text: '韓七' },
{ text: '王八' }
];
var name = '郭璞';
var fs = require('fs');
// var rawtext = fs.readFileSync('index.html').toString('utf8');
var rawtext = '<ul>{%for(var i in obj){%}<li>{{ obj[i].text }}</li>
{%}%}</ul>';
console.log("源文件：", rawtext);
var result = template(rawtext, obj);
console.log("渲染后文件：", result, name);
fs.writeFileSync('rendered.html', result);
console.log('渲染完畢，請查看rendered.html文件')
}
test();
同級目錄下生成的文件內(nèi)容為：
<ul> <li>張三</li><br> <li>李四</li><br> <li>王五</li><br> <li>趙六</li><br> <li>韓七</li><br> <li>王八</li><br></ul>
感覺效果還行，但是這里面參數(shù)太固定化了，實際封裝的時候還需要酌情指定，不然這東西也就沒什么用。
總結
要是論實用性價值的話，這個不成熟的模板實現(xiàn)思路毫無價值。但是對于我而言，用來格式化字符串倒是個不錯的選擇，估計我會把這個小思路封裝成一個小小的模塊，詳情https://github.com/guoruibiao/have-fun-in-node
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
基于uniapp與node.js實現(xiàn)的微信授權登錄功能實例
前端一直是一塊充滿驚喜的土地,不僅是那些富有創(chuàng)造性的頁面,還有那些驚贊的效果及不斷推出的新技術,下面這篇文章主要給大家介紹了關于如何基于uniapp與node.js實現(xiàn)的微信授權登錄功能的相關資料,需要的朋友可以參考下2023-05-05
nodejs實現(xiàn)發(fā)出蜂鳴聲音(系統(tǒng)報警聲)的方法
這篇文章主要介紹了nodejs實現(xiàn)發(fā)出蜂鳴聲音(系統(tǒng)報警聲)的方法,結合實例形式分析了nodejs發(fā)出蜂鳴聲的原理及具體應用方法,需要的朋友可以參考下2017-01-01
本篇文章給大家詳細介紹了Nodejs中crypto模塊的安全知識的相關內(nèi)容，需要的朋友跟著小編一下學習參考下吧。2018-01-01
Node.js連接MySQL數(shù)據(jù)庫的操作步驟
在現(xiàn)代 Web 開發(fā)中,與數(shù)據(jù)庫的交互是不可避免的一部分,Node.js提供了許多庫和模塊,使得連接和操作 MySQL 數(shù)據(jù)庫變得相對簡單,本文將介紹如何使用Node.js連接MySQL數(shù)據(jù)庫,并進行一些基本的操作,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-11-11
前端自動化開發(fā)之Node.js的環(huán)境搭建教程
這篇文章主要介紹了前端自動化開發(fā)之Node.js環(huán)境搭建的相關資料，文中介紹的非常詳細，對大家學習或者使用node.js具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
WebSockets是基于HTTP的雙向通信協(xié)議,允許客戶端和服務器之間實現(xiàn)實時、持久的數(shù)據(jù)交換,本文詳細介紹了使用JavaScript和Node.js創(chuàng)建WebSockets服務器和客戶端的過程,感興趣的可以了解一下2024-10-10
本篇文章主要介紹了nodejs 最新版安裝npm 的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
本文主要介紹了Node的多進程服務實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
node實現(xiàn)生成帶參數(shù)的小程序二維碼并保存到本地功能示例
這篇文章主要介紹了node實現(xiàn)生成帶參數(shù)的小程序二維碼并保存到本地功能,涉及nodejs模塊引用、接口調(diào)用、編碼轉換、圖片生成等相關操作技巧,需要的朋友可以參考下2018-12-12
node koa2實現(xiàn)上傳圖片并且同步上傳到七牛云存儲
這篇文章主要介紹了node koa2實現(xiàn)上傳圖片并且同步上傳到七牛云存儲，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07