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示例
> 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或任何其他基於文本的內容。模板引擎的關鍵優點是它們可以將數據與演示分開的能力，這在廣泛的應用程序中很有用。