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

 <  type=\"template\" id=\"template\">
  <h2>
   <a href=\"{{href}}\" rel=\"external nofollow\" >
    {{ }}
   </a>
  </h2>
  <img src=\"{{imgSrc}}\" alt=\"{{ }}\">
 </ >

var data = [
  {
    : \"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://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg\"
  },
  {
    : \"Nettuts+ Quiz #8\",
   href: \"http://net.tutsplus.com/articles/quizzes/nettuts-quiz-8-abbreviations-darth-sidious-edition/\",
   imgSrc: \"https://d2o0t5hpnwv4c1.cloudfront.net/989_quiz2jquerybasics/quiz.jpg\"
  }
 ];

template = document.querySelector(\'#template\').innerHTML,
result = document.querySelector(\'.result\'),
i = 0, len = data.length,
fragment = \'\';
for ( ; i < len; i++ ) {
  fragment += template
   .replace( /\\{\\{ \\}\\}/, data[i].  )
   .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,\'\")
　　　　　　
　　　　　　// 这时候，只有  语句前面才有 \"\\t\", 将 \\t 变成  \');
　　　　　　// 这样就可把 html 标签添加到数组p中，而  语句 不需要 push 到里面。
　　　　　　.split(\"\\t\").join(\"\');\")
　　　　　　
　　　　　　// 这时候，只有  语句后面才有 \"%>\", 将 %> 变成 p.push(\'
　　　　　　// 上一步我们再 html 标签后加了 \');， 所以要把 p.push(\' 语句放在 html 标签放在前面，这样就可以变成   语句
     .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(\'\')\"];