一个初学者的手柄指南

如今，大多数Web都由动态应用程序组成，其中数据在其中频繁更改。结果，需要不断更新浏览器上呈现的数据。这是JavaScript模板引擎进行营救并变得如此有用的地方。他们简化了手动更新视图的过程，同时他们通过允许开发人员将业务逻辑与其余的代码分开来改善应用程序的结构。一些最著名的JavaScript模板引擎是胡须，下划线，EJS和车把。在本文中，我们将通过讨论其主要特征来将注意力集中在车把上。

钥匙要点

车把是一种无逻辑的模板引擎，可扩展胡须，通过助手增加最小的逻辑，使其非常适合将HTML结构与业务逻辑分开并增强应用程序可维护性。 在车把中的模板创建涉及使用双卷发括号`{{{}}`对于变量，可以预先编译以提高性能并减少客户端处理。

>
• 车把支持自定义帮助者，使开发人员能够在模板中实现复杂的逻辑，从而超出了简单数据绑定的灵活性。
车把中的部分模板有助于跨应用程序的不同部分的代码重复使用，简化了开发过程并保持一致性。 车把模板的预编码可以通过最大程度地减少客户端的运行时编译开销来显着提高Web应用程序的性能。
>车把：它是什么以及为什么使用它
>车把是一种动态生成HTML页面的无逻辑模板引擎。这是胡须的扩展，并具有一些其他功能。小胡子完全没有逻辑，但是由于使用了一些帮助者（例如，否则，除非，除非，除非，除非，除非，否则我们将在本文中进行进一步讨论，却增加了最小的逻辑。实际上，我们可以说车把是胡子的超集。> 就像其他任何JavaScript文件一样
>如果您要问为什么要使用此模板引擎而不是另一个引擎，则应查看其优点。这是一个简短列表：

>它可以使您的HTML页面保持清洁，并将无逻辑模板与JavaScript文件中的业务逻辑分开，从而改善了应用程序的结构（以及其可维护性和可扩展性）

>

它简化了手动更新视图上的数据的任务

>用于流行框架和平台，例如

我希望此简短回顾可以帮助您确定是否值得使用车把。

如何工作？

>

如上图所示，车把工程的方式可以汇总如下：

1. >车把采用一个带有变量的模板，并将其编译为函数
> 然后，通过将JSON对象作为参数传递来执行此功能。该JSON对象称为上下文，它包含模板中使用的变量的值。 在执行时，该函数返回所需的HTML，替换了模板的变量，其相应的值>
要了解上述过程，让我们从详细说明上述所有步骤的演示开始。
3. 。
>模板

模板可以写在HTML文件中或单独写入。在第一种情况下，它们出现在<script>标签中，带有type =“ text/x handlebars-template”属性和ID。变量用双卷发括号{{}}写成，称为表达式。这是一个示例：</script>

>使用此标记，我们可以看到我们必须做的事情。在您的JavaScript文件中，我们首先需要从HTML文档检索模板。在下面的示例中，我们将将模板的ID用于此目的。检索模板后，我们可以使用返回函数的handlebars.compile（）方法对其进行编译。然后通过将上下文作为参数执行此功能。执行完成后，该函数将返回所需的HTML，所有变量被其相应值替换。此时，我们可以将HTML注入我们的网页。

将此描述变成代码会导致以下片段：>

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

可以在此Codepen演示中找到此代码的实时演示

语法

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

现在是时候深入研究车把了。我们将介绍构成车把核心的一些重要术语和语法。

>

表达式

>我们已经在上面的部分中看到了表达式。模板内使用的变量被双卷发括号{{}}包围，被称为表达式：>

html逃脱

>车把可以逃避表达式返回的值。例如，字符

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

与下面报告的上下文变量一起使用：

>

<span>My name is {{name}}</span>

由此产生的HTML将是：

>可以在此Codepen演示中找到显示此功能的现场演示

>评论

>我们还可以在车把模板中编写评论。车把注释的语法为{{！typeYourCommentHere}}。但是，在其中或任何其他在车把中具有特殊含义的符号的评论应以{{！ - typeYourCommentHere--}}形式编写。 HTML中的车把注释不可见，但是如果您想显示它们，则可以使用标准HTML注释：。

如果我们将所有这些概念应用于所使用的模板，我们可以提出下面显示的代码：>

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

如果我们将上一个模板与下面报告的上下文变量一起使用：：

HTML输出将为：

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

将导致浏览器未显示标准HTML注释中的内容。可以在此处找到此示例的演示。

>

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

blocks

在车把中，块是具有块开口（{{＃}}）和关闭（{{/}}）的表达式。稍后，我们将在重点关注助手的同时深入研究此主题。目前，看看如何写块：

路径

<span>My name is {{name}}</span>

>车把支持正常路径和嵌套路径，从而可以查找嵌套当前上下文以下的属性。车把还支持../路径段。此段引用对父模板范围，而不是在上下文中提高一个级别。

为了更好地理解此主题，我们将采用以下示例，其中我们使用每个助手（详细讨论了稍后讨论）。如您所期望的，后者在数组的项目上迭代。

>

在此示例中，我们将使用以下模板：

>

通过提供此上下文变量：

>

I am learning {{language}}. It is {{{adjective}}}.

我们将获得以下所示的输出：

<span>var context = {"language" : "<h3 id="Handlebars">Handlebars</h3>","adjective": "<h3 id="awesome">awesome</h3>"}</span>

就像我们到目前为止创建的其他小摘要一样，此示例可以在Codepen

上使用

帮助者

I am learning <span><span><span><h3 id="gt">></h3></span>Handlebars<span><span></span>></span>. It is <span><span><h3 id="gt">></h3></span>awesome<span><span></span>></span></span></span></span>

>即使车把是无逻辑的模板引擎，它也可以使用助手执行简单的逻辑。车把辅助器是一个简单的标识符，可能随后是参数（被空间隔开），如下所示：

每个参数是一个车把表达式。可以从模板中的任何上下文中访问这些帮助者。

>术语“块”，“助手”和“阻止助手”有时会互换使用，因为大多数内置的助手是块，尽管有功能助手与块助手有些不同。我们将在涵盖自定义帮助者的同时讨论它们。

<span><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}</span>

一些内置的帮助者是，除非，除非，否则。让我们了解更多。

每个助手

>每个助手都用来在数组上迭代。助手的语法为{{#each arrayName}} yourcontent {{/erther}}。我们可以通过在块内使用关键字来参考单个数组项。可以使用{{@index}}呈现数组元素的索引。下面的示例说明了每个辅助器的使用。

如果我们采用以下模板：

>

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

与此上下文变量结合使用

>

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

然后输出将是：

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

可以在codepen上找到此示例的实时演示。

>

如果助手

if助手类似于if语句。如果条件评估为真实的值，则车把将渲染块。我们还可以通过使用{{else}}来指定称为“ else section”的模板部分。除非帮手是IF助手的倒数。当条件评估为falsyvalue时，它会渲染块。

显示IF助手的工作原理，让我们考虑以下模板：>

如果我们提供以下上下文变量：

<span>My name is {{name}}</span>

我们将获取以下报告的结果：

>

I am learning {{language}}. It is {{{adjective}}}.

这是因为一个空数组是

<span>var context = {"language" : "<h3 id="Handlebars">Handlebars</h3>","adjective": "<h3 id="awesome">awesome</h3>"}</span>

falsy

value。 如果您想和助手一起玩，可以查看我在Codepen上创建的实时演示。

>自定义帮助者

>您可以使用车把提供的表达系统创建自己的助手来执行复杂的逻辑。有两种助手：功能助手和阻挡助手。第一个定义是用于单个表达式的，而后者则用于块表达式。回调函数提供的参数是助手名称后写的参数，被空间隔开。使用handlebars.registerhelper（）方法创建了助手

自定义功能助手

函数助手的语法为{{helperName parameter1 parameter2 ...}}。为了更好地了解如何进行实施，让我们创建一个称为studystatus的函数助手，该功能返回一个字符串，如果传球 = 2015：

I am learning <span><span><span><h3 id="gt">></h3></span>Handlebars<span><span></span>></span>. It is <span><span><h3 id="gt">></h3></span>awesome<span><span></span>></span></span></span></span>

，它将“通过”。

在我们的示例中，参数只是一个。但是，如果我们想将更多参数传递到助手的回调函数，则可以在第一个参数被空间分开之后将它们写入模板中。

让我们使用此模板开发一个示例：

<span><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}</span>

和以下上下文变量：

>

<span>var context = {"language" : "Handlebars","adjective": "awesome"}</span>

在这种情况下，输出将为：

<span><!-- I am learning Handlebars -->I am learning Handlebars. It is</span>

这个示例的实时演示可在此处提供。

自定义块助手

>自定义块助手的使用方式与功能助手相同，但是语法有些不同。助手的语法是：

{{#if boolean}}Some Content here{{/if}}

<span><span><span><script> src<span >="/path/to/handlebars.min.js"</script></span>></span><span><span></span>></span></span>

>当我们注册自定义块助手时，车把会自动将选项对象作为最后一个参数添加到回调函数中。此选项对象具有FN（）方法，该方法允许我们临时更改对象的上下文以访问某个属性。让我们通过使用名为studystatus的块助手来更改上一节的示例，但具有相同的上下文变量：

：

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

如果此代码与下面定义的模板一起使用

>

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

我们将获得以下结果：

<span>My name is {{name}}</span>

这是Codepen演示。

部分模板

>车把部分是可以在不同模板之间共享的模板。它们写为{{> partialName}}。在HTML中使用它们之前，我们需要使用handlebars.registerpartial（）方法注册部分。以下示例将帮助您了解如何注册一个名为partialtemplate的部分：>

I am learning {{language}}. It is {{{adjective}}}.

与下面定义的模板一起使用时

>

<span>var context = {"language" : "<h3 id="Handlebars">Handlebars</h3>","adjective": "<h3 id="awesome">awesome</h3>"}</span>

>它将给出以下结果：

I am learning <span><span><span><h3 id="gt">></h3></span>Handlebars<span><span></span>></span>. It is <span><span><h3 id="gt">></h3></span>awesome<span><span></span>></span></span></span></span>

在此代码epen演示中可以找到此代码的实时演示。

>预编译

如我们所见，车把要做的第一件事是将模板编译到函数中。这是在客户上执行的最昂贵的操作之一。如果我们预先编译模板cript，然后将编译版本发送给客户端，我们可以提高应用程序的性能。在这种情况下，在客户端上需要执行的唯一任务是执行该功能。由于预编译的文件是脚本，因此我们可以将脚本加载为HTML作为普通文件。让我们看看如何完成所有这些事情。

>

>首先，您必须使用NPM安装车把-g在全球安装车把。请确保将不同的模板写在带有不同文件名和.handlebars扩展名的单独文件中（例如demo.handlebars）。无需在这些文件中使用<script>标签。<p> <p> <p>现在，将所有模板文件存储在名为模板的单个文件夹中。您可以使用所需的任何文件夹名称，但是如果这样做，请不要忘记相应地更改以下命令。因此，打开终端并执行命令： <pre ><span ><!-- I am learning {{language}} -->I am learning {{language}}. It is {{!--adjective--}}<p> <p>此命令将生成一个名为templatesCompiled.js的文件，其中包含所有编译模板。编译器将将模板插入车把。如果输入文件是demo.handlebars，则将插入handlybars.templates.demo> <pre ><span >var context = {"language" : "Handlebars","adjective": "awesome"}>现在，我们必须将templatesCompiled.js在HTML文件中作为一个普通脚本中。重要的是要注意，我们不需要加载整个车把库，因为不再需要编译器本身。我们可以改用较小的“运行时”构建：<p>> <p><pre ><span ><span ><span ><script src<span >="/path/to/handlebars.min.js"><span ><span ></script>>

现在，我们可以使用以下代码来使用最初在demo.handlebars中存在的模板：

>

<span><span><span><script> id<span >="handlebars-demo"</script></span> type<span>="text/x-handlebars-template"</span>></span><span><span><div>My name is {{name}}. I am a {{occupation}}.</div></span></span><span><span></span>></span></span>

最终输出将是以下内容：

>

<span>// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
</span><span>// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
</span><span>var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
</span><span>// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
</span><span>// Insert the HTML code into the page$(document.body).append(html);</span>

此方法将显着提高应用程序的性能，并且随着我们使用比整个库更轻的车把的运行时构建，页面加载时间也会减少。。

该整个预编译演示的代码可在GitHub上获得。

结论

在本文中，我们讨论了车把的基本概念。我们还检查了其经常使用的功能和语法。希望您喜欢本教程，您将使用其中包含的演示来掌握此主题。我期待着阅读您的评论。

如果您不想下载图书馆，但您仍然想尝试一下，可以在http://tryhandlebarsjs.com/。 关于车把

的常见问题

>什么是用于？

handlebars.js的handlebars.js是Web开发中用于创建动态Web页面并基于数据生成HTML内容的JavaScript模板库。它可以使用占位符（车把）来创建可重复使用的模板以插入数据。该库有助于双向数据绑定，从而允许模板在数据更改时自动更新。开发人员通常使用hannelbars.js进行客户端渲染，条件逻辑和数据迭代。它促进了HTML结构和数据之间关注点的分离，使其成为构建交互式和数据驱动的Web应用程序的有价值工具，同时增强代码可维护性和安全性。

为什么要使用车把代替HTML？ >车把通常与HTML结合使用，而不是用作替换。与HTML结合使用时，它提供了几个优势，包括动态数据绑定，代码可重复性，在显示和数据之间明确分离关注点，客户端渲染，内容生成的一致性，通过代码分离增强安全性以及对本地化的支持。这些好处共同使车把成为构建动态和可维护的Web应用程序的宝贵工具，同时仍依靠HTML来定义网页的基本结构。 ，车把没有被弃用，它仍然是Web开发中可行的javaScript模板库。

什么是车把模板？

>车把模板是基于文本的结构，它定义了Web开发中动态HTML内容的布局和结构。车把是一个JavaScript模板库，允许您创建这些模板，从而使基于数据的HTML内容更加容易。
在车把模板中，您可以包括代表动态数据的占位符，称为“车把”。这些车把封闭在双卷发括号{{}}中。例如：

你好，{{name}}！

在此简单的把手模板中，{{name}}是一个可变的占位符，称为“名称” 。”当您使用特定数据（例如{name：“ john”}）渲染此模板时，用相应的数据值替换{{name}}的车把：

您好，John！

车把模板对于创建一致且可维护的HTML内容特别有用，因为它们将演示文稿（HTML结构）与数据分开，从而更容易更新和重复使用在您的Web应用程序上进行的模板。
哪个更好：车把或胡须模板？

>

>车把和小胡子之间的选择取决于您项目的要求和优先级。车把提供了更高级的功能，使其适合于更大的生态系统和社区支持很重要的复杂模板需求和项目。另一方面，胡子更简单，遵循“无逻辑”理念，使其成为优先使用多种编程语言简单性和便携性的项目的理想选择。

以上是一个初学者的手柄指南的详细内容。更多信息请关注PHP中文网其他相关文章！