一、语法

首先是选择模板语法，ejs语法是首选，因为大众，更无需去学习指令型模板引擎的那些东西。

如果写过 jsp 或者 asp/asp.net 的可以直接上手。

二、怎么用它

想要像上图这么用，就得来分析一下怎么才能实现。

1.new Function

new Function ([arg1[, arg2[, ...argN]],] functionBody)

functionBody 一个含有包括函数定义的JavaScript语句的字符串。

使用Function构造器生成的函数，并不会在创建它们的上下文中创建闭包;它们一般在全局作用域中被创建。

当运行这些函数的时候，它们只能访问自己的本地变量和全局变量，不能访问Function构造器被调用生成的上下文的作用域。(MDN)

也就是说：

可以用 new Function 来动态的创建一个函数，去执行某动态生成的函数定义js语句。

通过 new Function 生成的函数，作用域在全局。

那么传参有3种：把变量放到全局(扯淡)、函数传参、用call/apply把值传给函数的this。

用的是 call 来传值，如今想了想不太优雅，换成了用参数传递。也就是这样：

到此为止，雏形有了，接下来看如何拆分。

先看模板：

js 逻辑部分，由 <%%>包裹， js 变量的占位，由 <%= %>包裹，剩下的是普通的要拼接的html字符串部分。

也就是说，需要用正则找出的部分有3种：

(1)<%%> 逻辑部分的js内容

(2)<%=%> 占位部分的js内容

(3)其它的纯文本内容

其中第2项，js占位的部分，也属于拼接文本。所以可以放在一起，就是 js部分 ，拼接部分。

2.正则提取

这里先跟扩展一下关于伪数组方面的内容，以及浏览器的控制台如何看待伪数组：

只要有 int类型的 length属性，有 function类型 的 splice属性， 那么浏览器就会认为他是一个数组。如果里面的其它属性按照索引来排序，甚至还可以像数组里面的项那样在控制台展示出来。

这个需要多次从模板中，把 js逻辑部分和文本依次提取出来。对于每一次提取，都要获取提取出的内容，本次匹配最后的索引项(用于提起文本内容)。所以本次选择了 RegExp.prototype.exec 。

举个例子，RegExp.prototype.exec 返回的是一个集合(伪数组)，它的类型是这样的：

通过这样，就可以拿到匹配到的 js 逻辑部分，并通过 index 和本次匹配到的内容，来获取每个js逻辑部分之间的文本内容项。

要注意： 在全局匹配模式下，正则表达式会接着上次匹配的结果继续匹配新的字符串。

得到了js逻辑项和文本内容 ，就可以把他们拼在一起，来动态生成一个function。 要注意的是，文本内容中，包含 js占位项，这个地方要转换一下。

这样就完成了简易的模板引擎，不要觉得拼字符串慢，在现代浏览器(IE8开始)中，特地对字符串的操作做了大量的优化，用 += 拼字符串，要比用数组 push 再 join 的方式快很多很多。

http://shenzhen.offcn.com/