前端模板引擎编译

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; }; })();