ES6实例：模板编译

1、通过模板字符串，生成正式模板的实例

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

2、编写模板编译函数compile

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;

}

3、使用compile函数

let parse = eval(compile(template));
document.getElementById('box').innerHTML = parse({ supplies: ["broom", "mop", "cleaner"] });

4、页面使用

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