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