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

 

无规矩不成方圆，模板的解析也是如此，该怎么解析，这个规则还是由我们自己来决定的。

通常（至少自己用过的）以 花括号  {}  作为区分代码区域和HTML字符串，代码部分将基本原样保留或者进一步加工，而html字符串将直接原样拼接。

那么如何对一段字符串进行解析？

笔者这里通过遍历一个个字符（其它模板引擎看见好多都是正则来处理的，奈何笔者正则转不过弯），通过对每一个字符进行判断处理。对于解析得到的内容，通过一个数组将他们组合起来。

多说不如直接上代码！

 

模板代码：

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

 

目标代码：

"<h3>"+data.value+"</h3>"

 

解析过程：

>最开始先向数组中插入引号   "  （<h3> 这部分内容不是 {} 的内容，要原样当作字符串处理，所以要用 引号包起来）

>判断，如果遇到内容中包含 双引号 "  （对应的是 \"）的话，需要将其转义 ，得到 \\\"，然后插入到数组，以确保将来转为 js 代码执行时双引号也只是内容

>判断，如果包含前花括号  {  ，则认为  {   之前的内容为一段字符串内容的结束，所以要 加上 后  " 包回来，同时，  {  也是 js  代码的开始，字符串跟代码变量的拼接通常我们使用 +  进行拼接，所以，遇到  {  时，我们向数组中插入  "+ 

>判断，如果包含后花括号  }  ，则认为  }   之前的内容为js代码的结束，字符串跟代码变量的拼接通常我们使用 +  进行拼接，同时， }  也是字符串内容的开始，所以要加上   "  ,所以，遇到  } 时，我们想数组中插入  +" 

>最后插入 "  以确保后面的字符串有完整的引号包裹

 

代码实现：

function Template2code(template) {

            var tempcode = [];
            tempcode.push("\"");

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

                switch (value) {
                    case "\"": tempcode.push("\\\"");
                        break;
                    case "{": tempcode.push("\"+");
                        break;
                    case "}": tempcode.push("+\"");
                        break;

                    default: tempcode.push(value);
                }
            }

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

            return code;
        }

通过执行这个函数，向 template 参数传递  模板 字符串即可转化为目标代码。

 

当然，这还只是一个小开始，不然，这个系列就太短了  23333！

 

目录：

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