JavaScript模板引擎的概述-js教程-PHP中文网

简单

>关键点

JavaScript模板引擎在语法，性能和功能方面有所不同。例如，EJS以其简单性和易用性而闻名，而Handlebars.js提供了强大的无逻辑模板。 Mustache.js是另一个流行的选择，因为它的跨语言兼容性。重要的是选择适合您项目需求和编码样式的模板引擎。

> JavaScript模板引擎如何改善Web开发？

JavaScript模板引擎简化了生成HTML的过程，使其更加容易，从而使其变得更加容易创建动态网页。它们允许开发人员将HTML结构与数据分开，从而导致更清洁，更可维护的代码。模板发动机还支持可重复使用的组件，可以大大减少开发时间。

> JavaScript模板引擎如何使用Express.js？

>如何为项目选择正确的JavaScript模板模板引擎？引擎取决于您的项目要求和个人喜好。考虑因素，例如您的项目的复杂性，引擎的学习曲线及其提供的功能。看着社区和引擎周围的支持也是一个好主意。

我可以创建自己的JavaScript模板引擎吗？，尽管通常不建议您使用现有发动机不满足的特定需求。创建模板引擎需要对JavaScript有深刻的了解，并且可能很耗时。

首页

web前端

js教程

JavaScript模板引擎的概述

Christopher Nolan

Feb 18, 2025 am 09:18 AM

An Overview of JavaScript Templating Engines

JavaScript模板引擎的概述

本文由克里斯·佩里（Chris Perry）和里特什·库马尔（Ritesh Kumar）进行了同行评审。感谢SitePoint所有的同行评审员制作SitePoint内容的最佳状态！在本文中，我们将在JavaScript中概述模板。我们将首先讨论什么是JavaScript模板，何时应该使用它们以及如何实施它们，然后再详细介绍一些流行的模板引擎。我们将专注于胡子，车把和jQuery模板。> 钥匙要点

JavaScript模板

>提供了一种将HTML结构与内容分开的方法，从而提高了代码库的可维护性。它们对实时Web应用程序和国际化特别有益，通常需要使用相同格式显示不同的内容。

Mustache.js是一种多语言，无逻辑的模板系统，非常适合小型项目和快速原型。它很简单，没有依赖项，也不需要预编译模板。此外，由于模板大多相同，因此项目可以轻松升级到handlebars.js。

handlebars.js建立在胡须之上，支持块表达式和预编译模板，从而显着提高性能。它适用于性能至关重要的项目，并且在页面重量中增加18KB并不是一件问题。要查看性能优势和减少文件大小，必须使用预编译模板。

。

什么是JavaScript模板？ JavaScript模板是将HTML结构与其中包含的内容分开的方法。模板系统通常会引入一些新的语法，但通常非常易于使用，尤其是如果我们以前在其他地方使用了模板系统（例如，PHP中的树枝）。值得注意的一个有趣的点是，令牌更换通常由双卷曲括号（{{...}}）表示，它们的胡须和把手从（提示：侧面转动它们以查看相似度）。

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

>我们发现自己在JavaScript字符串中包括HTML时，我们应该开始考虑JavaScript模板可以给我们带来什么好处。当构建可维护的代码库时，关注点的分离至关重要，因此，任何可以帮助我们实现这一目标的事情都应探讨。在前端网络开发中，当将HTML与JavaScript分开时，这是一个体现的（这两种方法是我们不应在HTML中包含JavaScript Inline）。

一些可以从JavaScript模板中受益的常见场景是实时的Web应用程序（例如，用于事件注释的实时流式应用程序）或国际化（I18N），通常要求使用相同格式显示不同的内容。。

我们如何实现JavaScript模板？

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

大多数库都支持内联和外部模板。内联模板非常适合当我们拥有很少的模板时，或者我们知道我们将在每个页面上使用随附的模板，但是通常我们的模板应该是外部的。外部模板带来了许多好处，除非页面需要。

> Mustache.js

小胡子是一个多语言，无逻辑的模板系统。 useache.js实现只是众多。因此，一旦我们习惯了（非常简单的）语法，我们就可以用多种编程语言使用它。

>关键点

9kb文件尺寸（小）

简单

>示例

请参见codepen上的sitepoint（@sitepoint）的笔小胡子示例。

如您在此示例中所看到的，

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

登录后复制

需要两个参数：胡子模板以及包含呈现模板所需的数据和代码的视图对象。在这种情况下，我们将用简单的字符串替换名称和功率变量，但是可以做更多的事情。例如，在数组上循环，或使用使用当前视图作为视图参数的特殊渲染函数。

//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.js非常适合最少模板复杂性的小型项目和快速原型。要注意的一个关键是，我们可以用Mustache.js开始一个项目，然后轻松地升级到handlebars.js，因为模板（主要）相同。

如果您想阅读更多有关小胡子的信息，请查看：使用Mustache.js。

创建HTML模板

> handlebars.js

handlebars.js建立在胡子顶部，大多与胡须模板兼容。简而言之，它提供了所有Mustache.js提供的所有内容，并支持块表达式和预编译模板。预编译的模板是一件大事，因为它们的性能提高了大幅度（在粗略的性能测试中，预编译了handlebars.js模板在大约一半的胡须模板时呈现）。块表达式使您可以在模板中包含更多逻辑；这些最常见的例子之一是高级迭代器，例如。创建一个

中。您可以在此处阅读有关块表达式的更多信息。
>关键点
- 86KB文件大小（大）或18KB
>示例
```
<script id="template" type="x-tmpl-mustache">
 Use the {{power}}, {{name}}!
</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）的笔式示例
> handlebars.js非常适合性能很重要的项目，我们并不担心在页面的重量中添加18kb。如果我们想利用块表达式，这也是一个路要走。
>
>请注意，要查看handlebars.js的性能优势（以及大大减少的文件大小），我们必须使用预编译模板。为了有效地这样做，我们应该在我们的构建过程中添加handlebars.js模板汇编（Grunt对此具有很好的插件）。

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

> jQuery模板

> jQuery模板不像Mustache.js或Handlebars.js那样受欢迎，但我们不应该忽略它。模板与胡须模板不同，因为它们只是没有新语法的普通html。它使用数据属性来指示应在HTML片段中插入数据的位置。
>关键点

7kb文件尺寸（小）
- 需要jQuery（82kb）
- 简单，但与Mustache和Handlebars.js的工作方式不同，
- 没有预编译模板
```
<script id="template" type="text/x-handlebars-template">
 Use the {{power}}, {{name}}!
</script>
```
登录后复制
请参阅codepen上的sitepoint（@sitepoint）的笔jQuery模板示例。
```
//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;
```
登录后复制
jQuery模板非常适合已经包括jQuery的项目，因为文件大小很小。但是，如果您的项目不使用jQuery，则很难考虑到总文件大小。>
其他选项

当然还有许多其他解决此问题的解决方案，我们将在本文中详细介绍。这是对其他一些流行选择的快速概述;
>
下划线是一个受欢迎的JavaScript库，它在无数其他功能之间提供了模板功能。默认情况下，它不使用小胡子使用的双卷曲括号语法，而是选择ERB风格的定界数（）。
>嵌入式JS模板（EJS）

类似于underscore.js，嵌入式JS模板使用ERB风格的语法进行模板。 EJS值得注意的一件事是，模板必须是外部文件 - 它们不能是内联文件。
关闭备注

那么哪个是最好的？像大多数开发问题一样，没有银弹。这取决于许多事情;
>

您已经在项目中使用了jQuery吗？
- >
- >
- >想鸣叫吗？请在下面发表评论！
经常询问有关JavaScript模板引擎的问题

JavaScript模板引擎之间的关键差异是什么？

JavaScript模板引擎在语法，性能和功能方面有所不同。例如，EJS以其简单性和易用性而闻名，而Handlebars.js提供了强大的无逻辑模板。 Mustache.js是另一个流行的选择，因为它的跨语言兼容性。重要的是选择适合您项目需求和编码样式的模板引擎。

> JavaScript模板引擎如何改善Web开发？

JavaScript模板引擎简化了生成HTML的过程，使其更加容易，从而使其变得更加容易创建动态网页。它们允许开发人员将HTML结构与数据分开，从而导致更清洁，更可维护的代码。模板发动机还支持可重复使用的组件，可以大大减少开发时间。

我可以在一个项目中使用多个JavaScript模板引擎吗？
>
>，而从技术上讲可以在单个项目中使用多个模板引擎项目，通常不建议使用。使用多个引擎会导致代码不一致和增加的复杂性。最好选择一个适合您需求并在整个项目中坚持下去的模板引擎。
> JavaScript模板引擎如何使用Express.js？

express.js（一种流行的Node.js的Web应用程序框架）支持广泛的模板引擎。选择模板引擎后，您可以将其设置为Express.js中的默认引擎。这使您可以使用所选的引擎渲染视图，简化生成动态HTML的过程。
>
>
JavaScript中的功能可以更轻松地插值和多行字符串。尽管它们可用于生成HTML，但它们缺乏模板引擎提供的许多功能，例如支持可重复使用的组件和关注点的分离。但是，它们对于不需要成熟的模板引擎的简单用例可能很有用。

>如何为项目选择正确的JavaScript模板模板引擎？引擎取决于您的项目要求和个人喜好。考虑因素，例如您的项目的复杂性，引擎的学习曲线及其提供的功能。看着社区和引擎周围的支持也是一个好主意。

> JavaScript模板引擎之间是否存在性能差异？。一些发动机在编译模板方面更快，而另一些引擎则在渲染方面表现出色。但是，对于大多数Web应用程序，这些差异不太可能对性能产生明显的影响。

我可以创建自己的JavaScript模板引擎吗？，尽管通常不建议您使用现有发动机不满足的特定需求。创建模板引擎需要对JavaScript有深刻的了解，并且可能很耗时。

我如何通过JavaScript模板引擎来调试问题？
>

使用模板引擎的调试问题可能具有挑战性，可能是具有挑战性的，由于错误在运行时经常发生。但是，大多数引擎都提供有用的错误消息，可以指导您解决问题的源头。使用衬里来捕获语法错误也是一个好主意。
> javaScript模板引擎仅用于Web开发？
>
>
在模板开发中最常用时，它们也可以在其他情况下使用。例如，它们可用于生成电子邮件，PDF或任何其他基于文本的内容。模板引擎的关键优点是它们可以将数据与演示分开的能力，这在广泛的应用程序中很有用。