1. 模板编译

一个通过模板字符串生成正式模板的实例:

var template = `
<ul>
  <% for(var i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

该模板使用<%...%>放置 JavaScript 代码，使用<%= ... %>输出 JavaScript 表达式。将其转换为 JavaScript 表达式字符串。

echo('<ul>');
for (var i = 0; i < data.supplies.length; i++) {
  echo('<li>');
  echo(data.supplies[i]);
  echo('</li>');
}
echo('</ul>');

这个转换使用正则表达式就行了。

function compile(template) {
  var outputExpression = /<%=(.+?)%>/g;
  var expr = /<%([\s\S]+?)%>/g;
  template = template
    .replace(outputExpression, '`); \n  echo( $1 ); \n  echo(`')
    .replace(expr, '`); \n $1 \n  echo(`');
  template = 'echo(`' + template + '`);';

  console.log(template);

  // echo(`<ul>`);
  // for (var i = 0; i < data.supplies.length; i++) {
  //   echo(`<li>`);
  //   echo(data.supplies[i]);
  //   echo(`</li>`);
  // }
  // echo(`</ul>`);

  var script = `(function parse(data){
                  var output = "";
                  function echo(html){
                    output += html;
                  }
                  ${template}
                  return output;
                })`;
  return script;
}

compile 函数的用法如下:

var template = `
<ul>
  <% for(var i=0; i < data.supplies.length; i++) { %>
    <li><%= data.supplies[i] %></li>
  <% } %>
</ul>
`;

var parse = eval(compile(template));
console.log(parse);
console.log(
  parse({
    supplies: ['broom', 'mop', 'cleaner'],
  }),
);

// div.innerHTML = parse({ supplies: ["broom", "mop", "cleaner"] });
// <ul>
//    <li>broom</li>
//    <li>mop</li>
//    <li>cleaner</li>
// </ul>