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;

demo

从例子中可以看到，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;

又到了点我看demo环节

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

又到了我最不喜欢的环节（点我看demo)

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。

原文链接：http://www.gbtags.com/gb/share/9662.htm