一個初學者的手柄指南

如今，大多數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</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

可以在此Codepen演示中找到此代碼的實時演示

語法

<span><span><span><script</span> id<span>="handlebars-demo"</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></script</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</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

如果我們將上一個模板與下面報告的上下文變量一起使用：：

HTML輸出將為：

<span><span><span><script</span> id<span>="handlebars-demo"</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></script</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>Handlebars</h3>","adjective": "<h3>awesome</h3>"}</span>

就像我們到目前為止創建的其他小摘要一樣，此示例可以在Codepen

上使用

幫助者

I am learning <span><span><span><h3</span>></span>Handlebars<span><span></h3</span>></span>. It is <span><span><h3</span>></span>awesome<span><span></h3</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</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

與此上下文變量結合使用

>

<span><span><span><script</span> id<span>="handlebars-demo"</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></script</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>Handlebars</h3>","adjective": "<h3>awesome</h3>"}</span>

falsy

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

>自定義幫助者

>您可以使用車把提供的表達系統創建自己的助手來執行複雜的邏輯。有兩種助手：功能助手和阻擋助手。第一個定義是用於單個表達式的，而後者則用於塊表達式。回調函數提供的參數是助手名稱後寫的參數，被空間隔開。使用handlebars.registerhelper（）方法創建了助手

自定義功能助手

函數助手的語法為{{helperName parameter1 parameter2 ...}}。為了更好地了解如何進行實施，讓我們創建一個稱為studystatus的函數助手，該功能返回一個字符串，如果傳球 = 2015：

I am learning <span><span><span><h3</span>></span>Handlebars<span><span></h3</span>></span>. It is <span><span><h3</span>></span>awesome<span><span></h3</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</span> src<span>="/path/to/handlebars.min.js"</span>></span><span><span></script</span>></span></span>

>當我們註冊自定義塊助手時，車把會自動將選項對像作為最後一個參數添加到回調函數中。此選項對象具有FN（）方法，該方法允許我們臨時更改對象的上下文以訪問某個屬性。讓我們通過使用名為studystatus的塊助手來更改上一節的示例，但具有相同的上下文變量：

：

<span><span><span><script</span> id<span>="handlebars-demo"</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></script</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>Handlebars</h3>","adjective": "<h3>awesome</h3>"}</span>

>它將給出以下結果：

I am learning <span><span><span><h3</span>></span>Handlebars<span><span></h3</span>></span>. It is <span><span><h3</span>></span>awesome<span><span></h3</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中存在的模板：>

最終輸出將是以下內容：>
 
// Retrieve the template data from the HTML (jQuery is used here).var template = $('#handlebars-demo').html();
// Compile the template data into a functionvar templateScript = Handlebars.compile(template);
var context = { "name" : "Ritesh Kumar", "occupation" : "developer" };
// html = 'My name is Ritesh Kumar. I am a developer.'var html = templateScript(context);
// Insert the HTML code into the page$(document.body).append(html);
此方法將顯著提高應用程序的性能，並且隨著我們使用比整個庫更輕的車把的運行時構建，頁面加載時間也會減少。 。
該整個預編譯演示的代碼可在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中文網其他相關文章！