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>