模板编译用的还是比较多的，像template 、underscore的插件等等，不过随着vue ,angular ,avalon 等双向数据绑定的出现，也基本上用的不多了。都知道模板引擎都是正则匹配，但是都能想清楚么？
比如这么一个模板实例，让你用函数，如何去实现？
var template = ` <ul> <% for(var i=0;i<data.supplies.length;i++) { %> <li> <%= data.supplies[i] %> </li> <% } %> </ul> `都清楚模板字符串中<%…%> 是放置js代码，使用<%= … %> 是输出js的表达式。
想办法将上述的模板字符串转换为如下形式：
echo('<ul>'); for(var i=0;i<data.supplies.length;i++){ echo('<li>'); echo(data.supplies[i]); echo('</li>') } echo('</ul>');如何转换上述形式，这就得用正则表达式了。
// ?停止贪婪模式匹配 var evalExPR = /<%=(.+?)%>/g; var expr = /<%([/s/S]+?)%>/g; template = template.replace(evalExpr,'` );/n echo($1); /n echo( `' ) .replace(expr,'` ); /n $1 /n echo( `'); template = 'echo( ` ' + template + ' ` );'最后将template 封装在一个函数里面就可以了。
var script = ` (function aa(data){ var output = ''; function echo(html){ output += html; } ${ template } return output; }) ` return script; }整理一下，如下：
var template = ` <ul> <% for(var i=0;i<data.supplies.length;i++) { %> <li> <%= data.supplies[i] %> </li> <% } %> </ul> ` function compile(template){// ?停止贪婪模式匹配 var evalExpr = /<%=(.+?)%>/g; var expr = /<%([/s/S]+?)%>/g; template = template.replace(evalExpr,'` );/n echo($1); /n echo( `' ) .replace(expr,'` ); /n $1 /n echo( `'); template = 'echo( ` ' + template + ' ` );' var script = ` (function aa(data){ var output = ''; function echo(html){ output += html; } ${ template } return output; }) ` return script; } console.log(eval(compile(template))) var parse = eval(compile(template)); document.body.innerHTML = parse({ supplies:['broom','mop','clear'] });新闻热点
疑难解答
