用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() 函数使用您提供的数据呈现模板。