字符串模板编译

let template = `

<ul>

<% for(let i=0; i < data.supplies.length; i++) { %>

<li><%= data.supplies[i] %></li>

<% } %>

</ul>

`;

echo('<ul>');

for (let i = 0; i < data.supplies.length; i++) {

echo('<li>');

echo(data.supplies[i]);

echo('</li>');

};

echo('</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 + '`);';

console.log('template=======' + template)

let script =

`(function parse(data){

let output = "";

function echo(html){

output += html;

}

${ template}

return output;

})`;

console.log('script==========', script)

return script;

}

console.log('compile(template)' + compile(template))

// let parse = eval(compile(template));

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

// echo('<ul>');

// for(let i=0; i < data.supplies.length; i++) {

// echo('<li>');

// echo(data.supplies[i]);

// echo('</li>');

// };

// echo('</ul>');