詳解nodejs模板引擎制作

更新時(shí)間：2017年06月14日 09:29:36 作者：薛定諤的-狗

本篇文章主要介紹了nodejs模板引擎制作，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

關(guān)于模板，我倒是用過(guò)了不少。最開(kāi)始要數(shù)Java的JSP了，然后接觸了PHP的smarty，再就是Python的jinja2, Django內(nèi)置模板，現(xiàn)在剛開(kāi)始看Nodejs，也發(fā)現(xiàn)了不少類(lèi)似的模板引擎，ejs, jade等等吧。

模板帶來(lái)的最直接的好處就是加速開(kāi)發(fā)，前后端分離。除此之外，對(duì)于字符串的格式化同樣是個(gè)比較好的應(yīng)用。習(xí)慣了python中

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

這樣簡(jiǎn)便的用法，突然來(lái)到nodejs中，沒(méi)有了這類(lèi)特性的原生支持，寫(xiě)起來(lái)打印語(yǔ)句就老是覺(jué)得很別扭，一點(diǎn)都不優(yōu)雅。然后我就想自己做一個(gè)實(shí)現(xiàn)上述功能的工具函數(shù)，方便自己的使用。然后就想到了模板這一個(gè)方向，雖然想法還不夠成熟，甚至是有點(diǎn)拙略，但是“靈（瞎）感（鬧）”還是得記錄一下不是。

Function對(duì)象

JavaScript中有這么一個(gè)神奇的對(duì)象，那就是Function。如果函數(shù)體符合語(yǔ)法要求，那么你就可以動(dòng)態(tài)創(chuàng)建出一個(gè)自己的函數(shù)出來(lái)。下面來(lái)個(gè)簡(jiǎn)單的小例子。

無(wú)參模式

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

運(yùn)行結(jié)果如下：

E:\Code\Nodejs\learn\my-work\string>node one.js
創(chuàng)建時(shí)間：Tue Jun 13 2017 15:40:15 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)

E:\Code\Nodejs\learn\my-work\string>

有參模式

剛才演示了一個(gè)無(wú)參數(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();

同樣的運(yùn)行結(jié)果如下：

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

E:\Code\Nodejs\learn\my-work\string>

到這里，關(guān)于Function的內(nèi)容就算是鋪墊完成了。只需要了解這

正則

探究模板的真實(shí)原理，有些語(yǔ)言中是編譯型的，有些是替換型的。但是不管是哪種類(lèi)型，都離不開(kāi)扣出變量關(guān)鍵字這個(gè)步驟。而這個(gè)過(guò)程用正則表達(dá)式基本上是最好的方法了。所以需要掌握一點(diǎn)相關(guān)的技巧。

如何表達(dá)？

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

字面量： /pattern/flags
RegExp: new RegExp(pattern, flags)

關(guān)于正則表達(dá)式的具體的規(guī)則，鑒于篇幅很長(zhǎng)，這里就不再贅述了。有興趣的可以瀏覽下面的這篇文章。
//www.dbjr.com.cn/article/39623.htm?source=1

需求獲取

根據(jù)一開(kāi)始的設(shè)想，目標(biāo)是獲取{{}} 和{%%} 這種語(yǔ)法下的變量名稱(chēng)，然后替換成對(duì)應(yīng)的變量值。因此可以寫(xiě)出如下的正則表達(dá)式：

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

默認(rèn)規(guī)則如下：

在{{}} 中直接替換為變量名對(duì)應(yīng)的值。
在{%%} 中的則是可以添加到函數(shù)體的代碼塊，要保留起來(lái)。

簡(jiǎn)易實(shí)現(xiàn)

下面簡(jiǎn)單的對(duì)照著實(shí)現(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);
}

實(shí)現(xiàn)結(jié)果：

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

E:\Code\Nodejs\learn\my-work\string>

對(duì)象形式

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);

}

運(yùn)行效果：

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

E:\Code\Nodejs\learn\my-work\string>

混雜多參數(shù)實(shí)現(xiàn)

剛才實(shí)現(xiàn)了只有關(guān)鍵字的和有對(duì)象性質(zhì)的參數(shù)的例子，但是實(shí)際中情況可能比這要復(fù)雜的多，比如混雜模式。接下來(lái)著手實(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不能正確獲取到標(biāo)記中相關(guān)的變量名，故用match來(lái)代替.
      match = match.slice(1, match.length-1);
      return eval('parameters[paramindex-1].'+match);
    }else{
      return temp;
    }
    // return parameters[paramindex-1];
  });
  console.log(result);
}

運(yùn)行結(jié)果如下：

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>

關(guān)于正則這塊，大致的內(nèi)容就是這樣了。如果要想更簡(jiǎn)單的調(diào)用，只需要封裝起來(lái)，用外部參數(shù)代替就好了。

當(dāng)然，注意變量名的命名風(fēng)格。

實(shí)戰(zhàn)

廢話(huà)連篇說(shuō)了兩個(gè)小節(jié)，還沒(méi)到正式的模板制作。下面就整合一下剛才例子。模擬著實(shí)現(xiàn)一下好了。

(!完整)代碼

來(lái)個(gè)不完整的代碼，示意一下算了。

/**
 * 通過(guò)正則表達(dá)式和Function語(yǔ)法創(chuàng)建一個(gè)簡(jiǎn)單的模板引擎。
 */

const pattern = /{{([\s\S]+?)}}|{%([\s\S]+?)%}|$/img;

function template(text, params, name) {
  // 聲明最終要返回的解析好的文本串,也就是構(gòu)造Function所需的函數(shù)體部分。
  var func_body = '';
  // 函數(shù)體里面最終效果是返回一個(gè)代表了解析完成的字符串的變量，因此要聲明一個(gè)出來(lái)
  func_body += 'var parsedstr="";';
  func_body += 'parsedstr+="';
  var index = 0;
  // 開(kāi)始正則匹配，根據(jù)捕獲到的元組進(jìn)行剖析
  text.replace(pattern, function (matchedtext, interpolate, evaluate, offset) {
    // 匹配到正常的HTML文本，則直接添加到func_body中即可
    func_body += text.slice(index, offset);

    // 如果是evaluate類(lèi)型的文本，則作為代碼進(jìn)行拼接
    if (evaluate) {
      func_body += '";' + evaluate + 'parsedstr+="';
    }

    // 匹配到interpolate類(lèi)型的文本，則作為變量值進(jìn)行替換
    if (interpolate) {
      func_body += '"+' + interpolate + '+"';
    }

    // 更新偏移量index，讓程序向后移動(dòng)
    index = offset + matchedtext.length;
    // 貌似返回值沒(méi)什么用吧
    return matchedtext;
  });

  // 完成函數(shù)體的構(gòu)建之后就可以調(diào)用Function的語(yǔ)法實(shí)現(xiàn)渲染函數(shù)的構(gòu)建了
  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('渲染完畢，請(qǐng)查看rendered.html文件')
}

test();

同級(jí)目錄下生成的文件內(nèi)容為：

<ul>
  <li>張三</li><br>
  <li>李四</li><br>
  <li>王五</li><br>
  <li>趙六</li><br>
  <li>韓七</li><br>
  <li>王八</li><br></ul>

感覺(jué)效果還行，但是這里面參數(shù)太固定化了，實(shí)際封裝的時(shí)候還需要酌情指定，不然這東西也就沒(méi)什么用。

總結(jié)

要是論實(shí)用性?xún)r(jià)值的話(huà)，這個(gè)不成熟的模板實(shí)現(xiàn)思路毫無(wú)價(jià)值。但是對(duì)于我而言，用來(lái)格式化字符串倒是個(gè)不錯(cuò)的選擇，估計(jì)我會(huì)把這個(gè)小思路封裝成一個(gè)小小的模塊，詳情https://github.com/guoruibiao/have-fun-in-node

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。