模板字符串实例:模板编译

直接上代码,不懂看注释即可

        //定义模板
        let template = `
    
    <% for(let i=0; i < data.supplies.length; i++) { %>
  • <%= data.supplies[i] %>
  • <% } %>
`; //模板编译函数 function compile(template) { const evalExpr = /<%=(.+?)%>/g; const expr = /<%([\s\S]+?)%>/g; //使用正则表达式将其转换为JavaScript表达式字符串 template = template .replace(evalExpr, "`); \n echo( $1 ); \n echo(`") .replace(expr, "`); \n $1 \n echo(`"); template = "echo(`" + template + "`);"; //将template封装在script函数中返回 let script = `(function parse(data){ let output = ""; function echo(html){ output += html; } ${template} return output; })`; return script; } let parse2 = eval(compile(template)); let box = document.getElementById("box"); box.innerHTML = parse2({ supplies: ["AAA", "BBB", "CCC"] }); console.log(parse2({ supplies: ["AAA", "BBB", "CCC"] })) /** *
  • AAA
  • BBB
  • CCC
*/

你可能感兴趣的:(模板字符串实例:模板编译)