前端模板引擎編譯

https://www.jb51.net/article/152760.htm

(function(){ var cache = {}; this.tmpl = function tmpl(str, data){ var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : new Function("obj", "var p=[],print=function(){p.push.apply(p,arguments);};" +
    "with(obj){p.push('" + str .replace(/[\r\t\n]/g, " ") .split("<%").join("\t") .replace(/((^|%>)[^\t]*)'/g, "$1\r") .replace(/\t=(.*?)%>/g, "',$1,'") .split("\t").join("');") .split("%>").join("p.push('") .split("\r").join("\\'") + "');}return p.join('');"); return data ? fn( data ) : fn; }; })(); <ul>
 <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>" rel="external nofollow" ><%=users[i].name%></a></li>
 <% } %>
</ul>
//能夠發現，這個模板比入門例子的模板更爲複雜，由於裏面還夾雜着 JavaScript 代碼。JavaScript 代碼採用 <% %> 包含。而要替換的變量則是用 <%= %> 分隔開的。
with(obj) { p.push('   <ul>   '); for (var i = 0; i < users.length; i++) { p.push('     <li><a href="', users[i].url, '" rel="external nofollow" >', users[i].name, '</a></li>   '); } p.push('  </ul> '); } // 代碼整個放在一個當即執行函數裏面
(function(){ // 用來緩存，有時候一個模板要用屢次，這時候，咱們直接用緩存就會很方便
 var cache = {}; // tmpl綁定在this上，這裏的this值得是window
 this.tmpl = function tmpl(str, data){ // 只有模板纔有非字母數字字符，用來判斷傳入的是模板id仍是模板字符串，
  // 若是是id的話，判斷是否有緩存，沒有緩存的話調用tmpl；
  // 若是是模板的話，就調用new Function()解析編譯
  var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getElementById(str).innerHTML) : new Function("obj", 　　　　 // 注意這裏整個是字符串，經過 + 號拼接
    "var p=[],print=function(){p.push.apply(p,arguments);};" +
    "with(obj){p.push('" + str 　　　　　　// 去除換行製表符\t\n\r
     .replace(/[\r\t\n]/g, " ") 　　　　　　 　　　　　　// 將左分隔符變成 \t
     .split("<%").join("\t") 　　　　　　 　　　　　　// 去掉模板中單引號的干擾
     .replace(/((^|%>)[^\t]*)'/g, "$1\r") 　　　　　　 　　　　　　// 爲 html 中的變量變成 ",xxx," 的形式, 如：\t=users[i].url%> 變成 '，users[i].url,'
　　　　　　// 注意這裏只有一個單引號，還不配對
     .replace(/\t=(.*?)%>/g, "',$1,'") 　　　　　　 　　　　　　// 這時候，只有JavaScript 語句前面纔有 "\t", 將 \t 變成 ');
　　　　　　// 這樣就可把 html 標籤添加到數組p中，而javascript 語句 不須要 push 到裏面。
　　　　　　.split("\t").join("');") 　　　　　　 　　　　　　// 這時候，只有JavaScript 語句後面纔有 "%>", 將 %> 變成 p.push('
　　　　　　// 上一步咱們再 html 標籤後加了 ');， 因此要把 p.push(' 語句放在 html 標籤放在前面，這樣就能夠變成 JavaScript 語句
     .split("%>").join("p.push('") 　　　　　　// 將上面可能出現的干擾的單引號進行轉義
 　　　　　 .split("\r").join("\\'") 　　　　// 將數組 p 變成字符串。
   + "');}return p.join('');"); return data ? fn( data ) : fn; }; })();