JavaScript模板引擎实现原理实例详解

 <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;
// 将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在）。
attachTemplateToData = function(template, data) {
    var i = 0,
      len = data.length,
      fragment = '';
    // 遍历数据集合里的每一个项，做相应的替换
    function replace(obj) {
      var t, key, reg;
 　　　　　　
　　　　　　　//遍历该数据项下所有的属性，将该属性作为key值来查找标签，然后替换
      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>

// 代码整个放在一个立即执行函数里面
(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;
 };
})();

// 最后一个参数是函数的 body(函数体),类型为 string;
// 前面的参数都是 索要构造的函数的参数(名字)
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('')"];