JavaScript 模板引擎实现原理解析

一、入门实例

首先咱们来看一个简单模板：

  <script type="template" id="template">
    <h2>
      <a href="{{href}}">
        {{title}}
      </a>
    </h2>
    <img src="{{imgSrc}}" alt="{{title}}">
  </script>

其中被{{ xxx }}包含的就是咱们要替换的变量。
接着咱们可能经过ajax或者其余方法得到数据。这里咱们本身定义了数据，具体以下：

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://d2o0t5hpnwv4c1.cloudfront.net/771_sticky/sticky_notes.jpg"
    },
    {
      title: "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"
    }
  ];

ok，如今的问题就是咱们怎么把数据导入到模板里面呢？

第一种你们会想到的就是采用replace直接替换里面的变量：

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

 与第一种相比较，第二种代码看上去多了，可是功能实则更为强大了。第一种咱们须要每次从新编写变量名，若是变量名比较多的话，会比较麻烦，且容易出错。第二种的就没有这些烦恼。

 

二、模板引擎相关知识

经过上面的例子，你们对模板引擎应该有个初步的认识了，下面咱们来说解一些相关知识。

2.1 模板存放

模板通常都是放置到 textarea/input 等表单控件，或者 script 等标签中。好比上面的例子，咱们就是放在 script 标签上的。

2.2 模板获取

通常都是经过ID来获取，document.getElementById(“ID”):

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

上面的是通用的模板获取方法，这样无论你是放在 textarea/input 仍是 script 标签下均可以获取到。

2.3 模板函数

通常都是templateFun("id", data);其中id为存放模板字符串的元素id，data为须要装载的数据。

2.4 模板解析编译

模板解析主要是指将模板中 JavaScript 语句和 html 分离出来，编译的话将模板字符串编译成最终的模板。上面的例子比较简单，尚未涉及到模板引擎的核心。

2.5 模板分隔符

要指出的是，不一样的模板引擎所用的分隔符多是不同，上面的例子用的是{{ }}，而Jquery tmpl 使用的是<%  %>。

 

三、jQuery tmpl 实现原理解析

 jQuery tmpl是由jQuery的做者写的，代码短小精悍。总共20多行，功能却比咱们上面的强大不少。咱们先来看一看源码：

(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%>"><%=users[i].name%></a></li>
    <% } %>
  </ul>

能够发现，这个模板比入门例子的模板更为复杂，由于里面还夹杂着 JavaScript 代码。JavaScript 代码采用 <%  %> 包含。而要替换的变量则是用 <%=   %> 分隔开的。

下面我再来对代码作个注释。不过即便看了注释，你也不必定能很快理解，最好的办法是本身实际动手操做一遍。

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

上面代码中，有一个要指出的就是new Function 的使用 方法。给 new Function() 传一个字符串做为函数的body来构造一个 JavaScript函数。编程中并不常常用到,但有时候应该是颇有用的。

下面是 new Function 的基本用法:

// 最后一个参数是函数的 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, '">', users[i].name, '</a></li>     ');
    }
    p.push('   </ul> ');
  }
  return p.join('');

里面的 print 函数 在咱们的模板里面是没有用到的。

要指出的是，采用 push 的方法在 IE6-8 的浏览器下会比 += 的形式快，可是在如今的浏览器里面， += 是拼接字符串最快的方法。实测代表现代浏览器使用 += 会比数组 push 方法快，而在 v8 引擎中，使用 += 方式比数组拼接快 4.7 倍。因此 目前有些更高级的模板引擎会 根据 javascript 引擎特性采用了两种不一样的字符串拼接方式。

下面的代码是摘自腾讯的 artTemplate 的， 根据浏览器的类型来选择不一样的拼接方式。功能越强大，所考虑的问题也会更多。

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

 

挑战：有兴趣的能够改用 += 来实现上面的代码。

总结

模板引擎原理总结起来就是：先获取html中对应的id下得innerHTML，利用开始标签和关闭标签进行字符串切分，实际上是将模板划分红两部分内容，一部分是html部分，一部分是逻辑部分，经过区别一些特殊符号好比each、if等来将字符串拼接成函数式的字符串,将两部分各自通过处理后，再次拼接到一块儿，最后将拼接好的字符串采用new Function()的方式转化成所须要的函数。

 

目前模板引擎的种类繁多，功能也愈来愈强大，不一样模板间实现原理大同小异，各有优缺，请按需选择。

 

参考文章：

一、Quick Tip: Create a Makeshift JavaScript Templating Solution

二、JavaScript模板引擎的应用场景及实现原理

三、大叔手记（7）：构建本身的JavaScript模板小引擎