本文由克里斯·佩里（Chris Perry）和里特什·庫馬爾（Ritesh Kumar）進(jìn)行了同行評審。感謝SitePoint所有的同行評審員制作SitePoint內(nèi)容的最佳狀態(tài)！ 在本文中，我們將在JavaScript中概述模板。我們將首先討論什么是JavaScript模板，何時應(yīng)該使用它們以及如何實(shí)施它們，然后再詳細(xì)介紹一些流行的模板引擎。我們將專注于胡子，車把和jQuery模板。> 鑰匙要點(diǎn)

JavaScript模板

>提供了一種將HTML結(jié)構(gòu)與內(nèi)容分開的方法，從而提高了代碼庫的可維護(hù)性。它們對實(shí)時Web應(yīng)用程序和國際化特別有益，通常需要使用相同格式顯示不同的內(nèi)容。

Mustache.js是一種多語言，無邏輯的模板系統(tǒng)，非常適合小型項(xiàng)目和快速原型。它很簡單，沒有依賴項(xiàng)，也不需要預(yù)編譯模板。此外，由于模板大多相同，因此項(xiàng)目可以輕松升級到handlebars.js。

handlebars.js建立在胡須之上，支持塊表達(dá)式和預(yù)編譯模板，從而顯著提高性能。它適用于性能至關(guān)重要的項(xiàng)目，并且在頁面重量中增加18KB并不是一件問題。要查看性能優(yōu)勢和減少文件大小，必須使用預(yù)編譯模板。

jQuery模板雖然不像Mustache.js或Handlebars.js那樣受歡迎，但不應(yīng)忽略。它需要jQuery并使用數(shù)據(jù)屬性來指示應(yīng)將數(shù)據(jù)插入HTML片段中的位置。由于其較小的文件大小，因此非常適合已經(jīng)包括jQuery在內(nèi)的項(xiàng)目。但是，不建議考慮使用總文件大小的項(xiàng)目。。
什么是JavaScript模板？ JavaScript模板是將HTML結(jié)構(gòu)與其中包含的內(nèi)容分開的方法。模板系統(tǒng)通常會引入一些新的語法，但通常非常易于使用，尤其是如果我們以前在其他地方使用了模板系統(tǒng)（例如，PHP中的樹枝）。值得注意的一個有趣的點(diǎn)是，令牌更換通常由雙卷曲括號（{{...}}）表示，它們的胡須和把手從（提示：側(cè)面轉(zhuǎn)動它們以查看相似度）。

我們什么時候應(yīng)該使用JavaScript模板？

>我們發(fā)現(xiàn)自己在JavaScript字符串中包括HTML時，我們應(yīng)該開始考慮JavaScript模板可以給我們帶來什么好處。當(dāng)構(gòu)建可維護(hù)的代碼庫時，關(guān)注點(diǎn)的分離至關(guān)重要，因此，任何可以幫助我們實(shí)現(xiàn)這一目標(biāo)的事情都應(yīng)探討。在前端網(wǎng)絡(luò)開發(fā)中，當(dāng)將HTML與JavaScript分開時，這是一個體現(xiàn)的（這兩種方法是我們不應(yīng)在HTML中包含JavaScript Inline）。

>

一些可以從JavaScript模板中受益的常見場景是實(shí)時的Web應(yīng)用程序（例如，用于事件注釋的實(shí)時流式應(yīng)用程序）或國際化（I18N），通常要求使用相同格式顯示不同的內(nèi)容。 。
我們?nèi)绾螌?shí)現(xiàn)JavaScript模板？

>我們將通過特定的庫示例對此進(jìn)行更詳細(xì)的介紹，但是從本質(zhì)上講，它就像包括我們選擇的庫，獲取我們的模板并將其與一些數(shù)據(jù)一起渲染的簡單。

大多數(shù)庫都支持內(nèi)聯(lián)和外部模板。內(nèi)聯(lián)模板非常適合當(dāng)我們擁有很少的模板時，或者我們知道我們將在每個頁面上使用隨附的模板，但是通常我們的模板應(yīng)該是外部的。外部模板帶來了許多好處，除非頁面需要。

> Mustache.js

小胡子是一個多語言，無邏輯的模板系統(tǒng)。 useache.js實(shí)現(xiàn)只是眾多。因此，一旦我們習(xí)慣了（非常簡單的）語法，我們就可以用多種編程語言使用它。
>關(guān)鍵點(diǎn)

9kb文件尺寸（?。?/p>

簡單

沒有依賴關(guān)系
沒有邏輯
沒有預(yù)編譯模板
編程語言不可知論
• >示例
請參見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>

需要兩個參數(shù)：胡子模板以及包含呈現(xiàn)模板所需的數(shù)據(jù)和代碼的視圖對象。在這種情況下，我們將用簡單的字符串替換名稱和功率變量，但是可以做更多的事情。例如，在數(shù)組上循環(huán)，或使用使用當(dāng)前視圖作為視圖參數(shù)的特殊渲染函數(shù)。

//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非常適合最少模板復(fù)雜性的小型項(xiàng)目和快速原型。要注意的一個關(guān)鍵是，我們可以用Mustache.js開始一個項(xiàng)目，然后輕松地升級到handlebars.js，因?yàn)槟０澹ㄖ饕┫嗤?

如果您想閱讀更多有關(guān)小胡子的信息，請查看：使用Mustache.js。

創(chuàng)建HTML模板

> handlebars.js

handlebars.js建立在胡子頂部，大多與胡須模板兼容。簡而言之，它提供了所有Mustache.js提供的所有內(nèi)容，并支持塊表達(dá)式和預(yù)編譯模板。預(yù)編譯的模板是一件大事，因?yàn)樗鼈兊男阅芴岣吡舜蠓龋ㄔ诖致缘男阅軠y試中，預(yù)編譯了handlebars.js模板在大約一半的胡須模板時呈現(xiàn)）。塊表達(dá)式使您可以在模板中包含更多邏輯；這些最常見的例子之一是高級迭代器，例如。創(chuàng)建一個

列表迭代器，該迭代器將每個項(xiàng)目包裝在
• 中。您可以在此處閱讀有關(guān)塊表達(dá)式的更多信息。

  >關(guān)鍵點(diǎn)

  如果使用預(yù)編譯模板，則
  • 86KB文件大小（大）或18KB
  塊表達(dá)式（助手）
  >預(yù)編譯模板
  沒有依賴關(guān)系
  >示例

  <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非常適合性能很重要的項(xiàng)目，我們并不擔(dān)心在頁面的重量中添加18kb。如果我們想利用塊表達(dá)式，這也是一個路要走。

  >

  >請注意，要查看handlebars.js的性能優(yōu)勢（以及大大減少的文件大小），我們必須使用預(yù)編譯模板。為了有效地這樣做，我們應(yīng)該在我們的構(gòu)建過程中添加handlebars.js模板匯編（Grunt對此具有很好的插件）。

  >如果您想了解有關(guān)車把的更多信息，請查看：

  的初學(xué)者指南。
  > jQuery模板
  > jQuery模板不像Mustache.js或Handlebars.js那樣受歡迎，但我們不應(yīng)該忽略它。模板與胡須模板不同，因?yàn)樗鼈冎皇菦]有新語法的普通html。它使用數(shù)據(jù)屬性來指示應(yīng)在HTML片段中插入數(shù)據(jù)的位置。

  >關(guān)鍵點(diǎn)

  7kb文件尺寸（?。?ul>
• 需要jQuery（82kb）
• 簡單，但與Mustache和Handlebars.js的工作方式不同，
• 沒有預(yù)編譯模板
>示例

<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模板非常適合已經(jīng)包括jQuery的項(xiàng)目，因?yàn)槲募笮『苄?。但是，如果您的?xiàng)目不使用jQuery，則很難考慮到總文件大小。>

其他選項(xiàng)
當(dāng)然還有許多其他解決此問題的解決方案，我們將在本文中詳細(xì)介紹。這是對其他一些流行選擇的快速概述;

> 下劃線是一個受歡迎的JavaScript庫，它在無數(shù)其他功能之間提供了模板功能。默認(rèn)情況下，它不使用小胡子使用的雙卷曲括號語法，而是選擇ERB風(fēng)格的定界數(shù)（）。

>嵌入式JS模板（EJS）

類似于underscore.js，嵌入式JS模板使用ERB風(fēng)格的語法進(jìn)行模板。 EJS值得注意的一件事是，模板必須是外部文件 - 它們不能是內(nèi)聯(lián)文件。

關(guān)閉備注

那么哪個是最好的？像大多數(shù)開發(fā)問題一樣，沒有銀彈。這取決于許多事情;

>

您已經(jīng)在項(xiàng)目中使用了jQuery嗎？

您以前有哪些模板系統(tǒng)？
您是否要將邏輯放在模板之外？
• >
您對總頁面文件大小有多擔(dān)心？
• >
您對性能有多擔(dān)心/您的網(wǎng)站需要支持低功率設(shè)備嗎？
>一旦考慮了這些因素，我們就可以從上面的列表中做出有根據(jù)的選擇。但是，如前所述，一個良好的靈活策略是首先實(shí)施Mustache.js，然后如果需要附加功能或性能益處，然后將其交換到Handlebars.js。
• >想鳴叫嗎？請?jiān)谙旅姘l(fā)表評論！

經(jīng)常詢問有關(guān)JavaScript模板引擎的問題

JavaScript模板引擎之間的關(guān)鍵差異是什么？

JavaScript模板引擎在語法，性能和功能方面有所不同。例如，EJS以其簡單性和易用性而聞名，而Handlebars.js提供了強(qiáng)大的無邏輯模板。 Mustache.js是另一個流行的選擇，因?yàn)樗目缯Z言兼容性。重要的是選擇適合您項(xiàng)目需求和編碼樣式的模板引擎。

> JavaScript模板引擎如何改善Web開發(fā)？

JavaScript模板引擎簡化了生成HTML的過程，使其更加容易，從而使其變得更加容易創(chuàng)建動態(tài)網(wǎng)頁。它們允許開發(fā)人員將HTML結(jié)構(gòu)與數(shù)據(jù)分開，從而導(dǎo)致更清潔，更可維護(hù)的代碼。模板發(fā)動機(jī)還支持可重復(fù)使用的組件，可以大大減少開發(fā)時間。

我可以在一個項(xiàng)目中使用多個JavaScript模板引擎嗎？

>

>，而從技術(shù)上講可以在單個項(xiàng)目中使用多個模板引擎項(xiàng)目，通常不建議使用。使用多個引擎會導(dǎo)致代碼不一致和增加的復(fù)雜性。最好選擇一個適合您需求并在整個項(xiàng)目中堅(jiān)持下去的模板引擎。

> JavaScript模板引擎如何使用Express.js？

express.js（一種流行的Node.js的Web應(yīng)用程序框架）支持廣泛的模板引擎。選擇模板引擎后，您可以將其設(shè)置為Express.js中的默認(rèn)引擎。這使您可以使用所選的引擎渲染視圖，簡化生成動態(tài)HTML的過程。

>

>

JavaScript中的功能可以更輕松地插值和多行字符串。盡管它們可用于生成HTML，但它們?nèi)狈δ０逡嫣峁┑脑S多功能，例如支持可重復(fù)使用的組件和關(guān)注點(diǎn)的分離。但是，它們對于不需要成熟的模板引擎的簡單用例可能很有用。

>如何為項(xiàng)目選擇正確的JavaScript模板模板引擎？引擎取決于您的項(xiàng)目要求和個人喜好。考慮因素，例如您的項(xiàng)目的復(fù)雜性，引擎的學(xué)習(xí)曲線及其提供的功能。看著社區(qū)和引擎周圍的支持也是一個好主意。

> JavaScript模板引擎之間是否存在性能差異？ 。一些發(fā)動機(jī)在編譯模板方面更快，而另一些引擎則在渲染方面表現(xiàn)出色。但是，對于大多數(shù)Web應(yīng)用程序，這些差異不太可能對性能產(chǎn)生明顯的影響。

我可以創(chuàng)建自己的JavaScript模板引擎嗎？ ，盡管通常不建議您使用現(xiàn)有發(fā)動機(jī)不滿足的特定需求。創(chuàng)建模板引擎需要對JavaScript有深刻的了解，并且可能很耗時。

我如何通過JavaScript模板引擎來調(diào)試問題？

>

使用模板引擎的調(diào)試問題可能具有挑戰(zhàn)性，可能是具有挑戰(zhàn)性的，由于錯誤在運(yùn)行時經(jīng)常發(fā)生。但是，大多數(shù)引擎都提供有用的錯誤消息，可以指導(dǎo)您解決問題的源頭。使用襯里來捕獲語法錯誤也是一個好主意。

> javaScript模板引擎僅用于Web開發(fā)？

>

>

在模板開發(fā)中最常用時，它們也可以在其他情況下使用。例如，它們可用于生成電子郵件，PDF或任何其他基于文本的內(nèi)容。模板引擎的關(guān)鍵優(yōu)點(diǎn)是它們可以將數(shù)據(jù)與演示分開的能力，這在廣泛的應(yīng)用程序中很有用。

以上是JavaScript模板引擎的概述的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！