js模板引擎渐进--区别js代码和html字符串2（3）

 

在前一篇我们已经成功的实现了最简单的function字符串的组合，这一篇我们在此基础上改进区分js代码和 非代码字符串的机制。

在第一篇时，我们通过对 {} 进行简单的替换就实现了代码跟字符串的拼接，但是在后面的需求中，那样是远远不够的，比如我想得到 {} 内部的内容，然后对其中的内容进行进一步的解析。

 

模板代码：

<h3>{data.value}</h3>

目标代码：

function FillData(data)
        {
            return "<h3>"+data.value+"</h3>" ;
        }

解析过程：

>分别用两个数组变量来分别保存 字符串内容和代码内容（其实用一个也可以，为了方便区分就用了两个）

>遇到  {  时， {  之前的内容当作字符串原样保存到字符串内容数组。{ 之后的内容将保存到 代码内容数组

>遇到  } 时   }  之前的内容（即 { 之后 } 之前的内容），保存到代码内容数组

 

代码实现：

function Template2code(template) {

            var resultcode = [];

            resultcode.push("function func(data) { return ");


            var tempcode = [];
            var varcode = [];
            var isvarcode = false;//是否是变量代码


            tempcode.push("\"");

            for (var key in template) {
                var value = template[key];

                switch (value) {
                    case "\"":
                        tempcode.push("\\\"");
                        break;
                    case "{":
                        tempcode.push("\"+");
                        isvarcode = true;
                        break;
                    case "}":
                        isvarcode = false;
                        tempcode.push(varcode.join(""));
                        varcode = [];
                        tempcode.push("+\"");
                        break;

                    default:
                        if (!isvarcode) {
                            tempcode.push(value);
                        }
                        else {
                            varcode.push(value);
                        }
                }
            }

            tempcode.push("\"");


            resultcode.push(tempcode.join(""));
            resultcode.push("}");
            var code = resultcode.join("");
            console.log(code);

            return code;
        }

ps: 代码中的 tempcode 就是原样保存字符串的数组，varcode 保存的是变量数组，即js代码数组

然后 通过 eval 转成可执行的js代码：

        var tempcontent="<h3>{data.value}</h3>";
        var code = Template2code(tempcontent);

        var func =eval("(" + code + ")");

生成的function：

function func(data) { return "<h3>"+data.value+"</h3>"}

填充的数据：

{ value: "asddfvb" }

 

渲染结果：

<h3>asddfvb</h3>

 

 

目录：

js模板引擎渐进--前言

js模板引擎渐进--区别js代码和html字符串（1）

js模板引擎渐进--生成最简单的function（2）

js模板引擎渐进--区别js代码和html字符串2（3）

js模板引擎渐进--改进字符串拼接方式（4）

js模板引擎渐进--each/for（5）

js模板引擎渐进--each改进（6）

js模板引擎渐进--if/else（7）

js模板引擎渐进--处理需要输出 { 或者 } 的情况（8）

js模板引擎渐进--代码改进封装（9）

js模板引擎渐进--后记