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>

运行结果：