我们的前端模版引擎更新总结
最近花了些时间更新了下我们的模版引擎。就像构建工具一样，模版引擎也基本是大家玩烂的内容，什么运行速度啊，编译速度啊，大家也谈了很多。让我们讲些不同的东东^ ^
需求
没需求也不会有更新，首先我们看看这次我们有哪些需求：
- 随着构建工具的发展，特别是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会输出什么，例如：
<a href=<%=it.href ? '"' + it.href + '"' : ''%>>
该模版是有问题的，比如当it.href不存在是就变成了<a href=>，但很难分析出来。所以我们忽略html的错误，把它放在渲染时处理。
Javascript问题
闭合问题
模版闭合问题时通常遇到的问题，比如
noclose<%
这是比较好分析的，再比如说：
<% if (true) { %>
<a href="javscirpt:void(0);">hello</a>
<% { %>
这也较好分析。
变量问题
变量问题不好分析，因为我们无法知道传进来的变量可能有什么。
那么我们换一种思路，比如在Strict Mode时候的变量分析，除去模版内声明的变量和函数以及it和opt外，其他变量引用应当都是不合法的，例如考虑下面例子：
<a href="<%=$.render(it.item.url)%>">hello</>
这个例子是不合法的，因为内部没有明显的$的申明，严格模式下，不应当允许使用这种隐性引用。
字面量无法多行
由于实现原因，字面量是无法多行的，考虑下面例子：
<p><%=
it.say
%></p>
字面量无法使用分号
例如：
<p><%=it.say;%></p>
Javascript解析错误
例如：
<p><%={say, ,'error'}%></p>
实现
简单的说，只是利用语法分析找到这些问题。但我们还是有点难点的：
- 如何从终端直观的找到代码问题
- Javascirpt AST Parse当然能解决很多问题，但是模版语言她不懂，还是要处理下再丢给她的
比较好看的UI
首先我们先去jscs扒了段代码，只要告诉该函数错误的行和列，以及原文件内容他就能虽然出一个不错的UI：
// Inspired from jscs
var 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
模版引擎提示本模版有错误，并指出问题处在哪里，开发者可以非常方便的定位问题。其他用例类推。