js模板引擎初级

模板引擎：模板引擎（这里特指用于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>

运行结果：