微信小程序介绍

微信小程序设计指南

微信小程序开发简介

微信小程序开发框架

微信小程序框架视图层

微信小程序框架组件

微信小程序框架 API

微信开发者工具

模板解析引擎 Mustache

概述

什么是Mustache

Mustache是一个logic-less（轻逻辑）模板解析引擎，其作用是实现用户界面与业务数据（内容）的分离。

Mustache的基本原理就是根据特定语法，按照用户定义的模板将业务数据转换为特定格式的文档，通常是转换为标准的HTML文档。

如何使用Mustache

Mustache的使用非常简单，首先通过 script 标签引入它的 js 文件，然后依次定义模板、预编译模板、渲染模板来将业务数据转换为特定的格式，最后将数据填充页面元素。

1）引入mustache.js

就像jQuery一样，Mustache也是一个 js 文件，你只需引用这个 js 文件，就可以使用Mustache了，就这么简单。

你可以从 Github 上，将mustache.js 文件下载到本地使用。如：

<script src="../js/mustache.js"></script>

如果不想下载，从某个CDN引用它也是不错的选择。如：

<script src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.js"></script>

2）定义模板

可以有多种方式定义Mustache的模板字符串，最简单的方式，就是直接将字符串作为模板。如，以下代码定义了一个模板，并保存在 template 变量中：

var template = "Welcome to {{name}}.";

3）预编译模板

模板定义好之后，可以通过以下代码来预编译模板：

Mustache.parse(template);

这一步是可选的，你也可以不进行预编译。如果执行预编译，那么预编译之后的 template 就不再是原来的字符串了，就连它的数据类型都已经变成数组类型了，这就是预编译的结果。

并且，编译模板需要耗费时间。但是，一旦预编译好一个模板之后，会大大提升将来使用模板时的效率。因此，对于使用频率比较高的模板，这点开销还是值得的。

4）渲染模板

渲染，就是将业务数据转换为特定格式的文档。渲染形式单一，非常容易理解。只需调用Mustache.render()方法即可完成。代码如下：

var out = Mustache.render(template, data);

Mustache.render() 方法需要两个参数：一个是模板，一个是数据源对象。简单的讲，渲染就是对模板进行变量替换，它的返回结果，就是替换完成后的 HTML 代码。

5）填充页面元素

渲染只是按照模板要求，得到替换完成后的 HTML 代码，它并没有在页面上体现出来。只有将业务数据填充到指定的元素中，才能看到渲染后的实际效果。

假如页面上有一个 id="target" 的元素 <div id="target"></div>，使用以下代码，可以将业务数据填充到该元素中。

$('#target').html(out);

至此，一个完整的Mustache实例就完成了。以上实例的完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title> mustache </title>
  <script src="../js/jquery.js"></script>
  <script src="../js/mustache.js"></script>
</head>
<body>
<script>
// template 
var template = "Welcome to {{name}}";
// data
var data = { "name": "waibo.wang" };
// 渲染
var out = Mustache.render(template, data);
//将返回的内容添加到页面 
$(function(){
  $('#target').html(out);
});
</script>
<div id="target"></div>
</body>
</html>

在浏览器中的运行，就可以在浏览器的正文中看到 Welcome to waibo.wang。

需要注意的是，必须在页面准备就绪后，才能将业务数据填充到该元素中，否则会填充失败，看不到任何效果。