微信小程序技術分析：Mustache語法要點總結

小程序開發的wxml裏，用到了Mustache語法。因此，很是有必要把Mustache研究下。 什麼是Mustache?Mustache是一個logic-less（輕邏輯）模板解析引擎，它是爲了使用戶界面與業務數據（內容）分離而產生的，它能夠生成特定格式的文檔，一般是標準的HTML文檔。好比小程序的wxml中的代碼： {{userInfo.nickName}}，這裏的{{ }}就是Mustache的語法。 一、Mustache的模板語法很簡單，就那麼幾個： {{keyName}} {{{keyName}}} {{#keyName}} {{/keyName}} {{^keyName}} {{/keyName}} {{.}} {{!comments}} {{>partials}}   一、{{keyName}} ⑴ 簡單的變量替換：{{name}} var data = { "name": "weChat" }; Mustache.render（"{{name}} is excellent."，data）; 返回 weChat is excellent. ⑵ 變量含有html的代碼，如： 、等而不想轉義，能夠在用{{&name}} var data = {              "name" : " weChat "          }; var output = Mustache.render("{{&name}} is excellent.", data); console.log(output); 返回： weChat is excellent.   去掉"&"的返回是轉義爲： weChat is excellent. 另外，你也能夠用{{{ }}}代替{{&}}。   ⑶ 如果對象，還能聲明其屬性 var data = {               "name" : {               "first" : "Chen"，               "last" : "Jackson"               }，               "age" : 18          }; var output = Mustache.render(            "name:{{name.first}} {{name.last}}，age:{{age}}", data); console.log(output);   返回：name:Chen Jackson，age:18   二、{{#keyName}} {{/keyName}} 以#開始、以/結束表示區塊，它會根據當前上下文中的鍵值來對區塊進行一次或屢次渲染。它的功能很強大，有相似if、foreach的功能。 var data = {               "stooges" : [ {                   "name" : "Moe"               }， {                   "name" : "Larry"               }， {                   "name" : "Curly"               } ]           };   var output = Mustache.render("{{＃stooges}}{{name}}{{/stooges}}"，                  data); console.log(output); 返回：Moe       Larry       Curly   三、{{^keyName}} {{/keyName}} 該語法與{{#keyName}} {{/keyName}}相似，不一樣在於它是當keyName值爲null, undefined, false時才渲染輸出該區塊內容。好比： var data = {              "name" : " weChat "          };     var tpl = ‘{{^nothing}}沒找到 nothing 鍵名就會渲染這段{{/nothing}}’;     var output = Mustache.render(tpl, data); 返回：沒找到 nothing 鍵名就會渲染這段   四、{{.}}     {{.}}表示枚舉，能夠循環輸出整個數組，例如：     var data = {     "product": ["Macbook ","iPhone ","iPod ","iPad "]     }     var tpl = '{{#product}} {{.}} {{/product}}';       var html = Mustache.render(tpl, data); 返回： Macbook iPhone iPod iPad   五、{{!  }}表示註釋 六、{{>partials}} 以>開始表示子模塊，當結構比較複雜時，咱們可使用該語法將複雜的結構拆分紅幾個小的子模塊。