详解nodejs模板引擎制作

关于模板,我倒是用过了不少。最开始要数Java的JSP了,然后接触了PHP的smarty,再就是Python的jinja2,Django内置模板,现在刚开始看Nodejs,也发现了不少类似的模板引擎,ejs,jade等等吧。

模板带来的最直接的好处就是加速开发,前后端分离。除此之外,对于字符串的格式化同样是个比较好的应用。习惯了python中

这样简便的用法,突然来到nodejs中,没有了这类特性的原生支持,写起来打印语句就老是觉得很别扭,一点都不优雅。然后我就想自己做一个实现上述功能的工具函数,方便自己的使用。然后就想到了模板这一个方向,虽然想法还不够成熟,甚至是有点拙略,但是“灵(瞎)感(闹)”还是得记录一下不是。

Function对象

JavaScript中有这么一个神奇的对象,那就是Function。如果函数体符合语法要求,那么你就可以动态创建出一个自己的函数出来。下面来个简单的小例子。

无参模式

运行结果如下:

node one.js 创建时间:Tue Jun 13 2017 15:40:15 GMT+0800 (中国标准时间)

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

有参模式

刚才演示了一个无参数的情况,那么有参数的情况如何呢?

同样的运行结果如下:

node one.js Hello 郭璞,welcome to 辽宁大连!

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

到这里,关于Function的内容就算是铺垫完成了。只需要了解这

正则

探究模板的真实原理,有些语言中是编译型的,有些是替换型的。但是不管是哪种类型,都离不开扣出变量关键字这个步骤。而这个过程用正则表达式基本上是最好的方法了。所以需要掌握一点相关的技巧。

如何表达?

在Nodejs中,使用正则表达式有两种形式:

  1. 字面量: /pattern/flags
  2. RegExp: new RegExp(pattern,flags)

关于正则表达式的具体的规则,鉴于篇幅很长,这里就不再赘述了。有兴趣的可以浏览下面的这篇文章。

需求获取

根据一开始的设想,目标是获取{{}} 和{%%} 这种语法下的变量名称,然后替换成对应的变量值。 因此可以写出如下的正则表达式:

默认规则如下:

  1. 在{{}} 中直接替换为变量名对应的值。
  2. 在{%%} 中的则是可以添加到函数体的代码块,要保留起来。

简易实现

下面简单的对照着实现一下。

直接变量形式

{ return data[tuple]; });

console.log("渲染后的数据为:\n",result);
}

实现结果:

node one.js 渲染后的数据为: Hello 游客,Welcome to 冰雹工作室!

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

对象形式

}

运行效果:

node one.js 郭璞 I'm 郭璞,and I come from 辽宁大连

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

混杂多参数实现

刚才实现了只有关键字的和有对象性质的参数的例子,但是实际中情况可能比这要复杂的多,比如混杂模式。接下来着手实现一下混杂模式下的替换策略。

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

运行结果如下:

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>

关于正则这块,大致的内容就是这样了。如果要想更简单的调用,只需要封装起来,用外部参数代替就好了。

当然,注意变量名的命名风格。

实战

废话连篇说了两个小节,还没到正式的模板制作。下面就整合一下刚才例子。模拟着实现一下好了。

(!完整)代码

来个不完整的代码,示意一下算了。

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

function template(text,params,name) {
// 声明最终要返回的解析好的文本串,也就是构造Function所需的函数体部分。
var func_body = '';
// 函数体里面最终效果是返回一个代表了解析完成的字符串的变量,因此要声明一个出来
func_body += 'var parsedstr="";';
func_body += 'parsedstr+="';
// 设置一个定位器,每次更新偏移量,进行全文替换工作
var index = 0;
// 开始正则匹配,根据捕获到的元组进行剖析
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;

});

// 完成函数体的构建之后就可以调用Function的语法实现渲染函数的构建了
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 = '

    {%for(var i in obj){%}
  • {{ obj[i].text }}

  • {%}%}
';
console.log("源文件:",rawtext);
var result = template(rawtext,obj);
console.log("渲染后文件:",result,name);
fs.writeFileSync('rendered.html',result);
console.log('渲染完毕,请查看rendered.html文件')
}

test();

同级目录下生成的文件内容为:

  • 张三

  • 李四

  • 王五

  • 赵六

  • 韩七

  • 王八

  • 感觉效果还行,但是这里面参数太固定化了,实际封装的时候还需要酌情指定,不然这东西也就没什么卵用。

    总结

    要是论实用性价值的话,这个不成熟的模板实现思路毫无价值。但是对于我而言,用来格式化字符串倒是个不错的选择,估计我会把这个小思路封装成一个小小的模块,详情https://github.com/guoruibiao/have-fun-in-node

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

    相关文章

    这篇文章主要介绍“基于nodejs的ssh2怎么实现自动化部署”的...
    本文小编为大家详细介绍“nodejs怎么实现目录不存在自动创建...
    这篇“如何把nodejs数据传到前端”文章的知识点大部分人都不...
    本文小编为大家详细介绍“nodejs如何实现定时删除文件”,内...
    这篇文章主要讲解了“nodejs安装模块卡住不动怎么解决”,文...
    今天小编给大家分享一下如何检测nodejs有没有安装成功的相关...