最近花了些时间更新了下我们的模版引擎。就像构建工具一样，模版引擎也基本是大家玩烂的内容，什么运行速度啊，编译速度啊，大家也谈了很多。让我们讲些不同的东东^ ^
原文地址：
项目地址：
需求
没需求也不会有更新，首先我们看看这次我们有哪些需求：
- 随着构建工具的发展，特别是gulp这种基于流(Stream)的构建工具的出现，以前的插件已经很难满足未来的需求，我们需要将模版线下编译核心抽出来，并满足：模版字符串经过核心后编译成Javascript字符串。这样才能使同一份代码在多个构建工具复用。
include功能的开发，只有interpolation和evaluation虽然解决了大部分问题，但是没法优雅的将模版分块复用。诚然如果我们基于AMD规范，也可以利用r.js的打包解决，但毕竟还是有些项目没有基于AMD规范的。- 更早的发现错误，而不是运行时再提示。在编译阶段解决一些问题，那么实际运行过程中问题就少了。
怎样include比较好？
空间的糖饼的artTemplate使用：
{ {include '../public/header'}} 也就是直接把一个模版插入到另一个新的模版。和数据没啥关系的模版（比如页面的header）还好，对于有数据的模版就略微蛋疼了。两个模版共享同一个上下文，给模版复用带来较大的困难。我们先想想，如果对于使用了AMD规范的项目中的include是怎样的？
<%=require('../public/header')(data, opts)%> 很好，为了对齐体验又便于区分，我们引入include方法：
<%=include('../public/header')(data, opts)%> 这样我们就解决了上面提到的问题。
如何更早的发现问题
在编译构成中，先检查代码，保证代码没有问题。
无法分析的html问题
在模版中，html问题是难以分析的，因为我们不清楚Javascript会输出什么，例如：
>
该模版是有问题的，比如当it.href不存在是就变成了<a href=>，但很难分析出来。所以我们忽略html的错误，把它放在渲染时处理。
Javascript问题
闭合问题
模版闭合问题时通常遇到的问题，比如
noclose<%
这是比较好分析的，再比如说：
<% if (true) { %>hello<% { %> 这也较好分析。
变量问题
变量问题不好分析，因为我们无法知道传进来的变量可能有什么。
那么我们换一种思路，比如在Strict Mode时候的变量分析，除去模版内声明的变量和函数以及it和opt外，其他变量引用应当都是不合法的，例如考虑下面例子：
hello
这个例子是不合法的，因为内部没有明显的$的申明，严格模式下，不应当允许使用这种隐性引用。
字面量无法多行
由于实现原因，字面量是无法多行的，考虑下面例子：
<%=it.say%>
字面量无法使用分号
例如：
<%=it.say;%>
Javascript解析错误
例如：
<%={say, ,'error'}%>
实现
简单的说，只是利用语法分析找到这些问题。但我们还是有点难点的：
- 如何从终端直观的找到代码问题
- Javascirpt AST Parse当然能解决很多问题，但是模版语言她不懂，还是要处理下再丢给她的
比较好看的UI
首先我们先去jscs扒了段代码，只要告诉该函数错误的行和列，以及原文件内容他就能虽然出一个不错的UI：
// Inspired from jscsvar colors = require('colors');function explainError(error, colorize) { // 错误的行号 var lineNumber = error.line - 1 // 原文件的内容，并拆成一行一行 , lines = error.lines // 输出结果 , result = [ renderLine(lineNumber, lines[lineNumber], colorize), renderPointer(error.column, colorize) ] , i = lineNumber - 1 // 显示错误行上下2行，即最多显示5行内容 , linesAround = 2; // 从错误行向前找行数并渲染 while (i >= 0 && i >= (lineNumber - linesAround)) { result.unshift(renderLine(i, lines[i], colorize)); i--; } i = lineNumber + 1; // 从错误行向后找行数并渲染 while (i < lines.length && i <= (lineNumber + linesAround)) { result.push(renderLine(i, lines[i], colorize)); i++; } result.unshift(formatErrorMessage(error.message, error.filename, colorize)); return result.join('\n');}// 生成错误提示function formatErrorMessage(message, filename, colorize) { return (colorize ? colors.bold(message) : message) + ' at ' + (colorize ? colors.green(filename) : filename) + ' :';}// 生成制定空格function prependSpaces(s, len) { while (s.length < len) { s = ' ' + s; } return s;}// 渲染一行内容function renderLine(n, line, colorize) { line = line.replace(/\t/g, ' '); var lineNumber = prependSpaces((n + 1).toString(), 5) + ' |'; // 渲染出行号 + 内容，例如： // 1 | alert('hello world'); return ' ' + (colorize ? colors.grey(lineNumber) : lineNumber) + line;}// 渲染出指针，用于指示出错误位置function renderPointer(column, colorize) { var res = (new Array(column + 9)).join('-') + '^'; return colorize ? colors.grey(res) : res;}module.exports = explainError; 分析步骤
首先我们先解决<%和%>的闭合问题：
analyse: function () { // 找到打开标记 var i = find(this.tmpl, '<%' , this.i); // 如果存在 if (~i) { this.i = i; // 找下一个闭合标记 i = find(this.tmpl, '%>', this.i); // 存在，则辨认是interpolation还是evaluation if (~i) { this.tmpl.charAt(this.i + 2) === '=' ? // check interpolation this.check(this.tmpl.substring(this.i + 3, i), i + 3) : // prepare for ast builder this.script.push([this.tmpl.substring(this.i + 2, i), this.i + 2]); this.i = i; // 递归遍历 this.analyse(); // 不存在，显然没闭合，抛出错误 } else { throw (explainError(merge({ message: 'it need %> after <%', lines: this.lines, filename: this.filename }, getPos(this.tmpl, this.i)), true)); } // 否则，即闭合问题检查完毕，检查脚本 } else { this.checkEval(); }} 解决interpolation错误问题
直接将其丢入AST进行分析，但是由于实现原因，不能使用分号和换行，所以如果使用，则抛错：
check: function (str, i) { // 使用换行，则抛错 if (~str.indexOf('\n')) { throw (explainError(merge({ message: 'Should not use multi-lines in interpolation', lines: this.lines, filename: this.filename }, getPos(this.tmpl, this.i + str.indexOf('\n') + 2)), true)); } // 建立ast，如果有错误，则包装后抛出 try { var ast = acorn.parse(str); } catch (e) { throw (explainError(merge({ message: e.toString().replace(/\(.+?\)/, ''), lines: this.lines, filename: this.filename }, getPos(this.tmpl, this.i + e.pos + 3)), true)); } // 如果发现ast末尾为分号(目前还未实现辨认全非字符串分号，简单处理末尾的分号)，则抛错 if (str.charAt(ast.end - 1) === ';') { throw (explainError(merge({ message: 'Should not use ";" in interpolation', lines: this.lines, filename: this.filename }, getPos(this.tmpl, this.i + ast.end + 2)), true)); } } 解决evaluation问题
我们将前面过程中得到的代码组装起来，丢进ast，如果找到问题，重新定位并抛错：
checkEval: function () { // 如果有脚本则检查，没有不需要进行 if (this.script.length) { var script = ''; // 将脚本组合起来 this.script.forEach(function (arr) { script += arr[0]; }); // 丢进ast看看有没有错误 try { var ast = acorn.parse(script); } catch (e) { // 有错误则通过错误，回溯源码位置，包装后抛出 var pos = e.pos, num, l; this.script.every(function (arr, i) { l = arr[0].length; if (l < pos) { pos -= l; return true; } else { num = i; return false; } }); pos = this.script[num][1] + pos; throw (explainError(merge({ message: e.toString().replace(/\(.+?\)/, ''), lines: this.lines, filename: this.filename }, getPos(this.tmpl, pos)), true)); } }} 这样我们就基本解决了编译阶段提前找出错误的需求，未来看看如何改进了^ ^
效果
我们可以看到对于测试用例noclose.html：
no<%close
模版引擎提示本模版有错误，并指出问题处在哪里，开发者可以非常方便的定位问题。其他用例类推。