ES6模板字符串编译示例

来源:互联网 发布:Linux80端口被占用 编辑:程序博客网 时间:2024/05/19 14:51

<div id="div"></div>

let template = `<ul>  <% for(let i=0; i < data.supplies.length; i++) { %>    <li><%= data.supplies[i] %></li>  <% } %></ul>`;function compile(template){  const evalExpr = /<%=(.+?)%>/g;  const expr = /<%([\s\S]+?)%>/g;  template = template    .replace(evalExpr, '`); \n  echo( $1 ); \n  echo(`')    .replace(expr, '`); \n $1 \n  echo(`');  template = 'echo(`' + template + '`);';  let script =  `(function parse(data){    let output = "";    function echo(html){      output += html;    }    ${ template }    return output;  })`;  return script;}let parse = eval(compile(template));document.getElementById('div').innerHTML = parse({ supplies: [ "broom", "mop", "cleaner" ] });

<ul>  <li>broom</li>  <li>mop</li>  <li>cleaner</li></ul>




原创粉丝点击