模板引擎：模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的html文档。
模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据（比如网页）。
一般分为三种：一是替换型模板引擎，二是编译型模板引擎，三是解释型模板引擎
下面说的是替换型模板引擎
1.模板引擎初级之一：
<script>
var TemplateEngine = function(str, data) {
var re = /<%([^%>]+)?%>/g, // 匹配字符串，<%开始,接着非%>的1个或多个位置，整体匹配 0次或1次，然后是%>结束，进行全局匹配
// var re = /<%(\w*)?%>/g, // 这个正则和上面那个结果相同
match;
// exec()函数：exec() 方法用于检索字符串中的正则表达式的匹配。
// 返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
// 如果 exec() 找到了匹配的文本，则返回一个结果数组。否则，返回 null。此数组的第 0 个元素是与正则表达式相匹配的文本，
// 第 1 个元素是与 RegExpObject 的第 1 个子表达式相匹配的文本（如果有的话），
// 第 2 个元素是与 RegExpObject 的第 2 个子表达式相匹配的文本（如果有的话），
// 以此类推。除了数组元素和 length 属性之外，exec() 方法还返回两个属性。
// index 属性声明的是匹配文本的第一个字符的位置。input 属性则存放的是被检索的字符串 string。
// 我们可以看得出，在调用非全局的 RegExp 对象的 exec() 方法时，
// 返回的数组与调用方法 String.match() 返回的数组是相同的。 while (match = re.exec(str)) {
//match[1]: 第一个子组匹配的结果
//match[1]---> name, age 对应的data[match[1]],就是data['name']
//match[0]：是全局匹配的结果
//match[0]---> <%name%>, <%age%>
str = str.replace(match[0], data[match[1]]);
}
return str;
}
var s = '我的<%habit%>,名字是:<%name%>, 年龄是<%age%>, 性别: <%sex%>';
var userInfo = {
name: 'aluoha',
age: 25,
sex: 'man',
habit: 'running'
}
var res = TemplateEngine(s, userInfo); // 调用模板
console.log(res); //打印结果
</script>
2. 把字符串转化成数组：
<script>
// 目的：把字符串转化成数组
var TemplateEngine = function(str, data) {
var re = /<%([^%>]+)?%>/g,
code = 'var arr = [];\n', //code用来存储new Function构造出来的函数体
cursor = 0, //计算出下一次截断字符串位置偏移
match;
var add = function(line) {
/*
code = ' var arr = [];\n arr.push( "我的名字是:" );\n
arr.push(this.name);\n;arr.push(",年龄是");\narr.push(this.profile.age);\n';
*/
code += 'arr.push("' + line.replace(/"/g, '\\"') + '");\n'; // 把字符串里的双引号转化为转义的双引号
}
while (match = re.exec(str)) { // 如果字符串中可以进行提换，则全部进行替换
//match.index 返回的是查找的字符串的位置
add(str.slice(cursor, match.index)); // 截取字符串，从最开始的位置到提换的字符串的位置；如果开始时为0，则从0开始；级slice(0,match.index)
add(match[1]); // match[1],第一个子组的内容，即是要提换的内容
cursor = match[0].length + match.index; // 下一个要提换的字符串的位置
}
add(str.substr(cursor, str.length - cursor)); // 添加字符串最后一段，这段是不用提换的部分
code += 'return arr.join("");'; //把数组转化成字符串
console.log(code);
return str; //返回字符串
}
var s = '我的名字是:<%this.name%>, 年龄是<%this.profile.age%>,over!!!!';
TemplateEngine(s, {
name: 'aluoha',
profile: {
age: 25
}
});
</script>
3. 对数组进行替换
<script>
var TemplateEngine = function(str, data) {
var re = /<%([^%>]+)?%>/g,
code = 'var arr = [];\n', //code用来存储new Function构造出来的函数体
cursor = 0, //计算出下一次截断字符串位置偏移
match;
var add = function(line, js) {
/*
code = ' var arr = [];\n arr.push( "我的名字是:" );\n
arr.push(this.name);\n;arr.push(",年龄是");\narr.push(this.profile.age);\n';
*/
// 这里三元表达式:这里指的是 js 传入的值，如果有传入js的值，则直接把line推入arr中，这里判断的变量js的值
// 有两种情况入栈：1.待替换的字符串（即变量），2.不需要替换的字符串（即截取的字符串）
// 当 js 转化为1的时候，说明这部分是需要提换的变量，则把这个字符串直接压入栈中；即arr.push(' + line + ');\n
// 当 js 转化为0时，说明此部分是不需要进行替换掉的字符串，则先将双引号转化为可以转义的双引号，再压入栈中；即 'arr.push("' + line.replace(/"/g, '\\"') + '");\n'
// 说明： 这里code 的结果， 实际上取决于传入的变量js的值
code += js ? 'arr.push(' + line + ');\n' :
'arr.push("' + line.replace(/"/g, '\\"') + '");\n';
}
//当能够匹配时，则一直进行替换
while (match = re.exec(str)) {
add(str.slice(cursor, match.index)); //变量前的字符串
add(match[1], true); //需要提换的变量
cursor = match[0].length + match.index; //索引往后移
}
add(str.substr(cursor, str.length - cursor)); // 变量后的字符串
code += 'return arr.join("");'; //把数组转化为字符串
return new Function(code.replace(/[\r\t\n]/g, '')).apply(data); //创建一个函数，把code伪装成json对象调用data的数据进行传参
}
var s = '我的名字是:<%this.name%>, 年龄是<%this.profile.age%>,over!!!!'; // 待替换的字符串
console.log(TemplateEngine(s, { //调用模板
name: 'aluoha',
profile: {
age: 25
}
}));
</script>
运行结果：
4. 加入条件的替换：
<script>
var TemplateEngine = function(str, data) {
var re = /<%([^%>]+)?%>/g,
// 匹配空格0次货多次，接着匹配if,或者for,或者else,或者switch,或者case,或者break,或者{，或者}，
// 接着匹配任意字符次或者多次的整体0次或者1次（这里是懒惰匹配）
reKey = /^\s*(if|for|else|switch|case|break|{|})(.*)?/g,
code = 'var arr = [];\n', //code用来存储new Function构造出来的函数体
cursor = 0, //计算出下一次截断字符串位置偏移
match; var add = function(line, js) {
/*
arr.push( for(var i in this.hobby){ );
*/
// 这里是双重三元表达式：相当于 ：code += js ? ( line.match(reKey) ? line : 'arr.push(' + line + ');\n' ) :
// ('arr.push("' + line.replace(/"/g, '\\"') + '");\n');
// 如果js有传值， 说明这里需要进行提换， 执行 code += line.match(reKey) ? line : 'arr.push(' + line + ');\n'；
// 这里先对line进行正则匹配，查找其中有没有if/for等词语，有的话直接把line进行赋值，否则把line加入arr数组中
// 如果js没有传值，说明是不需要进行替换的部分，直接把双引号先转移，然后把这部分加入arr数组中 code += js ? line.match(reKey) ? line : 'arr.push(' + line + ');\n' :
('arr.push("' + line.replace(/"/g, '\\"') + '");\n'); }
while (match = re.exec(str)) {
add(str.slice(cursor, match.index)); // 截取字符串中的开始的部分，这部分不需要进行提换，直接把这部分截取后，加入arr 中
add(match[1], true); // 对需要进行替换的部分进行替换
cursor = match[0].length + match.index; // 下一次替换时的索引移位
}
add(str.substr(cursor, str.length - cursor)); // 替换完成后，字符串最后面的一段，把这部分加入arr中
code += 'return arr.join("");'; // 把arr数组转化成字符串
return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);
}
var s = '我的爱好有:' +
'<%for(var i in this.hobby){%>' +
'<p><%this.hobby[i]%></p>' +
'<%}%>'
console.log(TemplateEngine(s, {
hobby: ['上网', '看球', '听音乐', '看动漫片']
}));
</script>
运行结果：
5. 与加入条件替换
<script>
var TemplateEngine = function(str, data) {
var re = /<%([^%>]+)?%>/g, // 对标识符进行正则匹配，其中小括号里是子匹配，这部分匹配变量
reKey = /^\s*(if|for|else|switch|case|break|{|})(.*)?/g, //对循环，条件语句等进行匹配
code = 'var arr = [];\n', //code用来存储new Function构造出来的函数体
cursor = 0, //计算出下一次截断字符串位置偏移
match; var add = function(line, js) {
// 如果有传入js ，则说明需要进行匹配替换，则执行第一分支，即code += line.match(reKey) ? line : 'arr.push(' + line + ');\n' ;
// 此处也不能直接进行替换，需要先进行正则查找：如果有循环，条件语句等，先进行循环，条件等判断并循环
code += js ? line.match(reKey) ? line : 'arr.push(' + line + ');\n' :
'arr.push("' + line.replace(/"/g, '\\"') + '");\n';
return add;
}
while (match = re.exec(str)) {
// 这里理解为先调用执行add(str.slice(cursor, match.index))，然后再调用执行add(match[1], true);
// 现在这种写法，是一种立即执行表达式的写法吧，有点jquery链式调用的意思
// 相当于把字符串分隔成三部分，其中第一和第三部分不需要进行替换，只有第二部分需要进行替换。这里执行的是第一，第二部分
add(str.slice(cursor, match.index))(match[1], true);
// add(match[1], true);
cursor = match[0].length + match.index; //索引后移
}
add(str.substr(cursor, str.length - cursor)); // 这里执行的是第三部分
code += 'return arr.join("");'; //把数组转化成字符串
return new Function(code.replace(/[\r\t\n]/g, '')).apply(data); //创建一个函数，把code作为参数，借用data的数据
}
var s = '我的爱好有:' +
'<%for(var i in this.hobby){%>' +
'<p><%this.hobby[i]%></p>' +
'<%}%>'
console.log(TemplateEngine(s, {
hobby: ['上网', '看球', '做运动', '看动漫片']
}));
</script>
运行结果：
