一、模板技术的由来
在开发网站的时候经过会遇到这样的场景：前端从后台通过Ajax等方式获取到数据，然后通过字符串拼接或者一系列创建元素的工作，将数据渲染到指定的dom元素中
var data = [{name: “Claire”, sex: “female”, age: 18}, {name: “Mark”, sex: “male”, age: 25}, {name: “Dennis”, sex: “male”, age: 32}, {name: “Tracy”, sex: “female”, age: 23}, {name: “Wane”, sex: “male”, age: 18}]; html = ["<ul>"], item; for (var i = 0, l= data.length; i< l; i++) { item = data[i]; html.push("<li>"); html.push("name: " + item.name + ", sex"+item.sex+", age: "+ item.age); html.push("</li>"); } html = html.push("</ul>").join("");
可能现在这个例子看起来并不复杂，这种方式也无可厚非，然而当数据量很大dom结构复杂的情况下， 各种循环操作的字符串拼接，元素创建插入，在需要修改时，都需要重新花费不少时间与精力。并且这种方式从数据与展现分离的原则上讲也是不可取的。
前端模板技术起初就是基于这种基本需求而产生，并在不断进步解决更多的问题。
通俗点说，就是在你需要根据不同数据，重复生成结构相同的html时候，模板可以大大节省你的代码量，以及提高可维护性。实现了数据与展现的分析。
从这一层面上讲可以简单的理解为格式化输出。
二、原理
模板的工作原理可以简单地分成两个步骤：模板解析（翻译）和数据渲染。这两个步骤可分别部署在前端或后端来执行。如果都放在后端执行，则是像Smarty这样的后端模板，而如果都放在前端来执行，则是我们要探讨的前端模板。
前端模板实际上就是许多js函数，其核心是前端模板引擎，负责进行模板解析及数据渲染，引擎将前端的模板语言转换成浏览器可以解析的html语言并使用数据来进行渲染。当转换成功后，便可以很方便地将这段html代码插入到我们需要的地方。
例子：
三、三种模板方案
- String-based 模板技术 (基于字符串的parse和compile过程)
- Dom-based 模板技术 (基于Dom的link或compile过程)
- Living templating 技术 (基于字符串的parse 和 基于dom的compile过程）
首先讨论第一种基于字符串的模板技术，上一节中的例子就是基于字符串的模板技术。 The vast majority of these arestring templating engines，which is to say that they take a string template as an input (which typically resembles HTML, except with placeholder tags) alongside some data (which fills the placeholder tags), and outputs another string:目前前端模板技术大多数都是基于字符串的，也就是说他们以一个字符串模板及数据为输入，输出另一个字符串。例如以下：
var template = '<h1>Hello {{name}}!</h1>'; var data = { name: 'world' }; Mustache.render( template, data ); // -> '<h1>Hello world!</h1>'
这种技术方案依赖于innerHTML，同样其优点与缺点也与innerHTML相关。举一个缺点的例子：
<div class='score'>
<p>Current score: <strong>{{currentScore}}</strong></p>
<p>High score: <strong>{{highScore}}</strong></p>
</div>
有这么一个展现数据的需求，当前分数可能一直在变，最高分却不是一直在变。然而当我们使用基于字符串的模板时，可能是下面这种形式
score.innerHTML = rendered
会导致当前的DOM每次都改变。
参考文章：对前端模板技术的全面总结http://www.html-js.com/article/2313
ued 一个前端模板的实现和优化 http://ued.taobao.org/blog/2012/04/juicer-%E4%B8%80%E4%B8%AAjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E7%9A%84%E5%AE%9E%E7%8E%B0%E5%92%8C%E4%BC%98%E5%8C%96/
