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

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

Mustache 的模板語法很簡單，就那么幾個：

{{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);
這個直觀的認識就是：寫一段字符串，可以是和html文檔一樣的字符串模板，然后按照mustache的書寫規(guī)則將需要處理的數(shù)據(jù)對象通過渲染方法注入，形成一個需要的html文本，就可以是使用innerHTML或者$.html之類的方法放到頁面中。
變量
mustache的模板就是一段字符串，里面編寫了任意多的mustache tags，都是使用 {{key}} 來進行占位，如果渲染數(shù)據(jù)沒有對應的數(shù)據(jù)就會渲染為空，需要注意的是{{}}這樣書寫是不會html轉(zhuǎn)譯的，渲染數(shù)據(jù)里面書寫的html標簽會被轉(zhuǎn)化為實體，可以使用{{{}}}或者{{&name}}，如果不想{{}}被mustache解析渲染的話可以使用  {{=<% %>=}}   {{key}}  <%={{ }}=%> 將忽略出包起來。
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)的部分可能會被渲染一次或者多次，根據(jù)模板中的具體展示，區(qū)塊同樣是使用兩個tag標志起始和結(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.
也就是說如果如果塊區(qū)的值對應的是null、undefined、false、0、NaN、空字符串、空數(shù)組，這個塊區(qū)是不會渲染的，如果是數(shù)組就會如下：
View:

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

{{#stooges}}      //Moe
{{name}}   //Larry
{{/stooges}}      //Curly
如果塊區(qū)是要展示一個字符串數(shù)組，可以考慮使用{{.}}來完成循環(huán)渲染，
{{#musketeers}}
* {{.}}
{{/musketeers}}
塊區(qū)甚至可以直接使用function來進行數(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的時候，這個看起來好高級，我也沒太明白，一般不會這么寫吧。
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ū)
這個和塊區(qū)更像是一個組合，對應 if else這種情況，塊區(qū)實在key有內(nèi)容的時候來進行渲染，反轉(zhuǎn)塊區(qū)恰恰相反，在沒有內(nèi)容的時候來進行渲染，這也很符合web開發(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}} 這就是注釋了

子模塊就是當渲染的數(shù)據(jù)比較的復雜的時候就可以考慮使用分割來進行部分一快一塊的渲染，{{> block}}
這里需要注意渲染調(diào)用的方法和之前不一樣了，需要最后帶上block這個區(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...