内部邀请码：C8E245J （不写邀请码，没有现金送）
国内私募机构九鼎控股打造，九鼎投资是在全国股份转让系统挂牌的公众公司，股票代码为430719，为“中国PE第一股”，市值超1000亿元。
原文地址： Roc's Blog http://rocwang.me/js-template/
JavaScript模板引擎简介
现状
好吧，悲剧的是，JavaScript的前端模板引擎多如牛毛，让人眼花缭乱， 以致于还有人做一个模板引擎选择器。 但大致来说，js的模板引擎可以分为两大类： 一类是“嵌入式”的，意思是说你可以将js直接写在模板里面，从而实现一些复杂的渲染逻辑； 另一类是“无逻辑(Logic-less)”的，这种模板引擎的哲学是模板应当同逻辑尽可能的分离， 因此，你不能在模板中随意加入js代码，而只能利用模板引擎本身提供的机制来实现一些简单的功能。
我选择了几个个人觉得比较有意思或者比较流行的js模板引擎(大部分是Logic-less类型的)，下面来一一介绍下。
mustache
说起来，mustache其实是一套与语言无关的模板系统规范，有多种的语言的实现，包括js。 由于用其写成的模板中大量使用{，倒过来看像胡子，所以取名mustache。 来看看demo：
模板：
<h1>{{header}}</h1>
{{#bug}}
{{/bug}}
{{#items}}
{{#first}}
<li><strong>{{name}}</strong></li>
{{/first}}
{{#link}}
<li><a href="{{url}}">{{name}}</a></li>
{{/link}}
{{/items}}
{{#empty}}
<p>The list is empty.</p>
{{/empty}}
数据：
{
"header": "Colors",
"items": [
{"name": "red", "first": true, "url": "#Red"},
{"name": "green", "link": true, "url": "#Green"},
{"name": "blue", "link": true, "url": "#Blue"}
],
"empty": false
}
渲染结果：
<h1>Colors</h1>
<li><strong>red</strong></li>
<li><a href="#Green">green</a></li>
<li><a href="#Blue">blue</a></li>
mustache是logic-less的，所以其一大特点是模板中没有任何if，for结构， 而是通过数据的值来实现分支和循环的。这种分离带来的好处是模板清晰，易于维护。
handlebars
handlebars, 是一种胡子的样式，从名字你就能猜出，它肯定和mustache有联系。 是的，handlebars的模板与mustache的兼容，可直接使用，并且handlebars提供了更多的功能。
handlerbars最大的特点是，它的模板是可以预先编译的。编译过程可以在浏览器端， 甚至还可以通过node.js在服务器端进行。这样做的好处是，大大提高了模板渲染时的性能， 而且handlebars在浏览器运行时的库依赖也可以减小。
另外，handlebars还在模板中支持一些新的语法结构。
hogan
hogan是来自于twitter的开源模板引擎，品质自然也不会差。同handlebars一样， hogan兼容mustache的规范，可以直接使用mustache的模板，而且也支持对模板的编译。
icanhaz
icanhaz是另一个基于mustache的模板引擎，icanhaz的一大特性是， 可以自动扫描并绑定模板代码，这样，你就不用显式的调用渲染函数了。
Demo：
模板：
<script id="user" type="text/html">
<li>
<p class="name">Hello I'm {{ name }}</p>
<p><a href="http://twitter.com/{{ twitter }}">@{{ twitter }}</a></p>
</li>
</script>
渲染代码：
// I Can Haz User?
var user = ich.user(user_data_object)
在demo中，icanhaz自动导入的模板，并根据其id，在ich下生成同名的对象以供调用。
dust
dust的语法不兼容的mustache，但有它自己的一些特点，官方文档中说明如下。
- 异步/流式操作
- 浏览器/node兼容
- 增强的mustache/ctemplate语法
- 干净，底层的API
- 高性能
- 模板可组合
linkedin还选用它做为其正式的前端模板引擎(http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more)
但dust貌似很久没有更新了，一直停留在0.3版，最近的一次更新已经是在1年前了。
John Resig’s Micro-Templating
John Resig是jQuery的创建者，这位大牛写了一个微型的模板引擎，很有点意思：
// Simple JavaScript Templating
// John Resig - http://ejohn.org/ - MIT Licensed
(function(){
var cache = {};
this.tmpl = function tmpl(str, data){
// Figure out if we're getting a template, or if we need to
// load the template - and be sure to cache the result.
var fn = !/\W/.test(str) ?
cache[str] = cache[str] ||
tmpl(document.getElementById(str).innerHTML) :
// Generate a reusable function that will serve as a template
// generator (and which will be cached).
new Function("obj",
"var p=[],print=function(){p.push.apply(p,arguments);};" +
// Introduce the data as local variables using with(){}
"with(obj){p.push('" +
// Convert the template into pure JavaScript
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('');");
// Provide some basic currying to the user
return data ? fn( data ) : fn;
};
})();
模板的例子：
<script type="text/html" id="item_tmpl">
<div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>">
<div class="grid_1 alpha right">
<img class="righted" src="<%=profile_image_url%>"/>
</div>
<div class="grid_6 omega contents">
<p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p>
</div>
</div>
</script>
模板里还可以嵌入js代码：
<script type="text/html" id="user_tmpl">
<% for ( var i = 0; i < users.length; i++ ) { %>
<li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
<% } %>
</script>
这个模板引擎实现的大致原理是：
- 把传入的模板中的静态文本，根据特定的标识符拆分为若干的片断，并压入数组中
- 将模板中的js代码解析出来，并在压入相关静态文本前执行，以实现渲染逻辑
- 将模板中的变量通过with展开为传入数据对象的对应值，并压入数组中
- 最后通过join函数一并输出最终渲染结果
而且，它还支持缓存和预编译哦，是不是很巧妙啊？