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;
另一種構建 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);
以上兩種方法都可以有效地將元素動態添加到文檔中。考慮這樣一種情況：我們有一個設計精良的項目符號列表，需要在網站的三個不同類型的頁面中使用。使用這些技術，我們將不得不在三個不同的位置重複列表的 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;
首先，我們需要在文檔中包含 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);
這是使用 Mustache 進行模板化的最基本形式。讓我們看看其他可用於創建更規范代碼的方法。
定義 Mustache 模板
在您的應用程序中定義 Mustache 模板有多種方法。這些方法類似於使用內聯樣式、內聯樣式表和外部樣式表包含 CSS。我們前面討論的示例可以被認為是一種內聯方法，因為我們直接將模板傳遞給函數。此方法阻止了可重用模板的可能性。讓我們看看如何將模板定義為內聯腳本模板，而不是直接傳遞給函數。
模板作為內聯腳本
我們可以在
您可以根據需要在文檔中包含任意數量的具有不同 ID 的模板。當您要使用模板時，使用 innerHTML 獲取腳本標籤內的 HTML，並將其作為模板傳遞。我們的第一個示例將更改為以下代碼：
<!DOCTYPE html> <html lang="en"> <head> <title>Mustache.js Inline Method</title> <🎜> </head> <body> <🎜> <p id="person"></p> </body> <🎜> </html>
如您所見，模板是單獨存儲的，並在需要時動態使用。此方法增加了重用模板的可能性。但是，使用內聯腳本會將模板的作用域限制在一個頁面上。如果您有多個頁面，則必須再次定義模板。因此，包含外部文件中的模板將是理想的解決方案——就像 CSS 一樣。
模板作為外部 HTML 片段
在此技術中，我們將使用 jQuery 來實現模板化。 jQuery 提供了一個名為 load() 的函數，可用於獲取外部文檔的一部分。我們將使用此方法從外部模板文件動態加載模板。 load() 函數執行腳本而不是返回它們，因此我們不能像在前面方法中那樣在腳本標籤內創建模板。以下示例顯示了我們將要使用的外部模板文件。
var dynamic_html = "<div>HighlightedAuthor</div>";
document.getElementById("container").innerHTML = dynamic_html;
我們已對模板使用 <div> 元素而不是腳本，以使其與 jQuery 的 load() 函數兼容。這裡，我們有三個具有三個不同 ID 的不同模板。現在，讓我們繼續在您的頁面中使用這些模板。
<pre class='brush:php;toolbar:false;'>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>
<p>jQuery 將返回的文檔插入 HTML 元素中，而不是將其賦值給變量。因此，我們需要一個虛擬容器來保存模板。我已經使用了默認情況下隱藏的模板容器。上面的示例檢索 template1 並加載它。然後，我們可以從虛擬容器中獲取模板並將其傳遞給 Mustache 進行渲染。這就是外部方法的工作方式。我們還可以使用 AJAX 請求從服務器獲取數據。 </p>
<p><strong>結論</strong></p>
<p>模板引擎和框架對於管理具有動態變化的展現視圖的複雜系統非常重要。 Mustache.js 是在客戶端管理模板的最佳選擇之一。我們在本教程的開頭解釋了為什麼模板很重要。然後，我們繼續介紹使用 Mustache 模板的各種技術。現在，您將能夠選擇在項目中實現 Mustache 模板的方法。我們已經完成了探索使用 Mustache 模板的各種技術，但是 Mustache 還帶有變量、節、函數和部分模板等標籤，這些標籤用於管理複雜的模板。討論每個標籤的語法超出了本教程的範圍。您可以在 Mustache GitHub 頁面上找到 Mustache 標籤的綜合指南。隨意分享您以前使用 Mustache.js 的經驗！ </p>
<p><strong>Mustache.js 常見問題解答 (FAQ)</strong></p>
<ul>
<li><strong>Mustache.js 與其他 JavaScript 模板庫的主要區別是什麼？ </strong></li>
</ul>
<p>Mustache.js 是一種無邏輯模板語法。這意味著它可以用於 HTML、配置文件、源代碼——任何內容。它的工作原理是使用哈希或對像中提供的值擴展模板中的標籤。與其他 JavaScript 模板庫不同，Mustache.js 不包含任何 if 語句、else 子句或 for 循環。相反，它只有標籤。一些標籤被替換為一個值，一些什麼也沒有，另一些則是一系列值。 </p>
<ul>
<li><strong>如何將 Mustache.js 用於 HTML 模板化？ </strong></li>
</ul>
<p>要將 Mustache.js 用於 HTML 模板化，您首先需要在 HTML 文件中包含 Mustache.js 腳本。然後，您在 <code><script></script> 標籤內定義一個模板。此模板可以包含要插入數據的佔位符。這些佔位符由雙大括號表示，例如 {{name}}。然後，您使用 Mustache.render() 函數使用您提供的數據呈現模板。
- 我可以將 Mustache.js 與 Node.js 一起使用嗎？
是的，您可以將 Mustache.js 與 Node.js 一起使用。為此，您需要使用 npm 安裝 mustache 包。安裝完成後，您可以在 Node.js 文件中需要它並使用它來呈現模板。
- 如何使用 Mustache.js 遍歷數組？
在 Mustache.js 中，您可以使用 {{#array}}…{{/array}} 語法遍歷數組。在此塊內，您可以使用 {{.}} 來引用數組中的當前項。這允許您在模板中顯示數組中的每一項。
- 如何在 Mustache.js 中使用條件語句？
雖然 Mustache.js 是一個無邏輯模板庫，不支持傳統的 if 語句，但您仍然可以使用節來獲得類似的結果。節根據數據對像中鍵的值呈現文本塊一次或多次。
- 如何在 Mustache.js 中包含部分模板？
Mustache.js 中的部分模板允許您在一個較大的模板中包含較小的模板。這對於重用公共元素（如頁眉和頁腳）非常有用。要包含部分模板，您可以使用 {{>partial}} 語法。
- 如何在 Mustache.js 中轉義 HTML？
默認情況下，Mustache.js 會轉義數據中的 HTML，以防止 XSS 攻擊。如果您想從數據中呈現 HTML，可以使用三重大括號語法，例如 {{{html}}}。
- 我可以將 Mustache.js 用於服務器端嗎？
是的，您可以將 Mustache.js 用於服務器端。這對於在將模板發送到客戶端之前呈現它們非常有用，從而減少了需要在客戶端執行的 JavaScript 量。
- 如何在 Mustache.js 中預編譯模板？
在 Mustache.js 中預編譯模板可以通過減少運行時需要完成的工作來提高性能。要預編譯模板，您可以使用 Mustache.parse() 函數。
- 如何調試 Mustache.js 模板？
調試 Mustache.js 模板可能很棘手，因為該庫沒有提供很多錯誤消息。但是，您可以使用 Mustache.parse() 函數檢查您的模板是否有效。此函數返回一個標記數組，您可以檢查它以查看您的模板結構是否正確。
以上是用Mustache.js創建HTML模板的詳細內容。更多資訊請關注PHP中文網其他相關文章！
Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AMPython和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。
從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。
JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。
超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AMJavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。
使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。 首先，什麼是多租戶SaaS應用程序？ 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務
如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫
JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AMJavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。
JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AMJavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
PhpStorm Mac 版本
最新（2018.2.1 ）專業的PHP整合開發工具
WebStorm Mac版
好用的JavaScript開發工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
Dreamweaver Mac版
視覺化網頁開發工具
