Mustache 是一款經(jīng)典的前端模板引擎赠尾，在前后端分離的技術(shù)架構(gòu)下面，前端模板引擎是一種可以被考慮的技術(shù)選型，隨著重型框架（AngularJS赔癌、ReactJS、Vue）的流行澜沟，前端的模板技術(shù)已經(jīng)成為了某種形式上的標(biāo)配灾票，Mustache 的價(jià)值在于其穩(wěn)定和經(jīng)典：
主頁：https://github.com/janl/mustache.js/
文檔：https://mustache.github.io/mustache.5.html
Mustache 在使用的時(shí)候，會在頁面上出現(xiàn) {{person}} 這樣的標(biāo)簽茫虽，載入的時(shí)候回顯示出來刊苍，然后立即被替換掉，這個(gè)對于頁面的呈現(xiàn)是不夠友好的，這是我在使用的過程中遇到的一個(gè)痛點(diǎn)。
Mustache 功能非常經(jīng)典速缨，這里就能全部羅列出來：
變量
{{person}}
帶有HTML的變量
{{{person}}}
循環(huán)
{{#persons}}
......
{{/persons}}
數(shù)組循環(huán)的時(shí)候可以用.作為下標(biāo)
{
"musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
}
{{#musketeers}}
{{.}}
{{/musketeers}}
對象
正常使用：
{
"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)的語法是一樣的螟蝙，取決于變量是否是一個(gè)數(shù)組
{{#person}}
......
{{/person}}
數(shù)組的布爾判斷
當(dāng)一個(gè)數(shù)組沒有任何值的時(shí)候，可能會希望不做任何的顯示感猛，所以需要這個(gè)判斷
{{#persons.length}}
......
{{/persons.length}}
Lambdas
遇到和前面的循環(huán)和布爾表達(dá)式一樣，取決于參數(shù)的類型
{{#person}}
{{name}} is awesome.
{{/person}}
{
"name": "Willy",
"person": function() {
return function(text, render) {
return "" + render(text) + ""
}
}
}
輸出
Willy is awesome.
注釋
這玩意兒有啥用呢？
{{! ignore me }}
Trick
在做的循環(huán)輸出的時(shí)候主经，需要使用類似這樣的形式（感覺這就是BUG啊，或者是HTML標(biāo)準(zhǔn)的問題绰上？）：
{{name}}
{{age}}
兩個(gè)核心方法
Mustache.parse(template);
Mustache.render(template, obj);
因?yàn)閯討B(tài)載入到 HTML 上的事件或者元素會丟失旨怠，所以我封裝了一個(gè)對模板的緩存：
$(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);
};
})
順便簡單學(xué)習(xí)了一下 Handlebars，這款也非常的知名蜈块，并且是基于 Mustache 的模板引擎：
Handlebars：http://handlebarsjs.com/
