无规矩不成方圆,模板的解析也是如此,该怎么解析,这个规则还是由我们自己来决定的。
通常(至少自己用过的)以 花括号 {} 作为区分代码区域和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!
目录: