# JavaScript Mustache 教程
> 原文： [http://zetcode.com/javascript/mustache/](http://zetcode.com/javascript/mustache/)
在 JavaScript Mustache 教程中，我们展示了如何使用 Mustache 模板引擎。
## Mustache
Mustache 是一个简单的 Web 模板系统。 它可用于许多编程语言，包括 JavaScript 和 Java。 Mustache 被描述为一种无逻辑的模板引擎，因为它没有任何明确的控制流语句，例如`if`和`else`条件语句或`for`循环。 可以使用节标记处理列表和 lambda 来实现循环和条件评估。
JSON（JavaScript 对象表示法）是一种轻量级的数据交换格式。 人类很容易读写，机器也很容易解析和生成。 `application/json`是 JSON 的官方 Internet 媒体类型。 JSON 文件扩展名是`.json`。
jQuery 是一个 JavaScript 库，用于处理 DOM。 使用 jQuery，我们可以查找，选择，遍历和操作 HTML 文档的各个部分。
```js
```
Mustache 是一个 JavaScript 库，可以从 CDN（内容交付网络）引用。
## Mustache 基本模板示例
在第一个示例中，我们有一个基本的模板示例。
`basic.html`
```js
JavaScript Mustache template
```
单击该按钮，我们会在页面上写一条消息。
```js
```
在示例中，我们使用 JQuery 和 Mustache JavaScript 库。
```js
$("#btn").on('click', function() {
...
}
```
我们创建一个对按钮单击事件做出反应的处理程序。
```js
var data = { name: "Jonathan" };
```
这是数据。
```js
var template = "Hello {{ name }}";
```
这是 Moustache 模板。 `{{ name }}`是一个 Moustache 标签，已被数据值替换。
```js
var text = Mustache.render(template, data);
```
最终输出使用`Mustache.render()`功能渲染。 模板引擎将模板与数据连接起来以生成输出。
```js
$("#mypanel").html(text);
```
呈现的文本将被写入面板元素。
## Mustache 使用模板标签
在第二个示例中，我们使用模板标记。 当前使用的是`
```
在此示例中，我们向`time.jsontest.com`发送请求，该请求返回具有三个属性的 JSON 响应：`time`，`date`和`milliseconds_since_epoch`（Unix 时间）。
```js
```
我们在`