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

首页

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> id<span >="template"</script></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></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"</script> type="x-tmpl-mustache">
 Use the {{power}}, {{name}}!
>

```
```
//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"</script> type="text/x-handlebars-template">
 Use the {{power}}, {{name}}!
>
```
请参阅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或任何其他基于文本的内容。模板引擎的关键优点是它们可以将数据与演示分开的能力，这在广泛的应用程序中很有用。

以上是JavaScript模板引擎的概述的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。