Mustache（摸-思达士）

Mustache 是一款「logic-less（轻逻辑）」的前端模板引擎，它原本是基于 javascript 实现的，但是因为轻量易用，所以经过拓展目前支持更多的平台，如 java，.NET，PHP，C++ 等。Mustache 主要用在表现和数据分离的项目中，根据数据生成特定的动态内容，这些内容在网页中指的是HTML结构，而在小程序中则是WXML结构。
项目主页：http://mustache.github.io/

Mustache的模板语法很简单，就那么几个：

{{keyName}}
{{{keyName}}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{!comments}}
{{>partials}}

借助 Demo 来对语法做简单的介绍：

<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
 var data = {
     "name": " xiaohua ",
     "msg": {
         "sex": " female ", 
         "age": " 22 ", 
         "hobit": " reading "
     },
     "subject": ["Ch","En","Math","physics"] 
   }  
 
   var tpl = '<p> {{name}}</p>'; 
   var html = Mustache.render(tpl, data);
 
　　alert ( html );
</script>

1、{{keyName}}简单的变量替换。

2、{{#keyName}} {{/keyName}}以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染。它的功能很强大，有类似if、foreach的功能。

3、{{^keyName}} {{/keyName}}该语法与{{#keyName}} {{/keyName}}类似，不同在于它是当keyName值为null, undefined, false时才渲染输出该区块内容。

4、{{.}} {{.}}表示枚举，可以循环输出整个数组

5、{{! }}表示注释，注释后不会渲染输出任何内容。

 {{!这里是注释}}
 //输出：

6、{{>partials}}以>开始表示子模块，当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块。