Mustache 是一款經(jīng)典的前端模板引擎，在前后端分離的技術(shù)架構(gòu)下面，前端模板引擎是一種可以被考慮的技術(shù)選型，隨著重型框架（AngularJS、ReactJS、Vue）的流行，前端的模板技術(shù)已經(jīng)成為了某種形式上的標(biāo)配，Mustache 的價(jià)值在于其穩(wěn)定和經(jīng)典：
主頁(yè)：https://github.com/janl/mustache.js/
文檔：https://mustache.github.io/mustache.5.html

Mustache 在使用的時(shí)候，會(huì)在頁(yè)面上出現(xiàn) {{person}} 這樣的標(biāo)簽，載入的時(shí)候回顯示出來(lái)，然后立即被替換掉，這個(gè)對(duì)于頁(yè)面的呈現(xiàn)是不夠友好的，這是我在使用的過(guò)程中遇到的一個(gè)痛點(diǎn)。

Mustache 功能非常經(jīng)典，這里就能全部羅列出來(lái)：

變量

{{person}}

帶有HTML的變量

{{{person}}}

循環(huán)

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

數(shù)組循環(huán)的時(shí)候可以用.作為下標(biāo)
{ "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"] }
{{#musketeers}}
{{.}}
{{/musketeers}}

對(duì)象

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

循環(huán)使用：
{ "stooges": [ { "name": "Moe" }, { "name": "Larry" }, { "name": "Curly" } ] }
{{#stooges}}
{{name}}
{{/stooges}}

if else

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

布爾判斷

和前面循環(huán)的語(yǔ)法是一樣的，取決于變量是否是一個(gè)數(shù)組
{{#person}}
......
{{/person}}

數(shù)組的布爾判斷

當(dāng)一個(gè)數(shù)組沒(méi)有任何值的時(shí)候，可能會(huì)希望不做任何的顯示，所以需要這個(gè)判斷
{{#persons.length}}
......
{{/persons.length}}

Lambdas

遇到和前面的循環(huán)和布爾表達(dá)式一樣，取決于參數(shù)的類型
{{#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>的循環(huán)輸出的時(shí)候，需要使用類似這樣的形式（感覺(jué)這就是BUG啊，或者是HTML標(biāo)準(zhǔn)的問(wèn)題？）：
``
<tr> <td>{{name}}</td> <td>{{age}}</td> </tr>

兩個(gè)核心方法

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

因?yàn)閯?dòng)態(tài)載入到 HTML 上的事件或者元素會(huì)丟失，所以我封裝了一個(gè)對(duì)模板的緩存：

$(templateKey).each(function(i){
    templateExist = false;
    $(templateArray).each(function(index){
        if (templateArray[index][0] == templateKey+i)
        {
            templateExist = true;
            template = templateArray[index][1];
        }
     })
        
    if (templateExist != true)
    {
        template = $(this).html();
        templateArray.push([templateKey+i, template]);
    }

    Mustache.parse(template);
    $(this).html(Mustache.render(template, item.data)).show();
    if (callbackFunction)
    {
        callbackFunction(item.data);
    };
})

順便簡(jiǎn)單學(xué)習(xí)了一下 Handlebars，這款也非常的知名，并且是基于 Mustache 的模板引擎：
Handlebars：http://handlebarsjs.com/

如果你希望像傳統(tǒng)模板引擎一樣可以有函數(shù)和參數(shù)處理等等的功能，那么 Mustache 就不是好的選擇，但是再?gòu)?fù)雜了往上走的話，就不如選用 Vue 了