JavaScript模板引擎實(shí)現(xiàn)原理實(shí)例詳解

 <script type="template" id="template">
  <h3>
   <a href="{{href}}" rel="external nofollow" >
    {{title}}
   </a>
  </h3>
  <img src="{{imgSrc}}" alt="{{title}}">
 </script>

var data = [
  {
   title: "Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5",
   href: "http://net.tutsplus.com/tutorials/html-css-techniques/create-a-sticky-note-effect-in-5-easy-steps-with-css3-and-html5/",
   imgSrc: "https://cache.yisu.com/upload/information/20200622/114/30927.jpg"
  },
  {
   title: "Nettuts+ Quiz #8",
   href: "http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/",
   imgSrc: "https://cache.yisu.com/upload/information/20200622/114/30928.jpg"
  }
 ];

template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
i = 0, len = data.length,
fragment = '';
for ( ; i < len; i++ ) {
  fragment += template
   .replace( /\{\{title\}\}/, data[i].title )
   .replace( /\{\{href\}\}/, data[i].href )
   .replace( /\{\{imgSrc\}\}/, data[i].imgSrc );
}
result.innerHTML = fragment;

template = document.querySelector('#template').innerHTML,
result = document.querySelector('.result'),
attachTemplateToData;
// 將模板和數(shù)據(jù)作為參數(shù)，通過數(shù)據(jù)里所有的項(xiàng)將值替換到模板的標(biāo)簽上（注意不是遍歷模板標(biāo)簽，因?yàn)闃?biāo)簽可能不在數(shù)據(jù)里存在）。
attachTemplateToData = function(template, data) {
    var i = 0,
      len = data.length,
      fragment = '';
    // 遍歷數(shù)據(jù)集合里的每一個項(xiàng)，做相應(yīng)的替換
    function replace(obj) {
      var t, key, reg;
 　　　　　　
　　　　　　　//遍歷該數(shù)據(jù)項(xiàng)下所有的屬性，將該屬性作為key值來查找標(biāo)簽，然后替換
      for (key in obj) {
        reg = new RegExp('{{' + key + '}}', 'ig');
        t = (t || template).replace(reg, obj[key]);
      }
      return t;
    }
    for (; i < len; i++) {
      fragment += replace(data[i]);
    }
    return fragment;
  };
result.innerHTML = attachTemplateToData(template, data);

//textarea或input則取value，其它情況取innerHTML
var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;

(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>

// 代碼整個放在一個立即執(zhí)行函數(shù)里面
(function(){
 // 用來緩存，有時候一個模板要用多次，這時候，我們直接用緩存就會很方便
 var cache = {};
 // tmpl綁定在this上，這里的this值得是window
 this.tmpl = function tmpl(str, data){
  // 只有模板才有非字母數(shù)字字符，用來判斷傳入的是模板id還是模板字符串，
  // 如果是id的話，判斷是否有緩存，沒有緩存的話調(diào)用tmpl；
  // 如果是模板的話，就調(diào)用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 標(biāo)簽添加到數(shù)組p中，而javascript 語句 不需要 push 到里面。
　　　　　　.split("\t").join("');")
　　　　　　
　　　　　　// 這時候，只有JavaScript 語句后面才有 "%>", 將 %> 變成 p.push('
　　　　　　// 上一步我們再 html 標(biāo)簽后加了 ');， 所以要把 p.push(' 語句放在 html 標(biāo)簽放在前面，這樣就可以變成 JavaScript 語句
     .split("%>").join("p.push('")
　　　　　　// 將上面可能出現(xiàn)的干擾的單引號進(jìn)行轉(zhuǎn)義
 　　　　　 .split("\r").join("\\'")
　　　　// 將數(shù)組 p 變成字符串。
   + "');}return p.join('');");
  return data ? fn( data ) : fn;
 };
})();

// 最后一個參數(shù)是函數(shù)的 body(函數(shù)體),類型為 string;
// 前面的參數(shù)都是 索要構(gòu)造的函數(shù)的參數(shù)(名字)
var myFunction = new Function('users', 'salary', 'return users * salary');

 var p = [],
  print = function() {
   p.push.apply(p, arguments);
  };
 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> ');
 }
 return p.join('');

var isNewEngine = ''.trim;// '__proto__' in {}
var replaces = isNewEngine
? ["$out='';", "$out+=", ";", "$out"]
: ["$out=[];", "$out.push(", ");", "$out.join('')"];