Mustache 是一款經典的前端模板引擎，在前後端分離的技術架構下面，前端模板引擎是一種可以被考慮的技術選型，隨著重型框架（AngularJS、ReactJS、Vue）的流行，前端的模板技術已經成為了某種形式上的標配

變量

{{person}}

帶有HTML的變量

{{{person}}}

循環

{{#persons}}
......
{{/persons}}

數組循環的時候可以用.作為下標
{ "musketeers": ["Athos", "Aramis", "Porthos", "D‘Artagnan"] }
{{#musketeers}}
{{.}}
{{/musketeers}}

對象

正常使用：
{ "name": { "first": "Michael", "last": "Jackson" }, "age": "RIP" }
{{name.first}} {{name.last}}
{{age}}

循環使用：
{ "stooges": [ { "name": "Moe" }, { "name": "Larry" }, { "name": "Curly" } ] }
{{#stooges}}
{{name}}
{{/stooges}}

if else

{{#person}}
......
{{/person}}
{{^person}}
......

布爾判斷

和前面循環的語法是一樣的，取決於變量是否是一個數組
{{#person}}
......
{{/person}}

數組的布爾判斷

當一個數組沒有任何值的時候，可能會希望不做任何的顯示，所以需要這個判斷
{{#persons.length}}
......
{{/persons.length}}

Lambdas

遇到和前面的循環和布爾表達式一樣，取決於參數的類型
{{#person}}
{{name}} is awesome.
{{/person}}

{ "name": "Willy", "person": function() { return function(text, render) { return "<b>" + render(text) + "</b>" } } }

輸出
<b>Willy is awesome.</b>

註釋

這玩意兒有啥用呢？
{{! ignore me }}

Trick

在做<tr></tr>的循環輸出的時候，需要使用類似這樣的形式（感覺這就是BUG啊，或者是HTML標準的問題？）：
``
<tr> <td>{{name}}</td> <td>{{age}}</td> </tr>

兩個核心方法

Mustache.parse(template);
Mustache.render(template, obj);

mustache語法