Mustache 使用心得總結
前言：
之前的一個項目里面就有用到這個前台的渲染模版，當時挺忙的也沒時間抽空總結一下，剛好上周項目里又用到這個輕量型的渲染模版，真心感覺很好用，因此就總結一下使用心得，算是一個入門級別的指引吧。
1. Mustache 概述
Mustache是基於JavaScript實現的模版引擎，類似於JQuery Template，但是這個模版更加的輕量級，語法更加的簡單易用，很容易上手。
2. Mustache 具體的使用
下面就具體講一下Mustache的使用。在開始講之前，需要先從git hub上獲取相關的mustache.js文件，獲取文件之后，新建一個解決方案，目錄如下：
然后就開始具體的使用，首先需要在頁面的head標簽內引用Jquery.js 和Mustache.js兩個腳本文件，主要有以下幾個方面（以下演示的方法均在head標簽中的script代碼塊中）：
2.1 簡單的對象綁定展示
l 代碼示例：
$(function () {
var user = { name: "Olive", age: 23, sex: "girl" };
var template = "My name is {{name}} ,I'm {{age}} ,Sex is {{sex}}";
var view = Mustache.render(template, user);
$("#user_info").html(view);
l 頁面呈現效果：
l 語法解釋：
i. Mustache的語法很簡單，用兩個大括號標記要綁定的字段即可，“{{}}”；
ii. 大括號內的字段名稱要和Mustache.render方法中的第二個參數中的對象的屬性名一致
iii. 主要的渲染方法為Mustache.render，該方法有兩個參數，第一個為要渲染的模版，也就是上例中的template，第二個就是數據源也就是上例中的user對象
2.2 對象數組循環渲染展示
l 代碼示例：
var users = { result: [{ name: "Only", age: 24, sex: "boy" },
{ name: "for", age: 24, sex: "boy" },
{ name: "Olive", age: 23, sex: "girl" }
]
};
var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{name}}</td><td>{{age}}</td><td>{{sex}}</td></tr>{{/result}}</table><div>";
var views = Mustache.render(template, users);
$("#users_info").html(views);
l 頁面呈現效果：
l 語法解釋：
i. 對於對象數據Mustache也有其特殊的語法：{{#}}{{/}}，如果所給定的數據源是一個對象數組，則可以使用該語法，很方便的用來循環展示。
ii. 其中{{#}}標記表示從該標記以后的內容全部都要循環展示
iii. {{/}}標記表示循環結束。這種情況多用於table行的展示。
2.3 判斷對象為null（false/undefined）展示
l 代碼示例：
var users = { result: [{ name: null, age: 24, sex: "boy" },
{ name: "for", age: 24, sex: "boy" },
{ name: "Olive", age: 23, sex: "girl" }
]
};
var template = "<div><table cellpadding=0 cellspacing=0 class='tb' ><tr><td>Name</td><td>Age</td><td>Sex</td></tr>{{#result}}<tr><td>{{#name}}{{name}}</td><td>{{age}}</td><td>{{sex}}{{/name}}</td></tr>{{/result}}</table><div>";
var views = Mustache.render(template, users);
$("#users_info1").html(views);
l 頁面呈現效果：
l 語法解釋：
i. 上邊我們有講到{{#}}{{/}}這樣的語法，除了上邊的循環遍歷之外，它還有另外的一層意思就是判空，如果{{#}}中的值為null或false或undefine則其標記內的內容則不展現
ii. 在代碼示例中，users對象中的第一個對象名為null，所以在展示時，該條用戶信息沒有被展示。
iii. 有了判空的方法當然還有與之相反的方法{{^}}，該方法表示的意思與{{#}}意思相反。
2.4 防止html轉義展示
l 代碼示例：
var user = { name: "<h1>Olive</h1>" };
var template = "my name is {{&name}}";
var view = Mustache.render(template, user);
$("#user_name").html(view);
l 頁面呈現效果：
如果不在{{}}中加&，則效果如下：
l 語法解釋：
i. 在某些時候，我們要綁定的數據源中可能會有一些html標記，如果單純的采用{{}}這種方式來綁定的話，默認的會將html標記轉義。為了解決防止綁定字段中的內容被轉移我們可以這樣做{{&}},這樣就可以防止轉義。
好了，今天就總結到這里了，希望能給大家一些幫助。