自己编译个模板

以前自己也写过编译模板的东西，但是时间长就忘记了。。。今天看到了相关的东西，就又动手写了写。

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出：把<% %>都去掉

参考文献：
http://es6.ruanyifeng.com/#docs/string#实例：模板编译