使用Mustache.js创建HTML模板

最新推荐文章于 2025-08-15 22:56:20 发布

dingshi7798

最新推荐文章于 2025-08-15 22:56:20 发布

阅读量255

点赞数

文章标签： javascript java php ViewUI

Web应用程序使用MVC架构将业务逻辑与表示视图分开。涉及大量使用JavaScript进行客户端HTML操纵的复杂项目可能难以维护。在这种情况下，我们可以使用模板系统来提高可重用性并简化管理视图的任务。 Mustache.js提供了一个文档齐全的模板系统，可用于管理您的模板。而且，由于髭须支持多种语言，因此我们在服务器端不需要单独的模板系统。本文介绍了使用胡须的基础知识。

为什么我们需要模板系统

大多数不了解模板系统的开发人员都会创建新的HTML代码块，并使用JavaScript将其动态插入到DOM中。常用的方法是在字符串中指定HTML元素，然后设置innerHTML属性或调用jQuery html()方法。下面显示了此技术的示例。

var dynamic_html = "<div><span>Highlighted</span><span>Author</span></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是针对Java语言，JavaScript，Ruby，Python，PHP和Java开发的开源无逻辑模板系统。您可以通过访问GitHub上的官方页面来获取库的副本。 Mustache提供模板和视图作为创建动态模板的基础。视图包含要作为JSON包含在模板中的数据。模板包含演示文稿HTML或带有模板标签的数据，用于包含视图数据。之前，我们提到胡须少了逻辑。这意味着模板将不包含任何if-else条件或for循环。现在，让我们通过一个简单的示例开始学习胡须模板。

<!doctype html>
<html lang="en">
  <head>
    <title>Mustache.js Inline Method</title>
    <script type="text/javascript" src="mustache.js" ></script>
    <script>
      var view = {
        name : "Joe",
        occupation : "Web Developer"
      };

      function loadtemp(){
        var output = Mustache.render("{{name}} is a  {{occupation}}", view);
        document.getElementById('person').innerHTML = output;
      }
    </script>
  </head>
  <body onload="loadtemp()" >
    <p id="person"></p>
  </body>
</html>

首先，我们需要在文档中包含mustache.js文件。然后我们可以创建胡子模板。在上面的示例中，我们包含一个人的姓名和职业的视图。然后，我们在render()函数中包含模板，其中包含表示代码以及名称和职业数据的标签。标签由包围它们的双括号或胡须指示。现在，让我们看一下render()方法的工作方式。

渲染胡子模板

以下代码显示mustache.js文件中render()函数的实现。可以将三个参数传递给render() 。前两个参数（ template和view是必需的。 partials可以视为动态模板，您可以将其注入到主模板中。在前面的示例中，我们将模板作为内联参数传递，将视图作为第二个参数传递，并将结果分配给output变量。

Writer.prototype.render = function (template, view, partials) {
  return this.compile(template)(view, partials);
};

这是模板化胡须的最基本形式。让我们看看其他可用于创建更有组织的代码的方法。

定义胡子模板

有多种方法可在您的应用程序中定义胡子模板。这些方法类似于使用内联样式，内联样式表和外部样式表的CSS。前面讨论的示例可以被视为内联方法，因为我们将模板直接传递给函数。此方法防止了可重用模板的可能性。让我们看看如何将模板定义为内联脚本模板，而不是直接传递给函数。

模板作为内联脚本

我们可以在<script>标记内定义模板数据，并将其包含在HTML文档中。为了防止浏览器执行模板代码，我们必须将MIME类型更改为text/javascript以外的其他类型。一些常见的MIME类型是text/html ， text/template和text/mustache 。以下示例是使用此方法的简单模板。

<script id="sample_template" type="text/html">
<h1>{{name}}</h1>
</script>

您可以根据需要在文档中包含任意数量的带有不同ID的模板。当您要使用模板时，请使用innerHTML获取script标记内的HTML，并将其作为模板传递。我们的第一个示例将更改为以下代码。

<script type='text/javascript'>
  var template = document.getElementById('sample_template').innerHTML;
  var output = Mustache.render(template, view);
  document.getElementById('person').innerHTML = output;
</script>

如您所见，模板是单独存储的，并在需要时动态使用。此方法增加了重用模板的可能性。但是，使用内联脚本会将模板的范围限制为单个页面。如果有多个页面，则必须再次定义模板。因此，将模板包含在外部文件中将是理想的解决方案-就像使用CSS一样。

模板作为外部HTML代码段

在这项技术中，我们将使用jQuery来实现模板。 jQuery提供了一个名为load()的函数，该函数可用于获取外部文档的一部分。我们将使用此方法从外部模板文件动态加载模板。 load()函数执行脚本而不是返回脚本，因此我们无法像先前方法那样在脚本标签内创建模板。以下示例显示了我们将要使用的外部模板文件。

<div id="template1" >
<h1>{{name}}</h1>
</div>

<div id="template2" >
<div>{{name}}</div>
</div>

<div id="template3" >
<p><span>{{name}}</span></p>
</div>

我们将<div>元素用于模板而不是脚本，以使其与jQuery的load()函数兼容。在这里，我们有三个具有不同ID的不同模板。现在，让我们继续在页面中使用这些模板。

<!doctype html>
<html lang="en">
  <head>
    <title>Mustache.js External Method</title>
    <script type="text/javascript" src="jquery.js" ></script>
    <script type="text/javascript" src="mustache.js" ></script>
    <script>
      $(document).ready(function(){
        var view = {
          name : "Joe",
          occupation : "Web Developer"
        };

        $("#templates").load("template.html #template1",function(){
          var template = document.getElementById('template1').innerHTML;
          var output = Mustache.render(template, view);
          $("#person").html(output);
        });
      });
    </script>
  </head>
  <body>
    <p id="person"></p>
    <div id="templates" style="display: none;"></div>
  </body>
</html>

jQuery将返回的文档插入HTML元素中，而不是将其分配给变量。因此，我们需要一个虚拟容器来保存模板。我使用了默认情况下隐藏的templates容器。上面的示例检索template1并加载它。然后，我们可以从虚拟容器中获取模板，并将其传递给小胡子进行渲染。这就是外部方法的工作方式。我们还可以使用AJAX请求从服务器获取数据。