JavaScript模板引擎综述
我们将通过本文对JavaScript的模板有一个大致了解。在详细了解时下比较流行的几个模板引擎之前，我会先介绍一下什么是JavaScript模板以及该何时使用和怎么使用这些模板。我会着重讲一下Mustache,Handlebars和jQuery模板。
什么是JavaScript模板？
JavaScript模板是将HTML结构与其具体内容相分离的一种手段。模板系统通常会引入一些新的语法，不过这些语法使用起来十分方便，尤其是在别处使用过模板系统的情况下（eg.PHP的Twig）。但是需要留意一个有趣的地方：token的替换通常是以双括号为标识（{{...}}），Mustanche和Handlebars的名字就是因为这而来的（把它俩放一块比较一下吧）。
我们应该在什么时候使用JavaScript模板？
一旦发现HTML被放到了JavaScript文本中，我们就应该考虑一下JavaScript模板是不是会带来什么益处。构建可维护代码库时，最重要的一件事就是关注点分离（注：SOC)，所以任何对此有用的方法都应该被探索。在前端开发领域，将HTML与JavaScript分离是SOC的主要部分。（同样我们也不应该将JavaScript代码放到HTML中）。
需要经常使用相同格式显示不同内容的real-time web app（比如新闻直播）或者国际化（i18n)产品是从JavaScrippt模板受益的普遍情况。
我们如何使用JavaScript模板？
在这里我会通过一些具体的库来详细说明，但是本质上来讲，包括我们的库在内的模板都很简单。给这些模板添加一些数据试试。
mustache.js
Mustache是一个多语言，无逻辑的模板系统。Mustache.js只是其中一种，所以只要学会了它的语法（相当简单），就能在许多别的编程语言中同样使用。
要点：
- 9Kb体积（小）
- 简单
- 无依赖
- 无逻辑
- 无预编译模板
- 与编程语言无关
例：
- <script id="template" type="x-tmpl-mustache">
- <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
- </script>
- //Grab the inline template
- var template = document.getElementById('template').innerHTML;
- //Parse it (optional, only necessary if template is to be used again)
- Mustache.parse(template);
- //Render the data into the template
- var rendered = Mustache.render(template, {name: "Luke", power: "force"});
- //Overwrite the contents of #target with the rendered HTML
- document.getElementById('target').innerHTML = rendered;
从例子中可以看到，Mustache.render函数接收两个参数：Mustache模板，一个包含数据和需要在模板中使用的代码的view对象。在本例中，我们使用一些简单字符代替name和power变量，不过它的功能不止这些。比如：遍历一个数组，或者让一个使用当前view作为view参数的特殊渲染函数生效。
mustache.js适合较小的工程和不需要太多模板的快速原型。值得注意的一点是：我们可以使用mustache.js开始一个项目，后面再轻松升级为Handblebars.js。以为这些模板大部分一样。
Handlebars.js
handlebars.js是在Mustache的基础上编写的，因此可以兼容大部分Mustache模板。简而言之，它提供了Mustache所提供的一切，同时增加了对块表达式和预编译模板的支持。预编译模板是一件十分了不起的事，因为它大幅度提升了性能。（在一个极限性能测试中，预编译模板的渲染时间只有Mustache模板的一半）。块表达式允许你在模板中添加逻辑；最常见的例子是高级迭代-比如创建一个每个条目都用<li>包装的<ul>列表迭代器。你可以在这里获取关于块表达式的更多内容。
要点：
- 86kb体积（大），使用预编译模板为18kb
- 块表达式（辅助）
- 预编译模板
- 非独立
例：
- <script id="template" type="text/x-handlebars-template">
- <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
- </script>
- //Grab the inline template
- var template = document.getElementById('template').innerHTML;
- //Compile the template
- var compiled_template = Handlebars.compile(template);
- //Render the data into the template
- var rendered = compiled_template({name: "Luke", power: "force"});
- //Overwrite the contents of #target with the renderer HTML
- document.getElementById('target').innerHTML = rendered;
Handlebars.js适合不需要担心页面增加额外18kb内容同时性能又十分重要的项目。同时这也是需要块表达式时的解决方案。
注意，如果想体验Handlebars.js在性能上的优势，我们必须使用预编译模板（这同样大大 减少了文件体积）。为了高效的实现目的，我们需要在工程中添加Handlebars,js的模板编辑附件（Grunt has a great plug-in for this)。
如果想更加深入的了解Handlebars,看这里：A Beginner's Guide to Handlebars。
jQuery 模板
jQuery模板就没有Mustache.js和Handlebars.js这么受欢迎了。但是我们也应该看看（我觉得不看也行）。这个模板和Mustache模板有些不同，因为它只是一些普通的HTML，没有什么新的语法。不同于token的替换，它使用data属性来指明在HTML骨架中需要插入数据的地方。
要点：
- 7kb体积（小）
- 依赖jQuery（+82kb)
- 简单，但是和Mustache以及Handlebars.js的工作原理都不一样
- 无预编译模板
例：
- <script id="template" type="text/html">
- <p>
- Use the <strong data-content="power"></strong>,
- <span data-content="name"></span>!
- </p>
- </script>
- //Call .loadTemplate() on the target container
- $('#target').loadTemplate(
- //Specify the template container (or file name of external template)
- $('#template'),
- //Specify the data to render
- {
- name: "Luke",
- power: "force"
- }
- );
jQuery模板是为已经使用jQuery的项目提出的，因为它的文件很小。不过如果你的项目里没用jQuery，天哪，那你就得好好考虑一下总的体积是多大了。
其它选择
此问题当然还有许多别的文中无法一一明述的解决方案。我们就草草的提一笔好了：
Underscore.js
Underscore是一个流行的JavaScript库，模板功能只是它众多功能的一个。不同于Mustache使用双花括号，它默认使用的是ERB-style的分隔符（< %…% >）。
Embedded JS Teamplates（EJS）
像Underscore.js，Embedded JS Templates使用ERB-style模板语法。EJS需要注意的一件事情是，必须是外部文件——他们不能有内联模板。
结束语
那么哪一个是最好的呢？和许多开发问题一样，没有好主意。答案取决于很多方面：
- 你是否已在项目中使用了jQuery
- 你以前使用过什么模板系统
- 你是否想把模板与逻辑分离
- 你有多担心文件总体积
- 你有多担心性能问题/你的网站需要支持低性能设备吗？
一旦这些问题有了答案，那么我们就可以在上面的列表中做一个选择。但前面提到过，一个灵活的策略是先使用Mustache.js然后在功能或性能有要求的时候升级为Handlebars.js。
