模板引擎

[zhangsanshi]

简单实现了一个，目前存在的一个很大的问题，无法对变量进行添加调用者操作

function parse(code) {
  // todo
    return code;
}
var helper = {
    escape: function (content) {
        content = content || '';
        var escapeMap = {
            "<": "&#60;",
            ">": "&#62;",
            '"': "&#34;",
            "'": "&#39;"
        };
        return content.toString().replace(/[<>"']/g, function (s) {
            return escapeMap[s];
        });
    }
};
function compile(template) {
    var str = 'var s = "";';
    var splitTmpl = template.split(/<%(.*?)%>/);
    splitTmpl.forEach((item, index) => {
        if (index % 2) {
            if (item[0] === '=') {
                if (item[1] === '#') {
                    str += `s += (${parse(item.substring(2))});`;
                } else {
                    str += `s += h.escape(${parse(item.substring(1))});`;
                }
            } else if (/[}{]{1}\s*$/.test(item)) {
               str += item; 
            } else {
               str += `(${item});`;
           }
        } else {
            str += `s += "${item}";`.replace(/[\r\n]/g, '\\n');
        }
    });
    // return str;
    return new Function('o', 'h', `${str} return s;`);
}

function render(template, data) {
    var compileFn = compile(template);
    console.log(compileFn(data, helper));
}

测试代码,由于未完成，涉及到变量必须写成o.a的形式，其中o是定死的

console.log(render(`<div>
<%=o.a+1%></div>
<%

a%>
<%=1+2%>
<%=#'<'%>
<%='<'%>
<div><%1+1%></div>
`, {
    a: 1
}));

[zhangsanshi]

上面的问题，今天看到了解决办法，可以用 with 解决，当然也可以通过正则解决(artTemplate)，不过 with 我不喜欢用，正则猛地一看也看不懂，23333.....

[zhangsanshi]

这句话

template.split(/{{(.*?)}}/);

改成了

template.split(/<%(.*?)%>/);

发现用 {{，如果写 if 逻辑 很怪， 当然if 逻辑有问题

[zhangsanshi]

if 逻辑修复。 新的测试代码

console.log(render(`<div>
<%=o.a+1%></div>
<%

a%>
<%if(o.a>0){ %>
  a11
<%}  %>
<%if(o.a<=0){ %>
  a12
<%}  %>

<%if(o.a>=0){ %>
  a13
<%} else {%>
   a14
<%}%>

<%=1+2%>
<%=#'<'%>
<%='<'%>
<div><%1+1%></div>
`, {
    a: 1
}));