字符串模板编译

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>');