用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;

另一种构建 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> jQuery 将返回的文档插入 HTML 元素中，而不是将其赋值给变量。因此，我们需要一个虚拟容器来保存模板。我已经使用了默认情况下隐藏的模板容器。上面的示例检索 template1 并加载它。然后，我们可以从虚拟容器中获取模板并将其传递给 Mustache 进行渲染。这就是外部方法的工作方式。我们还可以使用 AJAX 请求从服务器获取数据。 结论 模板引擎和框架对于管理具有动态变化的展现视图的复杂系统非常重要。Mustache.js 是在客户端管理模板的最佳选择之一。我们在本教程的开头解释了为什么模板很重要。然后，我们继续介绍使用 Mustache 模板的各种技术。现在，您将能够选择在项目中实现 Mustache 模板的方法。我们已经完成了探索使用 Mustache 模板的各种技术，但是 Mustache 还带有变量、节、函数和部分模板等标签，这些标签用于管理复杂的模板。讨论每个标签的语法超出了本教程的范围。您可以在 Mustache GitHub 页面上找到 Mustache 标签的综合指南。随意分享您以前使用 Mustache.js 的经验！ Mustache.js 常见问题解答 (FAQ) <ul> <li>Mustache.js 与其他 JavaScript 模板库的主要区别是什么？</li> </ul> Mustache.js 是一种无逻辑模板语法。这意味着它可以用于 HTML、配置文件、源代码——任何内容。它的工作原理是使用哈希或对象中提供的值扩展模板中的标签。与其他 JavaScript 模板库不同，Mustache.js 不包含任何 if 语句、else 子句或 for 循环。相反，它只有标签。一些标签被替换为一个值，一些什么也没有，另一些则是一系列值。 <ul> <li>如何将 Mustache.js 用于 HTML 模板化？</li> </ul> 要将 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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr