JavaScript 模板引擎实现原理解析

  <script type="template" id="template">
    <h2>
      a href="{{href}}>
        {{title}}
      /a>
    h2>
    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/"
    },{
      title: "Nettuts+ Quiz #8"
    }
  ];

template = document.querySelector('#template').innerHTML,result = document.querySelector('.result'),i = 0,len = data.length,fragment = '';
 
for ( ; i < len; i++ ) {
    fragment += template
      .replace( /\{\{title\}\}//\{\{imgSrc\}\}/
template = document.querySelector('#template'// 将模板和数据作为参数，通过数据里所有的项将值替换到模板的标签上（注意不是遍历模板标签，因为标签可能不在数据里存在）。
attachTemplateToData = function(template,data) {
        var i = 0;
 
         遍历数据集合里的每一个项，做相应的替换
         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]);
        }
 
         fragment;
    };
 
result.innerHTML = attachTemplateToData(template,data);

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

((){
  var cache = {};
 
  this.tmpl =  tmpl(str,data){
   
    var fn = !/\W/.test(str) ? 
      cache[str] = cache[str] ||
        tmpl(document.getElementById(str).innerHTML) :
    
      new Function("obj"
       
        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%>"><%users[i].name%>a></ } %>
  >

// 代码整个放在一个立即执行函数里面
((){
  // 用来缓存，有时候一个模板要用多次，这时候，我们直接用缓存就会很方便
 {};
  
// tmpl绑定在this上，这里的this值得是window
  只有模板才有非字母数字字符，用来判断传入的是模板id还是模板字符串，
    // 如果是id的话，判断是否有缓存，没有缓存的话调用tmpl；
    // 如果是模板的话，就调用new Function()解析编译
    // 注意这里整个是字符串，通过 + 号拼接
        "var p=[],arguments);};" +
        "with(obj){p.push('" +
       
        str
　　　　　　// 去除换行制表符\t\n\r
          .replace(/[\r\t\n]/g,1)">) 
　　　　　　
　　　　　　// 将左分隔符变成 \t
          .split("<%").join("\t") 
　　　　　　
　　　　　　// 去掉模板中单引号的干扰
          .replace(/((^|%>)[^\t]*)'/g,1)">)
　　　　　　
　　　　　　// 为 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('');" fn( data ) : fn;
  };
})();