JavaScript模板引擎概述

本文由Chris Perry和Ritesh Kumar进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

在本文中，我们将概述JavaScript中的模板。 首先，我们将讨论什么是JavaScript模板，何时使用它们以及如何实现它们，然后再详细介绍其中一些流行的模板引擎。 我们将专注于Mustache ， Handlebars和jQuery Template 。

什么是JavaScript模板？

JavaScript模板是一种将HTML结构与其中包含的内容分离的方法。 模板系统通常会引入一些新语法，但通常使用起来非常简单，尤其是如果我们以前在其他地方使用过模板系统（例如PHP中的Twig ）。 需要注意的有趣一点是，令牌替换通常由双大括号（ {{ ... }} ）表示，Mustache和Handlebars源自其大括号（提示：将其侧向查看相似性）。

我们什么时候应该使用JavaScript模板？

一旦发现自己在JavaScript字符串中包含HTML，我们就应该开始考虑JavaScript模板可以给我们带来什么好处。 在构建可维护的代码库时，关注点分离至关重要。因此，应该探索任何可以帮助我们实现此目标的方法。 在前端Web开发中，当将HTML与JavaScript分开时，这是最明显的体现（这两种方法都起作用，因为我们不应在HTML中包含JavaScript内联）。

可以从JavaScript模板中受益的一些常见场景是实时Web应用程序（例如，用于事件评论的实时流媒体应用程序）或国际化（i18n），它们经常会要求使用相同的格式显示不同的内容。

我们如何实现JavaScript模板？

我们将通过特定的库示例对此进行更详细的介绍，但从本质上讲，它就像包含我们选择的库，获取模板并将其与某些数据一起呈现一样简单。

大多数库都支持内联和外部模板。 内联模板非常适合我们只有很少的模板，或者知道我们将在每次页面加载时使用包含的模板，但是通常我们的模板应该是外部的。 外部模板带来许多好处，主要是除非页面需要模板，否则模板永远不会下载到客户端。

mustache.js

小胡子是一种多语言，无逻辑的模板系统。 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;

请参阅CodePen上SitePoint （ @SitePoint ）的Pen Mustache.js示例 。

如本例所示， Mustache.render函数具有两个参数：Mustache模板以及一个包含渲染模板所需数据和代码的视图对象。 在这种情况下，我们将用简单的字符串替换name和power变量，但是可以做更多的事情。 例如，在数组上循环 ，或使用将当前视图用作其视图参数的特殊渲染函数 。

mustache.js非常适合将模板复杂度降至最低的小型项目和快速原型。 需要注意的关键是，我们可以从mustache.js开始一个项目，然后在以后（由于模板基本相同）而轻松升级到Handlebars.js。

如果您想了解有关Mustache的更多信息，请查看： 使用Mustache.js创建HTML模板 。

Handlebars.js

Handlebars.js构建在Mustache之上，并且与Mustache模板基本兼容。 简而言之，它提供了mustache.js提供的所有内容，还支持块表达式和预编译的模板。 预编译的模板非常重要，因为它们可以大大提高性能（在粗略的性能测试中 ，预编译的Handlebars.js模板的渲染时间大约是Mustache模板的一半）。 块表达式使您可以在模板中包含更多逻辑； 其中最常见的例子是高级迭代器-例如。 创建一个<ul>列表迭代器，将每个项目包装在<li> 。 您可以在此处阅读有关块表达式的更多信息 。

关键点

• 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;

请参阅CodePen上的SitePoint （ @SitePoint ）的Pen Handlebars.js示例

Handlebars.js非常适合对性能很重要的项目，我们并不十分担心在页面重量上增加18kb。 如果要使用块表达式，这也是要走的路。

请注意，要查看Handlebars.js的性能优势（以及大大减小的文件大小），我们必须使用预编译的模板 。 为了有效地做到这一点，我们应该将Handlebars.js模板编译添加到我们的构建过程中（ Grunt有一个很棒的插件 ）。

如果您想了解有关把手的更多信息，请查阅： 把手初学者指南 。

jQuery模板

jQuery模板不如mustache.js或Handlebars.js受欢迎，但我们不应忽视它。 模板与Mustache模板不同，因为它们只是纯HTML，没有新语法。 代替令牌替换技术，它使用数据属性指示数据应在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"
  }
);

请参阅CodePen上SitePoint （ @SitePoint ）的Pen jQuery模板示例 。

jQuery Template非常适合已经包含jQuery的项目，因为文件很小。 但是，如果您的项目不打算使用jQuery，那么很难建议您考虑文件的总大小。

其他选择

当然，对于此问题，还有许多其他解决方案，我们将不在本文中详细介绍。 这是其他一些流行选择的快速概述。

Underscore.js

Underscore是一个流行的JavaScript库，它在众多其他功能中提供模板功能。 默认情况下，它不使用Mustache使用的双花括号语法，而是选择ERB样式的分隔符（ <% ... %> ）。

嵌入式JS模板（EJS）

像Underscore.js一样， 嵌入式JS模板对模板使用ERB样式的语法。 EJS需要注意的一件事是模板必须是外部文件，不能是内联的。

闭幕致辞

那么哪个最好？ 像大多数开发问题一样，没有灵丹妙药。 这取决于很多事情。

• 您已经在项目中使用jQuery吗？
• 您以前使用过哪些模板系统？
• 您是否要将逻辑排除在模板之外？
• 您是否担心页面文件的总大小？
• 您对性能有多担心？您的网站是否需要支持低功耗设备？

一旦考虑了这些因素，就可以从上面的列表中进行明智的选择。 但是，如前所述，一个好的灵活策略是先实现mustache.js，然后在需要增加功能或性能优势的情况下再交换到Handlebars.js。

要鸣叫吗？ 请在下面发表评论！

From: https://www.sitepoint.com/overview-javascript-templating-engines/