nodejs模板引擎制作教程

关于模板，我倒是用过了不少。最开始要数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("渲染后的数据为： ", 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); }

运行结果如下：