Mustache.js源码分析

jiezi

6 年前

mustache.js 是一个弱逻辑的模板引擎，语法十分简单，使用很方便。源码（v2.2.1）只有 600+ 行，且代码结构清晰。
一般来说，mustache.js 使用方法如下：
var template = ‘Hello, {{name}}’;
var rendered = Mustache.render(template, {
name: ‘World’
});
document.getElementById(‘container’).innerHTML = rendered;
通过使用 Chrome 对上述 Mustache.render 的 debug，我们顺藤摸瓜梳理了 mustache.js5 个模块（暂且称它们为：Utils, Scanner, Parser, Writer,Context）间的关系图如下：

代码层面，Mustache.render()方法是 mustache.js 向外暴露的方法之一，
mustache.render = function render(template, view, partials) {
// 容错处理
if (typeof template !== ‘string’) {
throw new TypeError(‘Invalid template! Template should be a “string” ‘ +
‘but “‘ + typeStr(template) + ‘” was given as the first ‘ +
‘argument for mustache#render(template, view, partials)’);
}
// 调用 Writer.render
return defaultWriter.render(template, view, partials);
};

在其内部，它首先调用了 Writer.render()方法，
Writer.prototype.render = function render(template, view, partials) {
// 调用 Writer 构造器的 parse 方法
var tokens = this.parse(template);
// 渲染逻辑，后文会分析
var context = (view instanceof Context) ? view : new Context(view);
return this.renderTokens(tokens, context, partials, template);
};

而 Writer.render()方法首先调用了 Writer.parse()方法，
Writer.prototype.parse = function parse(template, tags) {
var cache = this.cache;
var tokens = cache[template];
if (tokens == null)
// 调用 parseTemplate 方法
tokens = cache[template] = parseTemplate(template, tags);
return tokens;
};

Writer.parse()方法调用了 parseTemplate 方法，所以，归根结底，Mustache.render()方法首先调用 parseTemplate 方法对 html 字符串进行解析，然后，将一个对象渲染到解析出来的模板中去。
所以，我们得研究源码核心所在——parseTemplate 方法。在此之前，我们的先看一些前置方法：工具方法和扫描器。
工具方法（Utils）
// 判断某个值是否为数组
var objectToString = Object.prototype.toString;
var isArray = Array.isArray || function isArrayPolyfill(object) {
return objectToString.call(object) === ‘[object Array]’;
};
// 判断某个值是否为函数
function isFunction(object) {
return typeof object === ‘function’;
}
// 更精确的返回数组类型的 typeof 值为 ’array’，而非默认的 ’object’
function typeStr(obj) {
return isArray(obj) ? ‘array’ : typeof obj;
}
// 转义正则表达式里的特殊字符
function escapeRegExp(string) {
return string.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, ‘\\$&’);
}
// 判断对象是否有某属性
function hasProperty(obj, propName) {
return obj != null && typeof obj === ‘object’ && (propName in obj);
}
// 正则验证，防止 Linux 和 Windows 下不同 spidermonkey 版本导致的 bug
var regExpTest = RegExp.prototype.test;

function testRegExp(re, string) {
return regExpTest.call(re, string);
}
// 是否是空格
var nonSpaceRe = /\S/;

function isWhitespace(string) {
return !testRegExp(nonSpaceRe, string);
}
// 将特殊字符转为转义字符
var entityMap = {
‘&’: ‘&’,
‘<‘: ‘<’,
‘>’: ‘>’,
‘”‘: ‘"’,
“‘”: ‘'’,
‘/’: ‘/’,
‘`’: ‘`’,
‘=’: ‘=’
};

扫描器（Scanner）
// Scanner 构造器，用于扫描模板
function Scanner(string) {
this.string = string; // 模板总字符串
this.tail = string; // 模板剩余待扫描字符串
this.pos = 0; // 扫描索引，即表示当前扫描到第几个字符串
}
// 如果模板扫描完成，返回 true
Scanner.prototype.eos = function eos() {
return this.tail === ”;
};
// 扫描的下一批的字符串是否匹配 re 正则，如果不匹配或者 match 的 index 不为 0
Scanner.prototype.scan = function scan(re) {
var match = this.tail.match(re);
if (!match || match.index !== 0)
return ”;
var string = match[0];
this.tail = this.tail.substring(string.length);
this.pos += string.length;
return string;
};
// 扫描到符合 re 正则匹配的字符串为止，将匹配之前的字符串返回，扫描索引设为扫描到的位置
Scanner.prototype.scanUntil = function scanUntil(re) {
var index = this.tail.search(re),
match;
switch (index) {
case -1:
match = this.tail;
this.tail = ”;
break;
case 0:
match = ”;
break;
default:
match = this.tail.substring(0, index);
this.tail = this.tail.substring(index);
}
this.pos += match.length;
return match;
};
总的来说，扫描器，就是用来扫描字符串的。扫描器中只有三个方法：

eos: 判断当前扫描剩余字符串是否为空，也就是用于判断是否扫描完了

scan: 仅扫描当前扫描索引的下一堆匹配正则的字符串，同时更新扫描索引

scanUntil: 扫描到匹配正则为止，同时更新扫描索引

现在进入 parseTemplate 方法。
解析器（Parser）
解析器是整个源码中最重要的方法，用于解析模板，将 html 标签与模板标签分离。整个解析原理为：遍历字符串，通过正则以及扫描器，将普通 html 和模板标签扫描并且分离，并保存为数组 tokens。

每一个子项都类似下面这种结构

token[0]为 token 的类型，可能的值有 #、^、/、&、name、text，分别表示 {} 时，调用 renderSection 方法
Writer.prototype.renderSection = function renderSection(token, context, partials, originalTemplate) {
var self = this;
var buffer = ”;
// 获取 {{#xx}} 中 xx 在传进来的对象里的值
var value = context.lookup(token[1]);