摘要：一個(gè)返回值渲染后的例那年那夏我是，年齡結(jié)果我是那年那夏，年齡的思想的核心是標(biāo)簽和。從上面的代碼中可以看到定義模板時(shí)，使用了這樣的標(biāo)記，這就是的標(biāo)簽，只不過(guò)它用替代了，以免跟標(biāo)簽的混淆。

Mustache學(xué)習(xí)筆記

Mustache 是一款基于javascript 實(shí)現(xiàn)的模板引擎,類(lèi)似于 Microsoft’s jQuery template plugin,但更簡(jiǎn)單易用，在前后端分離的技術(shù)架構(gòu)下面，前端模板引擎是一種可以被考慮的技術(shù)選型，隨著重型框架（AngularJS、ReactJS、Vue）的流行，前端的模板技術(shù)已經(jīng)成為了某種形式上的標(biāo)配，Mustache 的價(jià)值在于其穩(wěn)定和經(jīng)典：

主頁(yè)：https://github.com/janl/musta...

文檔：https://mustache.github.io/mu...

1.出現(xiàn)的問(wèn)題
在使用中會(huì)有可能在頁(yè)面渲染時(shí)會(huì)出現(xiàn){{xxx}}這種標(biāo)簽，雖然會(huì)被頁(yè)面立即替換掉，但是對(duì)于用戶呈現(xiàn)來(lái)講，依然不太友好

2.具體使用方式
從git hub上獲取相關(guān)的mustache.js文件，在頁(yè)面的head標(biāo)簽內(nèi)引用Jquery.js 和Mustache.js兩個(gè)腳本文件

簡(jiǎn)介
3.渲染
渲染形式單一：var view = Mustache.render(template,obj);

參數(shù)：一個(gè)是模板html，一個(gè)是數(shù)據(jù)源對(duì)象。

view：一個(gè)返回值（渲染后的html ）

例：

var obj={name:"那年那夏",age:"23"}

var template="我是{{name}}，年齡{{age}}"

var view = Mustache.render(template,obj);

$("body").html(view);

結(jié)果：我是那年那夏，年齡23

4.mustache的思想
mustache的核心是標(biāo)簽和logic-less。從上面的代碼中可以看到定義模板時(shí)，使用了{(lán){name}}這樣的標(biāo)記，這就是mustache的標(biāo)簽，只不過(guò)它用{{}}替代了<>，以免跟html標(biāo)簽的<>混淆。logic-less，可以翻譯為輕邏輯，因?yàn)樵诙x模板的時(shí)候不會(huì)用到if-else，不會(huì)有循環(huán)式的編碼，一切都用標(biāo)簽來(lái)解決，它的標(biāo)簽非常簡(jiǎn)單，但是能應(yīng)付所有場(chǎng)景，只要用以下幾個(gè)標(biāo)簽幾乎就能解決所有的問(wèn)題：

{{prop}}

{{{prop}}}

{{#prop}}{{/prop}}

{{^prop}}{{/prop}}

{{!prop}}

{{> prop}}

5.mustache標(biāo)簽介紹
1）{{person}}變量
如上面例子中可以直接使用

嵌套使用

var obj={ "name": { "first": "xx,", "last": "yy," }, "age": "23" }

var view={{name.first}} {{name.last}} {{age}}

輸出：xx,yy,23

2）{{{prop}}} 帶有HTML的變量
在{{prop}}中的html會(huì)直接轉(zhuǎn)義，如果不想轉(zhuǎn)義則使用{{{name}}}或{{&name}}

如：var obj={name:"那年那夏",age:"23"}

var template="我是{{{name}}}，年齡{{age}}"

var view = Mustache.render(template,obj);

$("body").html(view);

結(jié)果：我是那年那夏，年齡23

3){{#prop}}{{/prop}} 循環(huán)
1.遍歷數(shù)組

數(shù)組循環(huán)的時(shí)候可以用.作為下標(biāo)

var obj={ "arr": ["1", "2", "3", "4"] };

var template="{{#arr}} {{.}} {{/arr}}"

輸出：1234

2.遍歷對(duì)象

var obj={ "str": [ { "name": "xx，" }, { "name": "yy，" }, { "name": "zz" } ] };

var template="{{#str}} {{name}} {{/str}}"

輸出xx,yy,zz

3,False和空的list

在以上代碼塊中，如果str這個(gè)key存在，并且有一個(gè)值是false或者一個(gè)空的列表，包含在塊之間的元素不會(huì)做任何顯示的.同樣如果str是一個(gè)列表，如果它為空，標(biāo)簽內(nèi)部的內(nèi)容也是不會(huì)被顯示出來(lái)的.

如：var obj={ “str”: false } ;

var view="xxx{{#str}yyy{{/str}}}"

輸出xxx

4){{^prop}} {{/prop}}當(dāng) prop值為 null, undefined, false 時(shí)才渲染輸出該區(qū)塊內(nèi)容。
如：var obj={ “str”: false } ;

var view="xxx{{^str}yyy{{/str}}}"

輸出xxxyyy

5)判斷使用{{#prop}}{{/prop}}{{^prop}} {{/prop}}
if else

{{#prop}} ... {{/prop}}

{{^prop}} ... {{/prop}}

布爾判斷

當(dāng)對(duì)象沒(méi)有值時(shí)你可能不希望展示{{#prop}} ... {{/prop}}

數(shù)組的布爾判斷

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

Lambdas

當(dāng)Key的值是一個(gè)可以被調(diào)用的對(duì)象，譬如是一個(gè)函數(shù)或者一個(gè)lambda，該對(duì)象將會(huì)被調(diào)用并且傳遞標(biāo)簽包含的文本進(jìn)去

var obj={ "name": "Willy",

"prop": function(){

                 return function(text){      return "" + text + ""    }

           }

}

var view={{#prop}} {{name}} is xxx. {{/prop}}

輸出

我們看到prop是一個(gè)可以被調(diào)用的函數(shù)他當(dāng)標(biāo)簽使用的時(shí)候會(huì)被再次調(diào)用，并且包在其中的其他標(biāo)簽也會(huì)被轉(zhuǎn)義執(zhí)行，這個(gè)特性，可以用來(lái)做很多很多的事情.

6.{> prop}}Partials的使用
Partials 標(biāo)簽開(kāi)始是以一個(gè)大于號(hào)開(kāi)始,像這樣{{> box}}.

Partials在運(yùn)行期被渲染 (相對(duì)于編譯期渲染而言),因此可以使用它來(lái)做一些遞歸，可以避免無(wú)限的循環(huán).

例：

var tpl = "

{{namme}}

{{>msg}}

var partials = {msg: "{{#msg}}

var html = Mustache.render(tpl, data, partials);

//輸出：

xiaohua

female

22

reading

7){{!prop}} 注釋?zhuān)](méi)啥用

Today {{! ignore me }}

輸出

Today

8)核心方法
Mustache.parse(template);//預(yù)解析（可選步驟）

Mustache.render(template, obj);

模板既然有好處，也有壞處。就是編譯模板需要時(shí)間，所以在我們已知會(huì)使用某個(gè)模板的前提下，我們可以預(yù)先編譯好這個(gè)模板，以便后面的使用。

參考說(shuō)明：https://www.cnblogs.com/yaozh...