摘要：簡(jiǎn)介是一個(gè)輕邏輯模板解析引擎，它的優(yōu)勢(shì)在于可以應(yīng)用在等多種編程語(yǔ)言中。這里主要是看中的應(yīng)用。

Mustache 是一個(gè) logic-less （輕邏輯）模板解析引擎，它的優(yōu)勢(shì)在于可以應(yīng)用在 Javascript、PHP、Python、Perl 等多種編程語(yǔ)言中。這里主要是看JavaScript中的應(yīng)用。Javascript 語(yǔ)言的模板引擎，目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等，

Mustache 的模板語(yǔ)法很簡(jiǎn)單，就那么幾個(gè)：

{{keyName}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{
下面看看mustache.js的使用，github地址： https://github.com/janl/musta...
使用方法
這里看看快速使用：
var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("
{{title}} spends {{calc}}
", view);
這個(gè)直觀的認(rèn)識(shí)就是：寫(xiě)一段字符串，可以是和html文檔一樣的字符串模板，然后按照mustache的書(shū)寫(xiě)規(guī)則將需要處理的數(shù)據(jù)對(duì)象通過(guò)渲染方法注入，形成一個(gè)需要的html文本，就可以是使用innerHTML或者$.html之類(lèi)的方法放到頁(yè)面中。
變量
mustache的模板就是一段字符串，里面編寫(xiě)了任意多的mustache tags，都是使用 {{key}} 來(lái)進(jìn)行占位，如果渲染數(shù)據(jù)沒(méi)有對(duì)應(yīng)的數(shù)據(jù)就會(huì)渲染為空，需要注意的是{{}}這樣書(shū)寫(xiě)是不會(huì)html轉(zhuǎn)譯的，渲染數(shù)據(jù)里面書(shū)寫(xiě)的html標(biāo)簽會(huì)被轉(zhuǎn)化為實(shí)體，可以使用{{{}}}或者{{&name}}，如果不想{{}}被mustache解析渲染的話可以使用  {{=<% %>=}}   {{key}}  <%={{ }}=%> 將忽略出包起來(lái)。
View:

{
  "name": "Chris",
  "company": "GitHub"
}
Template:

* {{name}}      //* Chris
* {{age}}       //* 
* {{company}}   //* GitHub
* {{{company}}}  //* GitHub
* {{&company}}  //* GitHub
{{=<% %>=}}
* {{company}}  //* {{company}}
<%={{ }}=%>
JavaScript"s dot notation may be used to access keys that are properties of objects in a view.
View:

{
  "name": {
    "first": "Michael",
    "last": "Jackson"
  },
  "age": "RIP"
}
Template:

* {{name.first}} {{name.last}}
* {{age}}
Output:

* Michael Jackson
* RIP
區(qū)塊
區(qū)塊內(nèi)的部分可能會(huì)被渲染一次或者多次，根據(jù)模板中的具體展示，區(qū)塊同樣是使用兩個(gè)tag標(biāo)志起始和結(jié)束，{{#key}}   {{/key}}
If the person key does not exist, or exists and has a value of null, undefined, false, 0, or NaN, or is an empty string or an empty list, the block will not be rendered.
也就是說(shuō)如果如果塊區(qū)的值對(duì)應(yīng)的是null、undefined、false、0、NaN、空字符串、空數(shù)組，這個(gè)塊區(qū)是不會(huì)渲染的，如果是數(shù)組就會(huì)如下：
View:

{
  "stooges": [
    { "name": "Moe" },
    { "name": "Larry" },
    { "name": "Curly" }
  ]
}
Template:

{{#stooges}}      //Moe
{{name}}   //Larry
{{/stooges}}      //Curly
如果塊區(qū)是要展示一個(gè)字符串?dāng)?shù)組，可以考慮使用{{.}}來(lái)完成循環(huán)渲染，
{{#musketeers}}
* {{.}}
{{/musketeers}}
塊區(qū)甚至可以直接使用function來(lái)進(jìn)行數(shù)據(jù)的處理
View:
{
  "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:
{{#beatles}}
* {{name}}
{{/beatles}}

Output:
* John Lennon
* Paul McCartney
* George Harrison
* Ringo Starr
還有塊區(qū)的key直接就是function的時(shí)候，這個(gè)看起來(lái)好高級(jí)，我也沒(méi)太明白，一般不會(huì)這么寫(xiě)吧。
If the value of a section key is a function, it is called with the section"s literal block of text, un-rendered, as its first argument. The second argument is a special rendering function that uses the current view as its view argument. It is called in the context of the current view object.

View:

{
  "name": "Tater",
  "bold": function () {
    return function (text, render) {
      return "" + render(text) + "";
    }
  }
}
Template:

{{#bold}}Hi {{name}}.{{/bold}}
Output:

Hi Tater.
反轉(zhuǎn)塊區(qū)
這個(gè)和塊區(qū)更像是一個(gè)組合，對(duì)應(yīng) if else這種情況，塊區(qū)實(shí)在key有內(nèi)容的時(shí)候來(lái)進(jìn)行渲染，反轉(zhuǎn)塊區(qū)恰恰相反，在沒(méi)有內(nèi)容的時(shí)候來(lái)進(jìn)行渲染，這也很符合web開(kāi)發(fā)的情景，
View:

{
  "repos": []
}
Template:

{{#repos}}{{name}}{{/repos}}
{{^repos}}No repos :({{/repos}}
Output:

No repos :(
其他 注釋、子模塊
Comments begin with a bang and are ignored. The following template:
 
Today{{! ignore me }}.

 Will render as follows:
 
Today.

{{!comment}} 這就是注釋了

子模塊就是當(dāng)渲染的數(shù)據(jù)比較的復(fù)雜的時(shí)候就可以考慮使用分割來(lái)進(jìn)行部分一快一塊的渲染，{{> block}}
這里需要注意渲染調(diào)用的方法和之前不一樣了，需要最后帶上block這個(gè)區(qū)塊的渲染內(nèi)容
For example, this template and partial:

base.mustache:
Names
{{#names}}
  {{> user}}
{{/names}}

user.mustache:
{{name}}
Can be thought of as a single, expanded template:

Names
{{#names}}
  {{name}}
{{/names}}
In mustache.js an object of partials may be passed as the third argument to Mustache.render. The object should be keyed by the name of the partial, and its value should be the partial text.

Mustache.render(template, view, {
  user: userTemplate
});
參考：https://github.com/janl/musta...
http://www.iinterest.net/2012...