Appearance
最近项目一直在使用Mustache.js前端模版，那么使用过程中一些语法顺便聊下。
Mustache简介
Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。
语法
bash
{{keyName}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{<partials}}
{{{keyName}}}
{{!comments}}{{keyName}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{<partials}}
{{{keyName}}}
{{!comments}}Mustache用法
可以直接下载引用或者npm安装使用；这里使用引用介绍：
bash
<script type="text/javascript" src="mustache.js"></script>
var data = {
name: "Joe",
age:28
};
var tpl = '<div>My Name：{{Name}}，Age：{{age}}</div>';
var html = Mustache.render(tpl, data); //后面省略渲染步骤直接输出结果集
console.log(html); //My Name：Joe，Age：28;<script type="text/javascript" src="mustache.js"></script>
var data = {
name: "Joe",
age:28
};
var tpl = '<div>My Name：{{Name}}，Age：{{age}}</div>';
var html = Mustache.render(tpl, data); //后面省略渲染步骤直接输出结果集
console.log(html); //My Name：Joe，Age：28;其中花括号就是Mustache标识符号，花括号中的名字表示键名;
Mustache循环语句
以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染，例如：
bash
var data = {
"stooges": [
{ "name": "Moe" },
{ "name": "Larry" },
{ "name": "Curly" }
]
}var data = {
"stooges": [
{ "name": "Moe" },
{ "name": "Larry" },
{ "name": "Curly" }
]
}Template:
bash
{{#stooges}}
<b>{{name}}</b>
{{/stooges}}{{#stooges}}
<b>{{name}}</b>
{{/stooges}}输入结果：
bash
<b>Moe</b>
<b>Larry</b>
<b>Curly</b><b>Moe</b>
<b>Larry</b>
<b>Curly</b>bash
//{{^keyName}} {{/keyName}}
//该语法与{{#keyName}} {{/keyName}}类似，不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容。
var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}};
var html = Mustache.render(tpl, data);
//输出：
没找到 nothing 键名就会渲染这段//{{^keyName}} {{/keyName}}
//该语法与{{#keyName}} {{/keyName}}类似，不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容。
var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}};
var html = Mustache.render(tpl, data);
//输出：
没找到 nothing 键名就会渲染这段bash
//{{.}}语法 表示枚举；可以循环输出整个数组，例如：
var data = {
"musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}//{{.}}语法 表示枚举；可以循环输出整个数组，例如：
var data = {
"musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}Template:
bash
{{#musketeers}}
{{.}}
{{/musketeers}}{{#musketeers}}
{{.}}
{{/musketeers}}输入结果：
bash
Athos
Aramis
Porthos
D'ArtagnanAthos
Aramis
Porthos
D'Artagnan函数节变量
如果节变量的值是一个函数，它将在每次迭代的列表中的当前项的上下文中调用，例如：
bash
var data = {
"beatles": [
{ "firstName": "John", "lastName": "Lennon" },
{ "firstName": "Paul", "lastName": "McCartney" },
{ "firstName": "George", "lastName": "Harrison" },
{ "firstName": "Ringo", "lastName": "Starr" }
],
"name": function () {
return this.firstName + " " + this.lastName;
}
}var data = {
"beatles": [
{ "firstName": "John", "lastName": "Lennon" },
{ "firstName": "Paul", "lastName": "McCartney" },
{ "firstName": "George", "lastName": "Harrison" },
{ "firstName": "Ringo", "lastName": "Starr" }
],
"name": function () {
return this.firstName + " " + this.lastName;
}
}Template:
bash
{{#beatles}}
* {{name}}
{{/beatles}}{{#beatles}}
* {{name}}
{{/beatles}}输入结果：
bash
* John Lennon
* Paul McCartney
* George Harrison
* Ringo Starr* John Lennon
* Paul McCartney
* George Harrison
* Ringo Starr函数
如果一个节键的值是一个函数，它被称为节的文本块，未渲染，作为它的第一个参数。第二个参数是一个特殊的渲染函数，它使用当前视图作为视图参数。它在当前视图对象的上下文中调用。
bash
var data = {
"name": "Tater",
"bold": function () {
return function (text, render) {
return "<b>" + render(text) + "</b>";
}
}
}var data = {
"name": "Tater",
"bold": function () {
return function (text, render) {
return "<b>" + render(text) + "</b>";
}
}
}Template:
bash
{{#bold}}Hi {{name}}.{{/bold}}{{#bold}}Hi {{name}}.{{/bold}}输入结果：
bash
<b>Hi Tater.</b><b>Hi Tater.</b>bash
//倒置部分^ {{}} {{部分代替#节}}
//一个倒置的节块呈现只有这部分标签的值为空，不确定的，虚假的，falsy或空列表。
var data = {
"repos": []
}//倒置部分^ {{}} {{部分代替#节}}
//一个倒置的节块呈现只有这部分标签的值为空，不确定的，虚假的，falsy或空列表。
var data = {
"repos": []
}Template:
bash
{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}输入结果：
bash
No repos :(No repos :(bash
//{{>partials}}语法；
//以>开始表示子模块；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块，例如：
var data = {
"company": "Apple",
"address": {
"street": "1 Infinite Loop Cupertino</br>",
"city": "California ",
"state": "CA ",
"zip": "95014 "
},
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}//{{>partials}}语法；
//以>开始表示子模块；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块，例如：
var data = {
"company": "Apple",
"address": {
"street": "1 Infinite Loop Cupertino</br>",
"city": "California ",
"state": "CA ",
"zip": "95014 "
},
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}Template:
bash
var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>"
var partials = {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"}var tpl = "<h1>{{company}}</h1> <ul>{{>address}}</ul>"
var partials = {address: "{{#address}}<li>{{street}}</li><li>{{city}}</li><li>{{state}}</li><li>{{zip}}</li>{{/address}}"}输入结果：
bash
<h1>Apple</h1>
<ul>
<li>1 Infinite Loop Cupertino</br></li>
<li>California</li>
<li>CA</li>
<li>95014</li>
</ul><h1>Apple</h1>
<ul>
<li>1 Infinite Loop Cupertino</br></li>
<li>California</li>
<li>CA</li>
<li>95014</li>
</ul>bash
//{{{keyName}}} 语法
//输出会将等特殊字符转译，如果想保持内容原样输出可以使用花括号，例如：
var data = {
"company": "Apple",
"address": {
"street": "1 Infinite Loop Cupertino</br>",
"city": "California ",
"state": "CA ",
"zip": "95014 "
},
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}//{{{keyName}}} 语法
//输出会将等特殊字符转译，如果想保持内容原样输出可以使用花括号，例如：
var data = {
"company": "Apple",
"address": {
"street": "1 Infinite Loop Cupertino</br>",
"city": "California ",
"state": "CA ",
"zip": "95014 "
},
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}Template:
bash
var tpl = '{{#address}} <p>{{{street}}}</p> {{/address}}'var tpl = '{{#address}} <p>{{{street}}}</p> {{/address}}'输入结果：
bash
<p>1 Infinite Loop Cupertino</br></p><p>1 Infinite Loop Cupertino</br></p>bash
//{{!comments}}语法
表示注释，注释后不会渲染输出任何内容。
``` bash
{{!这里是注释}}
//输出：//{{!comments}}语法
表示注释，注释后不会渲染输出任何内容。
``` bash
{{!这里是注释}}
//输出：