概要

通过通读ejs(v2.4.1)源代码, 和大家分享下ejs实现思路, 本文期望通过提问的形式来阐述ejs中的一些重要部分, 有欠妥的地方望批评指正.

ejs实现核心思路

ejs首先将模板内容转化成一行一行的内容, 保存在__output数组中, 而该数组也是字符串,这样便于执行模板中js与html混合部分代码, 如下所示:

模板代码:

<% [1,2].forEach(function(v){ %>
<span>num is: <%= v %>
<% }) %>

ejs解析后的部分可执行代码如下(其中_append与_output的push函数等同):

try {
	var __output = [], __append = __output.push.bind(__output);
	with (locals || {}) {
    	;  [1,2].forEach(function(v){
    	; __append("\n<span>num is: ")
    	; __line = 2
    	; __append(escape(v))
    	; __append("\n")
    	; __line = 3
    	;  })
    	; __append("\n\n")
    	; __line = 5
	}
	return __output.join("");
} catch (e) {
	rethrow(e, __lines, __filename, __line);
}

最后生成的是源代码字符串, 这些字符串通过new Function([变量], src)生成可执行函数fn, 最后传入参数data即执行fn(data)函数生成最终编译后内容.

关于ejs模板的五种模式对应几种指令

ejs主要提供了如下几种指令:

<%, 该指令主要通过js中的eval来执行js代码, 如上模板代码<% [1,2].forEach(function(v){ %>将通过eval编译成; [1,2].forEach(function(v){即直接可执行的js代码, 并且不会存放到__output函数中输出.
<%=, 该指令主要用于输出变量内容, 如上模板代码<%= v %>将通过escape函数编译成__append(escape(v)), 可以看到该指令用于输出变量内容, 最后将通过__output输出内容.
<%-, 该指令与<%=区别是, <%=指令使用escape函数来对特殊字符进行编码, 如将>转为%3E, 查看关于escape函数.
<%#, 该指令主要用于模板内注释, 既不会执行也不会输出.
<%%, 主要用于输出字面值%.

关于以上各个指令对应的解析, 可参考ejs源码根目录lib/ejs.js文件中的scanLine函数.

关于ejs的几个关键函数

以下通过解析ejs中的几个重要函数来了解ejs的解析过程.

`#compile`

该函数主要负责生成模板编译函数, 其主要的两部分代码如下所示

源代码生成组装部分

该部分通过函数generateSource生成源代码字符串, 然后加上源代码字符串前缀部分prepended, 源代码后缀部分appended来生成整个源代码字符串, 源代码字符串中最后通过__output.join(";")作为函数的返回值:

if (!this.source) {
    this.generateSource();
    prepended += '  var __output = [], __append = __output.push.bind(__output);' + '\n';
    if (opts._with !== false) {
        prepended +=  '  with (' + opts.localsName + ' || {}) {' + '\n';
        appended += '  }' + '\n';
    }
    appended += '  return __output.join("");' + '\n';
    this.source = prepended + this.source + appended;
}

源代码字符串生成函数过程

以上生成的只是源代码的字符串, 而该部分即是通过Function函数将源代码字符串变成可执行函数fn, 该函数也是整个compile的返回值, 当然最后对该函数通过函数returnedFn包装了, 主要是为了递归解析模板字符串中的include指令.

fn = new Function(opts.localsName + ', escape, include, rethrow', src);

`#generateSource`

顾名思义该函数就是生成模板字符串对应的字符串源代码, 其主要通过函数parseTemplateText将模板内容按行解析到数组matches中, 然后对matches进行循环, 同时借助scanLine函数对每行模板字符串内容进行解析, 解析后的内容保存在__output数组中.

`#parseTemplateText`

该函数主要通过匹配规则_REGEX_STRING = (<%%|<%=|<%-|<%_|<%#|<%|%>|-%>|_%>)并借助exec正则循环匹配出指定模板字符串内容, 例如如下的解析示例:

<h1>head</h1>
<% var a = 1; %>
<h1>trail</h1>

通过匹配<%匹配成如下数组形式:

arr = [
    '<h1>head</h1>',
    '<%',
    ' var a = 1; ',
    '%>'
    '<h1>trail</h1>'
];

`#scanLine`

该函数应该算是编译过程中最重要的函数了, 该函数基于parseTemplateText将模板字符串转换成数组, 其主要根据数组中的每一项是否包含ejs中上述所讲的五种指令转换成对应的源代码字符串, 例如<%=指令, 遇到该指令时将this.mode设置为Template.modes.ESCAPED, 遇到结束指令%>时则重置this.mode为null,<%=与%>中间出现的字符串将通过escape编码并通过__append函数保存字符串内容, 当然这里省略了ejs中对于空白、回车、换行符的处理, 这里主要分析ejs中比较重要的部分.

[param]与locals.[param]异同

经常在使用ejs模板的时候发现传入的参数param既可单独的使用也可以通过locals访问, 那到底这两者有什么区别呢? 这里的关键就在于with语句, 该语句可以帮助我们省略输入对象名称从而直接访问对象的属性, 如对于对象var v = {a: 1, b:2}, 使用with(v)时可以直接使用属性a,b而不必v.a, v.b这样访问. 但是如果访问了不在v对象中的属性就会抛出异常而这里如果通过locals.[属性名称]形式访问则不会抛出异常, 因为ejs中默认将locals作为参数传入这样即使访问了不存在的对象属性最多该值为undefined却不会抛出异常, 可通过如下例子来理解下:

定义函数a:
function example(locals){
	with(locals){
		console.log(a);
		// c不存在, 此处抛出ReferenceError异常
		console.log(c);
		// c不存在, 但是locals是一个对象, 此处输出undefined
		console.log(locals.c);
	}
};

传入参数并访问a:
data = {
	a: 1,
	b: 2
};
example(data);

关于ejs其它方面

ejs对外暴露了两个主要函数分别是render及renderFile, 其主要区别是render传入模板字符串内容而renderFile传入模板字符串文件路径, 这样对于第三方库(如koa-ejs)的封装提供了更多的选择. 此外ejs中提供了简单的模板缓存功能, 通过handleCache函数缓存模板的编译函数.

最后对于ejs的代码注释部分详见lib/ejs.js部分注释;

原文链接：浅谈ejs模板解析