用Mustache.js創建HTML模板-js教程-PHP中文網

首頁

web前端

js教程

用Mustache.js創建HTML模板

尊渡假赌尊渡假赌尊渡假赌

Feb 24, 2025 am 09:35 AM

Creating HTML Templates with Mustache.js

Web 應用通常採用 MVC 架構，將業務邏輯與展現視圖分離。複雜的項目涉及大量客戶端 HTML 使用 JavaScript 操作，維護起來可能很困難。在這種情況下，我們可以使用模板系統來提高可重用性，並簡化視圖管理任務。 Mustache.js 提供了一個文檔完善的模板系統，可用於管理模板。而且，由於 Mustache 支持多種語言，我們無需在服務器端使用單獨的模板系統。本文介紹了使用 Mustache 的基礎知識。

關鍵要點

Mustache.js 是一個文檔完善的模板系統，可用於管理複雜 Web 應用中的 HTML 模板，提高可重用性並簡化視圖管理任務。
Mustache.js 是無邏輯的，這意味著其模板不包含任何 if-else 條件或 for 循環。它使用雙大括號表示的標籤將數據添加到模板中。
Mustache 模板可以通過多種方式定義，包括內聯方法、內聯腳本和外部 HTML 片段。選擇哪種方法取決於項目的具體需求。
Mustache.js 是一款多功能工具，可在客戶端和服務器端使用，並支持多種語言。它還帶有用於管理複雜模板的標籤，例如變量、節、函數和部分模板。

為什麼我們需要模板系統？

大多數不了解模板系統的開發者會創建新的 HTML 代碼塊，並使用 JavaScript 動態地將它們插入 DOM。一種常見的方法是將 HTML 元素指定為字符串，然後設置 innerHTML 屬性或調用 jQuery html() 方法。下面是一個示例：

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;</pre>登入後複製

登入後複製

另一種構建 DOM 的方法是創建元素並分別追加它們，如下所示：

var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</pre>登入後複製

登入後複製

以上兩種方法都可以有效地將元素動態添加到文檔中。考慮這樣一種情況：我們有一個設計精良的項目符號列表，需要在網站的三個不同類型的頁面中使用。使用這些技術，我們將不得不在三個不同的位置重複列表的 HTML 代碼。這通常被認為是不好的編碼習慣。在這種情況下，我們可以在不同位置使用預定義的模板，而無需重複代碼。 Mustache.js 是一個非常流行的 JavaScript 模板引擎。由於 Mustache 提供了多種語言的服務器端和客戶端模板，因此我們不必擔心選擇單獨的模板引擎。

Mustache.js 入門

Mustache 是一個開源的無邏輯模板系統，適用於 JavaScript、Ruby、Python、PHP 和 Java 等語言。您可以訪問 GitHub 上的官方頁面獲取庫的副本。 Mustache 將模板和視圖作為創建動態模板的基礎。視圖包含要包含在模板中的 JSON 數據。模板包含帶有模板標籤的展現 HTML 或數據，用於包含視圖數據。前面我們提到 Mustache 是無邏輯的。這意味著模板不包含任何 if-else 條件或 for 循環。現在，讓我們通過一個簡單的示例開始使用 Mustache 模板。

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;</pre>登入後複製

登入後複製

首先，我們需要在文檔中包含 mustache.js 文件。然後，我們可以開始創建 Mustache 模板。在上面的示例中，我們有一個視圖，其中包含一個人的姓名和職業。然後，我們在 render() 函數內使用展現代碼和姓名和職業數據的標籤。標籤由圍繞它們的雙大括號或鬍鬚表示。現在，讓我們看看 render() 方法是如何工作的。

渲染 Mustache 模板

以下代碼顯示了 mustache.js 文件中 render() 函數的實現。可以向 render() 傳遞三個參數。前兩個參數 template 和 view 是必需的。 partials 可以被認為是動態模板，您可以將其註入到主模板中。在我們之前的示例中，我們將模板作為內聯參數傳遞，將視圖作為第二個參數傳遞，並將結果賦值給輸出變量。

var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</pre>登入後複製

登入後複製

這是使用 Mustache 進行模板化的最基本形式。讓我們看看其他可用於創建更規范代碼的方法。

定義 Mustache 模板

在您的應用程序中定義 Mustache 模板有多種方法。這些方法類似於使用內聯樣式、內聯樣式表和外部樣式表包含 CSS。我們前面討論的示例可以被認為是一種內聯方法，因為我們直接將模板傳遞給函數。此方法阻止了可重用模板的可能性。讓我們看看如何將模板定義為內聯腳本模板，而不是直接傳遞給函數。

模板作為內聯腳本

我們可以在 </pre>

您可以根據需要在文檔中包含任意數量的具有不同 ID 的模板。當您要使用模板時，使用 innerHTML 獲取腳本標籤內的 HTML，並將其作為模板傳遞。我們的第一個示例將更改為以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Mustache.js Inline Method</title>
  <🎜>
</head>
<body>
  <🎜>
  <p id="person"></p>
</body>
<🎜>
</html></pre>登入後複製

如您所見，模板是單獨存儲的，並在需要時動態使用。此方法增加了重用模板的可能性。但是，使用內聯腳本會將模板的作用域限制在一個頁面上。如果您有多個頁面，則必須再次定義模板。因此，包含外部文件中的模板將是理想的解決方案——就像 CSS 一樣。

模板作為外部 HTML 片段

在此技術中，我們將使用 jQuery 來實現模板化。 jQuery 提供了一個名為 load() 的函數，可用於獲取外部文檔的一部分。我們將使用此方法從外部模板文件動態加載模板。 load() 函數執行腳本而不是返回它們，因此我們不能像在前面方法中那樣在腳本標籤內創建模板。以下示例顯示了我們將要使用的外部模板文件。

var dynamic_html = "<div>HighlightedAuthor</div>";

document.getElementById("container").innerHTML = dynamic_html;</pre>登入後複製

登入後複製

我們已對模板使用 <div> 元素而不是腳本，以使其與 jQuery 的 load() 函數兼容。這裡，我們有三個具有三個不同 ID 的不同模板。現在，讓我們繼續在您的頁面中使用這些模板。

var title = document.createElement('div');
var highlight = document.createElement('span');
var highlight_text = document.createTextNode("Highlight");
var author = document.createElement('span');
var author_text = document.createTextNode("Author");
var container = document.getElementById('container');

highlight.appendChild(highlight_text);
title.appendChild(highlight);
author.appendChild(author_text);
title.appendChild(author);
container.appendChild(title);</pre>登入後複製

登入後複製

jQuery 將返回的文檔插入 HTML 元素中，而不是將其賦值給變量。因此，我們需要一個虛擬容器來保存模板。我已經使用了默認情況下隱藏的模板容器。上面的示例檢索 template1 並加載它。然後，我們可以從虛擬容器中獲取模板並將其傳遞給 Mustache 進行渲染。這就是外部方法的工作方式。我們還可以使用 AJAX 請求從服務器獲取數據。

結論

模板引擎和框架對於管理具有動態變化的展現視圖的複雜系統非常重要。 Mustache.js 是在客戶端管理模板的最佳選擇之一。我們在本教程的開頭解釋了為什麼模板很重要。然後，我們繼續介紹使用 Mustache 模板的各種技術。現在，您將能夠選擇在項目中實現 Mustache 模板的方法。我們已經完成了探索使用 Mustache 模板的各種技術，但是 Mustache 還帶有變量、節、函數和部分模板等標籤，這些標籤用於管理複雜的模板。討論每個標籤的語法超出了本教程的範圍。您可以在 Mustache GitHub 頁面上找到 Mustache 標籤的綜合指南。隨意分享您以前使用 Mustache.js 的經驗！

Mustache.js 常見問題解答 (FAQ)

Mustache.js 與其他 JavaScript 模板庫的主要區別是什麼？

Mustache.js 是一種無邏輯模板語法。這意味著它可以用於 HTML、配置文件、源代碼——任何內容。它的工作原理是使用哈希或對像中提供的值擴展模板中的標籤。與其他 JavaScript 模板庫不同，Mustache.js 不包含任何 if 語句、else 子句或 for 循環。相反，它只有標籤。一些標籤被替換為一個值，一些什麼也沒有，另一些則是一系列值。

如何將 Mustache.js 用於 HTML 模板化？

要將 Mustache.js 用於 HTML 模板化，您首先需要在 HTML 文件中包含 Mustache.js 腳本。然後，您在 <script></script> 標籤內定義一個模板。此模板可以包含要插入數據的佔位符。這些佔位符由雙大括號表示，例如 {{name}}。然後，您使用 Mustache.render() 函數使用您提供的數據呈現模板。