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> id<span >="template"</script></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></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> id<span >="template"</script></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></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示例

  > 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> id<span >="template"</script></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></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中文網其他相關文章！