目的
编写一个基于字符串拼接的js模板引擎雏形，这里并不会提供任何模板与数据的绑定。
基本原理
Javascript中创建函数的方式有多种，包括：
1. var func = function () {...}
2. function func () {...}
3. var func = new Function (...);
其中new Function的方法给到了我们很大的*度，比如：
var func = new Function('a', 'b', 'return a+b;'); func(1, 2); // 输出： 3
这样我们就可以通过字符串来创建函数。
如果我们有模板：
<div>
{{data.name}}
</div>
那么我们希望它达成的作用是：
function func (data) {
return '<div>'+data.name+'</div>';
}
为了让这个转换变得更简单，我们实际上将得到的是：
function func (data) {
var arr = []; // 注意一下这一段， 与模板进行对比
arr.push('<div>');
arr.push(data.name);
arr.push('</div>');
return arr.join('');
}
接下来我们的目标就很明确了：
我们要利用new Function的方式，完成模板到目标函数之间的转换。
使用变量
观察目标函数与模板的区别，总结之后我们得到了如下的代码
function Templer (str) {
return new Function ('data',
'var arr = []; arr.push("'
+str.replace(/[\r\t\n]/g, ' ') // 在代码中去掉换行符
.replace(/{{/g, '");arr.push(') // 替换变量的开始部分
.replace(/}}/g, ');arr.push("') // 替换变量的结尾部分
+'");return arr.join("");'
);
}
于是我们可以这样使用：
var func = Templer('<div>{{data.name}}</div>');
/* 输出：
function anonymous(data) {
var arr = []; arr.push("<div>");arr.push(data.name);arr.push("</div>");return arr.join("");
}
*/
func({name: '笨笨'});
// 输出："<div>笨笨</div>"
模板中的逻辑
虽然我们完成了最基本的变量替换，但显然功能还过于单一。接下来我们来做第二步：在模板中嵌入逻辑（js代码）。
由于我们所做的就是将模板处理成正确的js代码再使用new Function来生成函数，因此将js代码嵌入到我们的模板引擎中也显得非常轻松自然。
观察比较一下模板和目标函数：
function func (data) {
var arr = [];
arr.push("<div>");
// for的逻辑
for (var i=0; i<data.items.length;i++) {
arr.push("<div>");
arr.push(data.items[i].name);
arr.push("</div>");
}
arr.push("</div>");
return arr.join('');
}
<div>
{% for (var i=0; i<data.items.length;i++) { %}
<div>{{data.items[i].name}}</div>
{% } %}
</div>
得到以下的结果：
function Templer (str) {
return new Function ('data',
'var arr = []; arr.push("'
+str.replace(/[\r\t\n]/g, ' ') // 在代码中去掉换行符
.replace(/{{/g, '");arr.push(') // 替换变量的开始部分
.replace(/}}/g, ');arr.push("') // 替换变量的结尾部分
.replace(/{% (.+?) %}/g, '");$1arr.push("') // 替换js部分
+'");return arr.join("");'
);
}
*注：使用数组拼接的方式是由于早期的js中数组拼接的效率要优于字符串拼接，因此我们也可以这样来实现模板：
function Templer (str) {
return new Function ('data',
'var str =""; str += "'
+str.replace(/[\r\t\n]/g, ' ') // 在代码中去掉换行符
.replace(/{{/g, '";str += ') // 替换变量的开始部分
.replace(/}}/g, ';str += "') // 替换变量的结尾部分
.replace(/{% (.+?) %}/g, '";$1 str += "') // 替换js部分
+'";return str;'
);
}
测试一下：
var func = Templer(tplStr);
/* tplStr:
<div>{{data.name}}</div>
<div>家庭成员</div>
{% for (var i=0, member; member = data.members[i], member; i++) { %}
<div>{{i+1}}-名称：{{member}}</div>
{% } %}
*/
func(({name: '笨笨', members: ['宝宝','小宝宝','小笨笨','笨笨']}));
模板的扩展
最后我们来做一些扩展，包括引入 for ... in ...的语法和include
直接上代码：
(function (g) {
function Templer(name, tpl) {
if (!Templer._cached[name]) { // 用name保存建立过的模板函数
Templer._cached[name] = new Function('data', 'var arr = []; (function (d) { arr.push("'
+ tpl
.replace(lineBreakRegex, lineBreakReplace) // 替换换行符
.replace(jsRegex, jsReplace) // 替换js
.replace(variableStartRegex, variableStartReplace) // 替换变量起始
.replace(variableEndRegex, variableEndReplace) // 替换变量终止
+'");})(data); return arr.join("");');
}
return Templer._cached[name];
}
Templer._cached = {};
var variableStartRegex = /{{/g,
variableStartReplace = '");arr.push(',
variableEndRegex = /}}/g,
variableEndReplace = ');arr.push("',
lineBreakRegex = /[\r\t\n]/g,
lineBreakReplace = ' ',
jsRegex = /{% (.+?) %}/g,
jsReplace = function () {
var str = arguments[1], stop = false;
// 开始处理特殊格式
if (str === 'end') {
stop = true;
str = '}';
}));
// 处理 for item in items 的逻辑，替换为可执行的代码
stop || (str = str.replace(startForRegex, function () {
stop = true;
var a = arguments[1],
b = arguments[2],
i = nextVar();
return 'for (var '+i+' = 0, '+a+'; '+a+' = '+b+'['+i+']; '+i+'++) {';
}));
// 处理 include 的格式，通过调用Templer(tId)的形式替换
stop || (str = str.replace(includeRegex, function () {
stop = true;
var tplName = arguments[1];
return 'arr.push(Templer("'+tplName+'")(d));';
}));
// 结束处理特殊格式
return '");'+str+'arr.push("';
},
startForRegex = /^for (.+?) in (.+?)$/g,
includeRegex = /^include (.+?)$/g,
nextId = 0,
nextVar = function () {
return '_' + (nextId++).toString(36);
};
window.Templer = Templer;
})(window);
测试一下：
<div id="div1"></div><script type="text/template" id="tpl2">
<h4>Pets:</h4>
<ol>
{% for pet in d.pets %}
<li><span>{{pet.name}}</span>
<ul>
{% for food in pet.food %}
{% if (food === 'banana') { %}
<li>balala~</li>
{% } else { %}
<li>{{food}}</li>
{% } %}
{% end %}
</ul>
</li>
{% end %}
</ol>
</script>
<script type="text/template" id="tpl1">
<p>{{d.name}} - {{d.info.age}}</p>
{% if (d.info.age > 20) { %}
<div>age is 20+</div>
{% } else { %}
<div>age is 20-</div>
{% } %}
<p>
{% include tpl2 %}
</div>
</script>
<script type="text/javascript" src="templer.js"></script>
<script type="text/javascript">
Templer('tpl2', document.getElementById('tpl2').innerHTML);
document.getElementById('div1').innerHTML = Templer('tpl1', document.getElementById('tpl1').innerHTML)({
name: 'Miao',
info: {age: 27},
pets: [{
name: 'Meow',
food: ['apple', 'banana']
}, {
name: 'Doge',
food: ['apple', 'banana']
}]
});
</script>
总之就是正则+替换，这里只是提供一个思路和雏形，知道了基本的做法其他的只要发挥想象就行了。
预编译
既然我们是将模板字符串处理成new Function要使用的函数体字符串，我们就可以利用node或其他工具将模板预编译成js文件中的函数，免去即时编译的耗费。
// 模板引擎的做法
new Function ('data', 函数体);
// 预编译到js文件中
Template[tplName] = function (data) {
函数体
}
小结
通过使用正则替换处理模板字符串来得到new Function的函数体，从而将模板转换为模板函数。由于只是基于字符串的处理和拼接，因此这样的引擎在web端和server端都是可用的，当然这种方式也不会提供任何数据绑定的功能。
扩展：ES6的Template String
ES6中定义了Template String的规范，在语言/浏览器层面支持了基于字符串的Template。
通过Template String我们可以进行变量替换：
var a = 10;
var b = 5;
console.log(`${a} + ${b} = ${a+b}`);
当然也可以使用函数：
function getName() { return "benben"; }
console.log(`大家好，我是${getName().toUpperCase()}~`);
以及可以换行：
console.log(`大家好， 我是笨笨`);
还有tagged templates，相当于调用一个函数来处理模板：
fn`Hello ${you}! You're looking ${adjective} today!`
function fn (arr, ...tokens) {
//
}
/*
相当于调用：
fn(["Hello ", "! You're looking ", " today!"], you, adjective);
*/