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体积（小）
• 简单
• 无依赖
• 无逻辑
• 无预编译模板
• 与编程语言无关

例：

1. <script id="template" type="x-tmpl-mustache">
2. <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
3. </script>

 

1. //Grab the inline template
2. var template = document.getElementById('template').innerHTML;
3.  
4. //Parse it (optional, only necessary if template is to be used again)
5. Mustache.parse(template);
6.  
7. //Render the data into the template
8. var rendered = Mustache.render(template, {name: "Luke", power: "force"});
9.  
10. //Overwrite the contents of #target with the rendered HTML
11. 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
• 块表达式（辅助）
• 预编译模板
• 非独立

例：

1. <script id="template" type="text/x-handlebars-template">
2. <p>Use the <strong>{{power}}</strong>, {{name}}!</p>
3. </script>

 

1. //Grab the inline template
2. var template = document.getElementById('template').innerHTML;
3.  
4. //Compile the template
5. var compiled_template = Handlebars.compile(template);
6.  
7. //Render the data into the template
8. var rendered = compiled_template({name: "Luke", power: "force"});
9.  
10. //Overwrite the contents of #target with the renderer HTML
11. 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的工作原理都不一样
• 无预编译模板

例：

1. <script id="template" type="text/html">
2. <p>
3. Use the <strong data-content="power"></strong>,
4. <span data-content="name"></span>!
5. </p>
6. </script>

 

1. //Call .loadTemplate() on the target container
2. $('#target').loadTemplate(
3. //Specify the template container (or file name of external template)
4. $('#template'),
5.  
6. //Specify the data to render
7. {
8. name: "Luke",
9. power: "force"
10. }
11. );

 

 又到了我最不喜欢的环节（点我看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