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

 

在前面两张我们已经实现了模板 js 代码和 普通html字符串的拼接，没错就是 通过  +  号来进行拼接，这个少的话还没什么，要是多的话，这个有一定的性能问题，同时，这样拼接处理起来也复杂。

看前面几篇很容易发现，我们本身最外层的 resultcode 就是以数组不断的push数据进来，然后最后通过 join来拼接的。

  function Template2code(template) {
            var resultcode = [];

            resultcode.push("function func(data) { var result=[];");
}

那我们的目标 function是不是也可以改成数组将内容push起来呢？当然可以！

所以：

模板代码：

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

目标代码：

function func(data) { 

    var result=[]; 
    result.push("<h3>") ; 
    result.push(data.value) ;
    result.push("</h3>") ;
    return result.join("");

}

 

解析：

>在之前，我们往 resultcode这个数组push内容时是直接 tempcode.push(value);，这样就拼接起来了，相对于我们目标代码的效果，我们看，它们的区别只是变成了这样  result.push(value) ; 所以，我们在原来本来应该直接push原值的地方，直接改成 push(" result.push("+value+")"); 这样拼接出来的function 就是通过数组一个个拼接起来的。使用了push,也就避免了不停的用 + 拼接的尴尬，既美观又提高性能。

代码实现：

function Template2code(template) {
            var resultcode = [];

            resultcode.push("function func(data) { var result=[];");

            var tempcode = [];
            var varcode = [];
            var isvarcode = false;

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

                switch (value) {

                    case "\"":
                        if (isvarcode) {
                            varcode.push("\\\"")
                        }
                        else {
                            tempcode.push("\\\"");
                        }

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

                    default:
                        if (isvarcode) {
                            varcode.push(value)
                        }
                        else {
                            tempcode.push(value);
                        }
                }
            }
            resultcode.push(" result.push(\"" + tempcode.join("") + "\") ;");
            resultcode.push("return result.join(\"\");}")
            return resultcode.join("");
        }

然后 通过 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>

 

ps:下一篇，我们将开始做一些更有意义的事情：for 循环的实现

 

目录：

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模板引擎渐进--后记