mustache：web模板引擎

mustache簡介

Mustache 是一個 logic-less （輕邏輯）模板解析引擎，它的優點在於能夠應用在 Javascript、PHP、Python、Perl 等多種編程語言中。這裏主要是看JavaScript中的應用。Javascript 語言的模板引擎，目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等，

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

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

下面看看mustache.js的使用，github地址： https://github.com/janl/musta...

使用方法

這裏看看快速使用：

var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("<p>{{title}} spends {{calc}}</p>", view);

這個直觀的認識就是：寫一段字符串，能夠是和html文檔同樣的字符串模板，而後按照mustache的書寫規則將須要處理的數據對象經過渲染方法注入，造成一個須要的html文本，就能夠是使用innerHTML或者$.html之類的方法放到頁面中。

變量

mustache的模板就是一段字符串，裏面編寫了任意多的mustache tags，都是使用 {{key}} 來進行佔位，若是渲染數據沒有對應的數據就會渲染爲空，須要注意的是{{}}這樣書寫是不會html轉譯的，渲染數據裏面書寫的html標籤會被轉化爲實體，可使用{{{}}}或者{{&name}}，若是不想{{}}被mustache解析渲染的話可使用 {{=<% %>=}} {{key}} <%={{ }}=%> 將忽略出包起來。

View:

{
  "name": "Chris",
  "company": "<b>GitHub</b>"
}
Template:

* {{name}}      //* Chris
* {{age}}       //* 
* {{company}}   //* &lt;b&gt;GitHub&lt;/b&gt;
* {{{company}}}  //* <b>GitHub</b>
* {{&company}}  //* <b>GitHub</b>
{{=<% %>=}}
* {{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

區塊

區塊內的部分可能會被渲染一次或者屢次，根據模板中的具體展現，區塊一樣是使用兩個tag標誌起始和結束，{{#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.
也就是說若是若是塊區的值對應的是null、undefined、false、0、NaN、空字符串、空數組，這個塊區是不會渲染的，若是是數組就會以下：

View:

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

{{#stooges}}      //<b>Moe</b>
<b>{{name}}</b>   //<b>Larry</b>
{{/stooges}}      //<b>Curly</b>

若是塊區是要展現一個字符串數組，能夠考慮使用{{.}}來完成循環渲染，

{{#musketeers}}
* {{.}}
{{/musketeers}}

塊區甚至能夠直接使用function來進行數據的處理

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

還有塊區的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 "<b>" + render(text) + "</b>";
    }
  }
}
Template:

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

<b>Hi Tater.</b>

反轉塊區

這個和塊區更像是一個組合，對應 if else這種狀況，塊區實在key有內容的時候來進行渲染，反轉塊區偏偏相反，在沒有內容的時候來進行渲染，這也很符合web開發的情景，

View:

{
  "repos": []
}
Template:

{{#repos}}<b>{{name}}</b>{{/repos}}
{{^repos}}No repos :({{/repos}}
Output:

No repos :(

其餘 註釋、子模塊

Comments begin with a bang and are ignored. The following template:
<h1>Today{{! ignore me }}.</h1>
Will render as follows:
<h1>Today.</h1>
{{!comment}} 這就是註釋了

子模塊就是當渲染的數據比較的複雜的時候就能夠考慮使用分割來進行部分一快一塊的渲染，{{> block}}
這裏須要注意渲染調用的方法和以前不同了，須要最後帶上block這個區塊的渲染內容

For example, this template and partial:

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

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

<h2>Names</h2>
{{#names}}
  <strong>{{name}}</strong>
{{/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...