Mustache.js 是一个适用于 JavaScript 和 Node.js 的模板引擎库，它能够帮助开发者快速生成 HTML、XML、JSON 等格式的文本。
安装
要使用 Mustache.js，在你的项目中必须安装它。你可以通过 npm 命令来完成安装：
npm install mustache --save
通过这个命令，我们在当前项目下安装了 Mustache.js，并添加到了 package.json 的依赖列表中。
快速开始
接下来，我们将演示如何使用 Mustache.js 生成一些简单的 HTML 内容。首先，创建一个 HTML 文件并引入 Mustache.js 库：
<script src="node_modules/mustache/mustache.min.js"></script>
然后，我们定义一个简单的 Mustache 模板，该模板将渲染为 HTML：
<div>
<h1>{{title}}</h1>
<p>{{description}}</p>
</div>在这个例子中，我们有两个占位符 {{title}} 和 {{description}}，它们将会被真实数据替换。
现在，我们可以在 JavaScript 中获取该模板并使用 Mustache.js 渲染出 HTML：
var template = document.getElementById('template').innerHTML;
var data = {
title: 'Hello, World!',
description: 'This is a sample template rendered with Mustache.js.'
};
var html = Mustache.render(template, data);
document.getElementById('content').innerHTML = html;在这个例子中，我们首先通过 document.getElementById 获取了 Mustache 模板，并将其存储在一个变量 template 中。然后，我们定义了一个包含真实数据的对象 data，并使用 Mustache.js 的 render 方法将数据和模板结合起来。最后，我们将渲染出的 HTML 内容插入到页面上。
进阶使用
除了基本用法之外，Mustache.js 还提供了更多高级功能，以满足不同场景下的需求。
条件判断
有时候，我们需要根据数据的值来决定是否显示某些内容。在 Mustache.js 中，可以使用 {{#condition}} 和 {{/condition}} 标签实现条件判断：
{{#showTitle}}
<h1>{{title}}</h1>
{{/showTitle}}在这个例子中，只有当 showTitle 属性为真时，才会显示标题。
循环
在 Mustache.js 中，可以使用 {{#items}} 和 {{/items}} 标签实现循环输出：
<ul>
{{#items}}
<li>{{name}}</li>
{{/items}}
</ul>在这个例子中，将会遍历 items 数组并输出每个元素的 name 属性值。
自定义分隔符
默认情况下，Mustache.js 使用双大括号作为占位符标记。但是，在某些情况下，这会与其他模板引擎库发生冲突。在这种情况下，可以使用 Mustache.tags 方法自定义占位符标记：
Mustache.tags = ['<%', '%>'];
在这个例子中，我们将占位符标记改为了 <% 和 %>。
总结
Mustache.js 是一个简单易用、功能强大的模板引擎库，可以帮助开发者快速生成各种格式的文本。通过本文的介绍，你已经了解了 Mustache.js 的基本使用方法和一些高级功能。相信在实际开发中，你可以更加灵活地应用它，提高工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32445
