概述
很早就想研究underscore源码了，虽然underscore.js这个库有些过时了，但是我还是想学习一下库的架构，函数式编程以及常用方法的编写这些方面的内容，又恰好没什么其它要研究的了，所以就了结研究underscore源码这一心愿吧。
underscore.js源码研究(1)
underscore.js源码研究(2)
underscore.js源码研究(3)
underscore.js源码研究(4)
underscore.js源码研究(5)
underscore.js源码研究(6)
underscore.js源码研究(7)
underscore.js源码研究(8)
参考资料：underscore.js官方注释，undersercore 源码分析，undersercore 源码分析 segmentfault
模板引擎的改进
这篇博文主要是对之前建立的小模板引擎做一些改进。
支持大括号
理论上来说，如果按照下面的写法写tpl，就能够实现输出大括号了：
//定义模板和数据
const tpl = 'Students:' +
//注意这里后面有一个大括号
'{ for(i = 0; i < data.students.length; i++){ }' +
'{{ data.students[i].name }}' +
//插入语句，这个语句是一个大括号
'{ } }';
但是实际匹配的时候，会匹配{}而不是{}}，所以我们需要改一下正则表达式的规则，按照underscore.js的写法，我们使用ERB风格的规则：
const rules = {
//插值，对应变量
interpolate: /<%=([\s\S]+?)%>/,
//逻辑，对应语句
evaluate: /<%([\s\S]+?)%>/
};
//2个正则合在一起，先替换变量，再替换语句
const matcher = new RegExp([
rules.interpolate.source,
rules.evaluate.source
].join('|'), 'g');
这样就可以实现大括号了，代码如下。（需要先导入上面的代码）
//定义模板和数据
const tpl = 'Students:' +
//注意这里只有一个大括号！！！
'<% for(i = 0; i < data.students.length; i++){ %>' +
'<%= data.students[i].id %>' +
'<%= data.students[i].name %>' +
'<% } %>';
const data = {
students: [{
id: 1,
name: ' haha '
},{
id: 2,
name: ' yaya '
}]
};
//render函数
function render(tpl, data) {
let concating = 'let content = "";\n';
let index = 0;
//仍然是replace里面的第二个参数是函数的形式
tpl.replace(matcher, (match, interpolate, evaluate, offset) => {
//添加非模板的内容
if (tpl.slice(index, offset)) {
concating += 'content += "' + tpl.slice(index, offset) + '";\n';
}
//记录偏移量
index = offset + match.length;
//变量需要添加到content里面
if (interpolate) {
concating += 'content +=' + interpolate + ';\n';
//语句不需要添加到content里面，而且不要分号
} else if (evaluate) {
concating += evaluate + '\n';
}
})
concating += 'return content;';
//以concating为内容，定义一个函数，参数是obj
const renderFunc = new Function('obj', concating);
return renderFunc(data);
}
//输出，结果为Students:1 haha 2 yaya
console.log(render(tpl, data));
它生成的renderFunc函数的代码如下面所示：
(function(obj
/*``*/) {
let content = "";
content += "Students:";
for(i = 0; i < data.students.length; i++){
content += data.students[i].id ;
content += data.students[i].name ;
}
return content;
})
字符串转义
有时候我们希望加入换行符等字符串来调整输出的格式，也就是说我们希望能解析如下所示的模板：
//注意下面的/n换行符
const tpl = 'Students: \n' +
//注意这里只有一个大括号！！！
'<% for(i = 0; i < data.students.length; i++){ %>' +
'<%= data.students[i].id %>' +
'<%= data.students[i].name %>' +
'\n' +
'<% } %>';
然而报错了，原因是我们在用字符串构建函数的过程中，\n导致了换行，所以语句被中断了，导致了报错。解决办法是对\n进行转义为\\n。
首先我们定义转义规则：
//定义转义规则
var escapes = {
"'": "'",
'\\': '\\',
'\r': 'r',
'\n': 'n',
'\u2028': 'u2028',
'\u2029': 'u2029'
}
//定义转义正则
var escapeRegExp = /\\|'|\r|\n|\u2028|\u2029/g;
//定义转义函数
var escapeChar = function(match) {
return '\\' + escapes[match];
}
然后我们重写render函数，使它在添加非模板内容的时候进行转义：
function render(tpl, data) {
let concating = 'let content = "";\n';
let index = 0;
tpl.replace(matcher, (match, interpolate, evaluate, offset) => {
//添加非模板的内容
if (tpl.slice(index, offset)) {
//这里进行转义
concating += 'content += "' + tpl.slice(index, offset).replace(escapeRegExp, escapeChar) + '";\n';
}
//记录偏移量
index = offset + match.length;
//变量需要添加到content里面
if (interpolate) {
concating += 'content +=' + interpolate + ';\n';
//语句不需要添加到content里面，而且不要分号
} else if (evaluate) {
concating += evaluate + '\n';
}
})
concating += 'return content;';
//以concating为内容，定义一个函数，参数是obj
const renderFunc = new Function('obj', concating);
return renderFunc(data);
}
然后我们再来执行，输出如下，正是我们想要的：
Students:
1 haha
2 yaya
我们来看下它生成的renderFunc函数：
(function(obj
/*``*/) {
let content = "";
content += "Students: \n";
for(i = 0; i < data.students.length; i++){
content += data.students[i].id ;
content += data.students[i].name ;
content += "\n";
}
return content;
})
预编译
上面我们在使用这个模板的时候是这么使用的：
console.log(render(tpl, data));
很明显，render函数，tpl模板和data数据耦合在一起了，这就表明假如我们需要修改data数据的话，就要重新调用render函数重新渲染tpl一次，非常的消耗时间。
所以我们打算进行预编译。原理是，在render函数里面，我们利用一个闭包储存concating（即render函数解析tpl的结果），然后下次data改动的时候，直接使用储存的concating数据，而不需要重新编译生成concating数据。代码如下：
//只接受tpl参数
function render(tpl) {
let concating = 'let content = "";\n';
let index = 0;
tpl.replace(matcher, (match, interpolate, evaluate, offset) => {
//添加非模板的内容
if (tpl.slice(index, offset)) {
concating += 'content += "' + tpl.slice(index, offset).replace(escapeRegExp, escapeChar) + '";\n';
}
//记录偏移量
index = offset + match.length;
//变量需要添加到content里面
if (interpolate) {
concating += 'content +=' + interpolate + ';\n';
//语句不需要添加到content里面，而且不要分号
} else if (evaluate) {
concating += evaluate + '\n';
}
})
concating += 'return content;';
//以concating为内容，定义一个函数，参数是obj
const renderFunc = new Function('obj', concating);
//这里我们返回一个函数，形成一个闭包
return function(data){
return renderFunc(data);
};
}
使用起来整个代码是这样的：
//定义转义规则
var escapes = {
"'": "'",
'\\': '\\',
'\r': 'r',
'\n': 'n',
'\u2028': 'u2028',
'\u2029': 'u2029'
}
//定义转义正则
var escapeRegExp = /\\|'|\r|\n|\u2028|\u2029/g;
//定义转义函数
var escapeChar = function(match) {
return '\\' + escapes[match];
}
//为了方便，我们把规则封装在一个对象里面
const rules = {
//插值，对应变量
interpolate: /<%=([\s\S]+?)%>/,
//逻辑，对应语句
evaluate: /<%([\s\S]+?)%>/
};
//2个正则合在一起，先替换变量，再替换语句
const matcher = new RegExp([
rules.interpolate.source,
rules.evaluate.source
].join('|'), 'g');
//定义模板
const tpl = 'Students: \n' +
//注意这里只有一个大括号！！！
'<% for(i = 0; i < data.students.length; i++){ %>' +
'<%= data.students[i].id %>' +
'<%= data.students[i].name %>' +
'\n' +
'<% } %>';
//定义数据
let data = {
students: [{
id: 1,
name: ' haha '
},{
id: 2,
name: ' yaya '
}]
};
//render函数
function render(tpl) {
let concating = 'let content = "";\n';
let index = 0;
tpl.replace(matcher, (match, interpolate, evaluate, offset) => {
//添加非模板的内容
if (tpl.slice(index, offset)) {
concating += 'content += "' + tpl.slice(index, offset).replace(escapeRegExp, escapeChar) + '";\n';
}
//记录偏移量
index = offset + match.length;
//变量需要添加到content里面
if (interpolate) {
concating += 'content +=' + interpolate + ';\n';
//语句不需要添加到content里面，而且不要分号
} else if (evaluate) {
concating += evaluate + '\n';
}
})
concating += 'return content;';
//以concating为内容，定义一个函数，参数是obj
const renderFunc = new Function('obj', concating);
//这里我们返回一个函数，形成一个闭包
return function(data){
return renderFunc(data);
};
}
//先进行编译
var tplCompile = render(tpl);
//输出
console.log(tplCompile(data));
//修改数据
data = {
students: [{
id: 1,
name: ' haha '
},{
id: 2,
name: ' yaya '
},{
id: 3,
name: ' jaja '
}]
};
//输出
console.log(tplCompile(data));
输出结果如下：
Students:
1 haha
2 yaya
Students:
1 haha
2 yaya
3 jaja
其它
有时候，我们需要对向模板中插入的值进行转义，或者称为escape。比如说我们插入的是<script>标签，那么我们就需要对<进行转义，这个时候就必须在最开始声明的正则规则中添加第三条规则，我们这里就不讨论了，感兴趣的话可以参考underscore.js源码。