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

 

上一节我们已经实现了最简单的 模板转 js 转换代码，那么这一节将在上一节的基础上包装成一个function，然后将这个function就可以在需要的时候调用即可进行数据的渲染。

在此之前，再次提一下 eval这个全局函数，eval这个函数能将 js 字符串转成 js代码并执行它。

但实际上我们并不一定要立即执行，为了能让 function字符串 转成代码又还不需要直接执行，这里需要多了解一下js中执行匿名function：

1.(function(){console.log(1111);})()

2.(function(){console.log(1111);}())

这里我们就选第一个，简单来说， function(){console.log(1111);} 是一个函数，通常我们会把它赋值给一个变量，比如 var hander=function(){console.log(1111);}，然后 通过 hander()  的方式调用，而 (function(){console.log(1111);})就是将 整个function作为一个整体，然后在后面加上 () 进行调用，但是，为了达到生成方法后可以重复调用，我们就先以  (function(){console.log(1111);}) 这种匿名形式生成一个function。

（当然，以上关于 eval的，可以用 Function 代替，这里因为开始写的时候第一反应想到了 eval，所以就用了它）

上重点：

 

模板代码：

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

目标代码：

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

 

解析过程：

>对于 <h3>{data.value}</h3> 转成 <h3>"+data.value+"</h3> 在上一节已经写好了，所以，这一次，对照目标代码，我们只需在  "<h3>"+data.value+"</h3>" 的前面加上  function FillData(data)   {，最后再拼接上  }，即可构成一个完整的 function字符串。

>通过 eval 将生成的function字符串转为 js 代码。

 

代码实现：

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;
        }

 

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