以前自己也写过编译模板的东西,但是时间长就忘记了。。。今天看到了相关的东西,就又动手写了写。
const supplies = ['a', 'b'];
const wm=123;
let template = `
<%= wm %> <!--注释-->
<ul>
<% for(let i=0; i < supplies.length; i++) { %>
<li><%= supplies[i] %></li>
<div><div>
<% } %>
<%= wm %>
</ul>
<p>第一组完事</p>
<ul>
<% for(let i=0; i < supplies.length; i++) { %>
<li><%= supplies[i] %></li>
<div><div>
<% } %>
</ul>
`;
function sa(tem) {
let exp1 = /<%\s.*?\s%>([\s\S]*?)<%\s.*?\s%>/g;
let exp2 = /<%=\s(.*?)\s%>/g;
tem = tem.replace(exp1, function (match,p1) {
let str = '';
let newp1 = p1.replace(/\n(.*)/g, 'str+=`\n$1`;'); //1
newp1 = newp1.replace(exp2, '${$1}'); //2
match=match.replace(p1,newp1);
match = match.replace(/<%/g, '').replace(/%>/g, ''); //3
console.log(match);
return eval(match); //4
});
tem = tem.replace(exp2,function (match,p1) { // 处理漏掉的那种,比如注释的地方
return eval(`${p1}`)
});
console.log('结果:');
console.log(tem);
}
sa(template);
// 1处:把<% %>xxxxx<% %>中的xxxxx,取出来,拼接到字符串
// 2处:把类似<li><%= xxx %></li>的xxx形式改成es6中的${xxx}
// 3出:把<% %>都去掉