搜索

首页 >web前端 >js教程 >JavaScript模板引擎的概述

JavaScript模板引擎的概述

Christopher Nolan
Christopher Nolan原创
2025-02-18 09:18:11826浏览

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并不是一件问题。要查看性能优势和减少文件大小，必须使用预编译模板。
    jQuery模板虽然不像Mustache.js或Handlebars.js那样受欢迎，但不应忽略。它需要jQuery并使用数据属性来指示应将数据插入HTML片段中的位置。由于其较小的文件大小，因此非常适合已经包括jQuery在内的项目。但是，不建议考虑使用总文件大小的项目。。
    • 什么是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
        • 块表达式（助手）
        • >预编译模板
        • 没有依赖关系
      >示例

      <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;
      >请参见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的工作方式不同，
      • 没有预编译模板
        • >示例

      <span><span><span><script</span> id<span>="template"</span> type<span>="text/x-handlebars-template"</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>
      请参阅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吗？

        您以前有哪些模板系统？
        • 您是否要将逻辑放在模板之外？
      • >
        • 您对总页面文件大小有多担心？
      • >
        • 您对性能有多担心/您的网站需要支持低功率设备吗？
        • >一旦考虑了这些因素，我们就可以从上面的列表中做出有根据的选择。但是，如前所述，一个良好的灵活策略是首先实施Mustache.js，然后如果需要附加功能或性能益处，然后将其交换到Handlebars.js。
      • >想鸣叫吗？请在下面发表评论！
      经常询问有关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中文网其他相关文章！

php JavaScript jquery less html express String Array Object if for while format include require catch Error Token double using Event JS function default this margin ul li idea everything excel Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：Build Virtual Reality in VR with Primrose and WebVR下一篇：Creating a WebGL Game with Unity 5 and JavaScript

相关文章

查看更多