模板編譯用的還是比較多的，像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'] });新聞熱點
疑難解答
