Mustache学习

Mustache是基于JavaScript的一款模版Web引擎,Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，通常是标准的 HTML 文档。

一、Mustache简介

Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。

二、Mustache语法

1、{{keyName}}

2、{{#keyName}} {{/keyName}}

3、{{^keyName}} {{/keyName}}

4、{{.}}

5、{{<partials}}

6、{{{keyName}}}

7、{{!comments}}

三、demo介绍

1、{{keyName}}

var data={
        name:"张三",
        age:,
        sex:"girl"
}
var template="My name is {{name}},I'm {{age}} years old,I'm a {{sex}} ！";
var view=Mustache.render(template,data);
document.getElementsByTagName("body")[].innerHTML=view;

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUQAAAAyCAIAAACrhDX5AAAEzklEQVR4nO2b3bGkOAyFiYuAiIc4JgCeNocNgAw2g3liH2iwJEtCTZsCVOcrV03TgLGPdPxD3+nm//6ioKAkKN3tLUBBQWlSYGYUlCSl+/PPvygoKAlKtwAAUgAzA5AEmBmAJMDMACQBZgYgCTAzAEmAmQFIAswMQBJgZgCSADMDkASYGYAkwMwAJAFmDjGPfTdM8ivxDQC34ph5Hvuu67p+nOWZaTBOPJNp6KQTHT7d3hmmpTbzNHRdN4zzrN5iYCjZjzP5cBLWBF6Rc+r52LFTFWum5484KRfMxnnsv8naZVkiZtYVe2FenGD3MDXzqkubWblN8q0t+tz+Cdunfc6pV/BSMzvcaOZhGKQo09ANw2O1akpl5nUca+eGPeeUdfxXrWQ3ly+cU+/grJl/0fNa7jTzNAk3T0PXjyMdAckjNQ3XSz7TubBC+ZZ+X55MFodktVhlp7+G5G3ka2JFLrFoJmaex77xEFYychrWf7/pe6Da0CkniI68euxKflDtXMGr6siDWNNITSQF9d79qqfRO7fVI3l6uUsIEt30fbc5XJYlYuaFu3k9mtRm6+Mh22HPY79/prfS78VufVOeLhzpZ3aXlsLkOWK8W7e+6uBTa3HFQF9bK9z3g1qd+UwPkRJER14zdusT9qOI4PJ7elCeU1/imnnjlJ527w5abZiZVnCvmVkif5xNRBNWqbvNBS768UHC9Kh+uNVQrRoUAci3EYWUdpn8Ok8byRfou1+nl32B8a5kpCGvHTtxVyglq7yp54qq43pX2ujp9E7WbDRJmtlaazhcY2bq5q2btIH7U41VqGiV1shtsaIPmNahETl33jne9KqTMN0zazcH3mer9jrsgn+oV2hc4XZdCWJQXhE7LdwHWVlXy8drXXh/z2xVfk7Pw+lbPl2m3EH+W0++wMwlv/chi4lGBD8Y9fkh27lUM3PMzAr+IlIYr5ZL+LLsvLgUbWibfGfmZHoBD6Irrxk7JQkPBNc6tVfy+WBccpWZ7d4dtvrxZt5SeB57Emi2llr30ebso3TGkfX0zKxjynKU4Xz3WD61ewnWzsxr/qktc07xpvAgOvJ6rfKSUBf8aTNzUPOLZ+YTxMy8JvPIltti59H3VpIbndGWY9+ZOaqLc5lfg2bmtnZuOpM4Jg+oVAfRFseJ3YGk6tkze2b9vVQTPb3e2TWzJj3azNuaix5Wb4lCvwzp4ZnY28lwAEREjZlWvAATLyMcX5Zpimw0+nGOvIaK0W4m0bvhnNKvZReb8jqxE+EOCl4NBzRgSqzFM1k9bWdm60l6q9uZ+ZvIbUTNLMYnKZo3W0X2zNsbciVXDg75FtdcTfP0EjtiRwBqZvqXMtZwHYF0oEXyGS/fev57qjzl99eoXDREi12drEHByWXWu1/20PKjbmM93d45rV5/zC7teJSZv6Hspt+PllWT8k72kziGYXTK2HDRSusX3hvEh+h54Qo6RBszvzcNYrTu3/bnSY/ixUG8RU85q0ffx17Hz2aOvSoFlMd5+eVBvE1P/uvd7YsD/H9mAJIAMwOQBJgZgCTAzAAkAWYGIAkwMwBJgJkBSALMDEASYGYAkgAzA5AEmBmAJMDMACQBZgYgCTAzAEmAmQFIAswMQBJgZgCSADMDkIT/AaqtvCEJWgl+AAAAAElFTkSuQmCC" alt="" />

分析:{{keyName}}中的{{}}就是Mustache的标识符,keyName就是data对象中的键名，这句的作用是直接输出与键名匹配的键值！

2、{{#keyName}} {{/keyName}} 有两种用法:

第一种:

以"#"开始,"/"结束,被它们所包围的标签为进行循环多次渲染,keyName为需要循环渲染的数组名,代码如下:

注意:这里的keyName表示需要表示需要循环渲染到html模版中的数组的数组名,

var obj={
    result:[
    {name:null,age:22,sex:"女"},
    {name:"李四",age:22,sex:"男"},
    {name:"王五",age:22,sex:"男"}]
};
var template="<table>"
            +"<thead><tr><td>姓名</td><td>年龄</td><td>性别</td></tr></thead>"
            +"<tbody>" +
            "{{#result}}" +
            "<tr>" +
            "<td>{{name}}</td>" +
            "<td>{{age}}</td>" +
            "<td>{{sex}}</td>" +
            "{{/name}}</tr>" +
           "{{/result}}" +
            "</tbody>"
            +"</table>";
var view=Mustache.render(template,obj);
document.getElementsByTagName("body")[0].innerHTML=view;

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAABzCAIAAADfWp0rAAAFPklEQVR4nO2d0aGkIAxFqcuCqMdqaMZiZj9UBElCcIQw++792n2OAjkEGLk67gOZyllX4K8LAIwFAMYCAGMBgLEAwFgAYCwAMBYAGAsAjAUAxlIC2NbFLetGH/BBOjV4R58qKnhXuW55wr2Uet3YzxBXU4qNFCM9gPyqZ4AqjdzW5Un4G1pxhooIWfCuSjGvfyyXBhC8K3X7XCcAwectifWWAGzrQlSYq7n+xOz0BMCpoz7BO7/WkuAoar/Y1RgWQP7XK9rx0OsACurLuvERyjsT0/9qaXGnLY4IXAacOVvkblaNxfvF+bDns8CdwTICwFlOWoWk25MZsLdkWbcylgKXQ1Sw2wEkBXNJGryLKbKta0iv0DwE9QUQW7O3JZ0gidYlh7ctJL19r391ytbkflIUFZLV7x36OIkMyl7zbCy9PjPREJSVG/zeuiuKipXGldn1igUvjnBFx+PKK4aMop5HoM6/345LqyDyWE8AV096sNQ7+2jTkrK4KBuP+MmdnDQSKYuqFMgd6wog+H0YiYXQmZ/FWdGJ+ci0A4idpHUBfxUl1TgOUuzBvnNALL28ctmDdjr5VC20W3W0CiB4F2f9fZBUDlntGZCdEee7QQDKhgiRfACATy1KEXKyNvD0GupBRWrLrvw/nQHEq27rkjfmXQCcxAy4jxFHIiR/q3xVbwGQwySi3WcSbu5BlUOvAqAHq5iyL07Cxb0NIrcaW1YHwA3y0nR1nSnpzQygR3tu4iKaVxv89onlxja5eHp+04qv4+3oERlQ/2RlSGjtsK8L+wHGAgBjAYCxAMBYAGAsADAWABgLAIwFAMYCAGMBQFSzF+wVTQggu8FW3thhDn0tm/hPByC7gXnEO3HAMIdekFH8ZwNAbvgwWyu1vZYmWcV/NgClBG/vM9vvIZX98dnuRZNmByAYbDXeW53oPYPnDukWzQ0gmh2aDj0pxSr+MwMQnIwak6NWzFQyalKYFcCYvv/hhp9Wb8NzzQhA2EtXbLM/Keve2QeuiaYDUHuuoFNgDlfD6dMdtySdDIDw7EbtsY5XFH2VXUtJNRcAZnEuWNZfnQvyov7uHDBUnOl1VDb8WQBn4GsB/urrtkJ/FsAsAgBjAYCxAMBYAGAsADAWABgLAIwFAMYCAGM9BGD+aNV/oy4AtI4DxZOPfY1Zqor2vR2nAaB2cJCvJkl2l+iHzImyRhmzyHeo6F6S8JYeZMC2Lm5ZFrcs0ruoUgDJw7QVAIONWT8HIO5KHRVldqmeAyjVy5gVK/oDQ9DnU+xOpCEuN8pfBNDXmPUTGaD04KSD8h3P+e9mAL3NKT8B4JSUrsI7bNhX4VWbNsCY9UNDECN63zR/DRUTcxnAGGNW/evMRBlwl+AdYKfopMeRr1ZKPzXGmEXVe6jqAJp83Nf7XLyvrFGYvjXOmKVv2Iyb8qJ5T9WT+O8BRsYs3iXaMyvmAmBnzGLx9raJdgNgndp6iQas3ragVgDJm7m+fQ3VoAcgxAo4R0wqt+7TuZLYDzAWABgLAIwFAMYCAGMBgLEAwFgAYCwAMBYAGAsAjKX9GSuVxJ9aUd+MgzFLIf1N2sb76TBm6aQH0NYCGLOUUgP4ekMJxixSagDf9iAYs2iJADRztnr8gjHrrMejVGV33hUAYMwSpByC6FBrAMCYJUsJgH8GQDoZxqy6dACYBonthDFLJR0Awfwm/PoejFkKqQBwdefbBGMWoUZvKPVTsjbJrdVPGbP+J8GYBX0AwFwAYCwAMBYAGAsAjAUAxgIAYwGAsQDAWABgLAAwFgAY6x8AEBpERNwPdgAAAABJRU5ErkJggg==" alt="" />

上面的代码对result数组进行了循环渲染,以{{#result}}开始,以{{/result}}结束,中间包裹着需要循环绑定数据的标签！

第二种:

{{#keyName}} {{/keyName}}还有第二种用法,当keyName表示键名的时候，代码如下:

注意：这里的keyName表示键名,并不表示需要循环的数组名

var obj={
    result:[
    {name:null,age:22,sex:"女"},
    {name:"李四",age:22,sex:"男"},
    {name:"王五",age:22,sex:"男"}]
};
var template="<table>"
            +"<thead><tr><td>姓名</td><td>年龄</td><td>性别</td></tr></thead>"
            +"<tbody>" +
            "{{#result}}" +
            "<tr>" +
            "<td>{{#name}}{{name}}</td>" +
            "<td>{{age}}</td>" +
            "<td>{{sex}}{{/name}}</td>" +
            "</tr>" +
           "{{/result}}" +
            "</tbody>"
            +"</table>";
var view=Mustache.render(template,obj);
document.getElementsByTagName("body")[0].innerHTML=view;

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJoAAABnCAIAAAB3kcyHAAAEwElEQVR4nO2dUYKrIAxFXRcLYj2uhs24GOeDiiBJCKhTTe/5eq9WxRyItIbOtAJDTN9uALgS6DQFdJoCOk0BnaaATlNApymg0xTQaQroNIVS5zK7yc0LvcEHadfgJ3pXkeCnxnHrHY5nabeNfQ9xNCVspP4Fvc6yjVu4GyFbZjcisyMmW+AJAcFPzT5Rtj+dl9YZ/FRzeN8rdAZfxiVFQdK5zI64fC4O+h2L3TOdG5/2BD/5uTVAP6eKB9svhtVZvrq7S5serrPqkW5e+HiXHZ0ZG60he+w7Yu7jRueWT6q8UjTDee8mH2KuEXoRI/l9Ote17rXZkCRHZ4yLm5fajGD5A6WuX2d2Yi6BBD+l4bvMc8iP0J1s36QzxSZGJp+mELHKNi9LyEZijEZz4qTJctmpqADPPg62z05kiGPLi7vG/h6zyXbNryL4GKvdiWL2uOew9mUGL+byalBw56uSY9XOT9i31w/bpZktue09OvdePvBhYBs/XR86qoOy0U3vjP1AyrnKUzVOyG17kc7gY8JMTaZzXGFNMcD4OPfrTF2u9wPjfiqpxSkdsxvfo3Nd13x2U79eeomuywkTebgrdQY/pblXvB0ok3P/6Cz2SPOEV+qswyJ4GdDJD3uK1GWyGZqn58UDDWlNpcv/vEpnauMyuzI01+rkEEfnMRt+Bmn2WuNrqx6dZdcg3D1epxiRB+ik03JKJxdOhapvDYlx33llF9PUyd0cpUnDvqfElaOTvktyN3zi8lppPt6QDz0lO3i+//ds3vmA7D9GZ/udjeT33cF0OXjeaQroNAV0mgI6TQGdpoBOU0CnKaDTFNBpCug0BXSaAjpNAZ2mgE5TDOo09lzJDLfoVK0xYR8sF3vXDy8be3dfxmArn4lGp9YOXaOcFWDQVVPEubLq9f3pvrBpFLKYWldD+EwGRucyu8k5NzknLebJdWYVGA2dZGkZU8TVqupSXsoP60xrv5ZtpQ65FmxcZ42w2ndsIfCxoT+XbNc1K4aO/82F1QVWF+oUltxqVuM2+MHRqVn3tZY3s6Ps7d/dOlNxe9cmPT+oc0NKTEJpPLtqshkooR8pu9ipazKdbBkOOfhDuY6HMSjrvHtcHhsqtOM3dGZLCKhN5EQpGw3kapL8XeRGRSH0Cd7/5Uhbp/pT5y53md3kfWPeyfT7eDr+NxWui7f+wt4zPkdHp7QqS9fL+c+dwpdFdwaWrpd/14h9lk5mwAgL7K/yy3YW8UIfx20635PE6OlctvEZzVTRqTNbKHV2Hc/X54zczzYcOuOLZOJ5pzGg0xTQaQroNAV0mgI6TQGdpoBOU0CnKaDTFNBpCu2vTasQfydU/RU8yqbHGRyd+sdGnc8LUTZ9itt19sUDZdPnuFvn6Yf5KJvu4W6dZ3s3yqa7uEOnZuakztQom+5B/0erhpISW9+l0Imy6X7uTba0OI1OlE0Pca9Ofg2ntDPKpoe5VScTHjFqKJs+w606hUJ34c8BoGx6nDt1cpHgI4Sy6ZNcvkaF+gtDz05jP1w2bQmUTYOHA52mgE5TQKcpoNMU0GkK6DQFdJoCOk0BnaaATlNApymg0xTQaQroNAV0mgI6TQGdpoBOU0CnKaDTFNBpCug0xR9zXdBVsxpnpgAAAABJRU5ErkJggg==" alt="" />

分析代码和提供的obj数据发现,result数组中的第一个对象的name属性值为空,当我们使用{{#name}}｛｛/name｝｝将<tr></tr>包围的时候,发现这个时候name为空的那一整行数据就被排除掉了,这了注意：根据{{#name}}｛｛/name｝｝放的位置的不同,会产生不同的效果！

3、{{^keyName}}{{/keyName}}  与{{#keyName}}{{/keyName}}第二种用法的作用相反,代码如下:

var obj={
    result:[
    {name:null,age:22,sex:"女"},
    {name:"李四",age:22,sex:"男"},
    {name:"王五",age:22,sex:"男"}]
};
var template="<table>"
            +"<thead><tr><td>姓名</td><td>年龄</td><td>性别</td></tr></thead>"
            +"<tbody>" +
            "{{#result}}" +
            "<tr>" +
            "<td>{{^name}}</td>" +
            "<td>{{age}}</td>" +
            "<td>{{sex}}</td>" +
            "</tr>{{/name}}" +
           "{{/result}}" +
            "</tbody>"
            +"</table>";
var view=Mustache.render(template,obj);
document.getElementsByTagName("body")[0].innerHTML=view;

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIIAAAA6CAIAAADz+BayAAADSElEQVR4nO2by7HDIAxFqcsFUQ/V0AzF5C3AGIwkPs8mdya6uwTz00GCGMV8VAAy3x6A6vNRDCBSDBBSDBBSDBBSDBBSDBAaxBDcYQ4X6ALrpareGrqqKG9Np922wr2X/tjYZ4jWBsVaStQ4hrrt00ydqQZ3rECYmMtpMMJw3pouy3r8uV8ag7em1e25VzF4W88nj17CENxBDJsb/3jFqnqB4VQaj7fGup5DpK5iY9dkWAz1t5fNc9FLGJoVcLjA26leWMxa7LnInbkYIzhvOP238eNqGIe1h7E++rZAn4GzD8PZWzmQwgVIb4jzOVxoLSrQSaJMPo+h6JhzWG9NdpfgnC9bmA5KOzDkOcUZldsnMceiOARfrPw4i+6GPhINiq4owzgbF3eqRJomjryKrtczcEGp6t3bOMfLlgOnkcvX+8PzVox5zSLk+muCSDPOZK7z+1u5dFIiy97HcK2qhUPhuV6nDp9No6xV8pORnxSbBrvqdMiVbcDgbQwsuSs6FlTWHljQvH3mMeSlMnvgv7qSRpzDFlu4Y2/IY2jbb1dTZFRv5GRzT2Lw1uQzQQybg0Fs3huqGnkf3IqhnY5gzwUMvJtRyqiLk4Olz1kLA+kdzeoPWzDktoM76ik9i4GT6A33qJGcoviu8zN/BkONlLD5m1v09GrqFD2KgQ5f2X0f3KKbtyOEn03OLKmLgQv+0mZ21ZT0pDfQuwC3oRHT64XDuOHcCBeNl/XnKbz5onuHN/Sf7ASJtcX7uPS+AUKKAUKKAUKKAUKKAUKKAUKKAUKKAUKKAUKKAUKKIWs6Q+1BAWKoXte1L4iYon/rmxTgMFQvRZPVi1wcpugBfZUCGgbyWom5wOnd6EzpuxTQMLQSMpHXkpSThhI0125HFoSOQUgHHskUHhN9J7Ge1T0vbAw54WKqaKWX71JAxiDkWo6kYY6K2WL2bhaoGPb4wYcLSGv5FetCxCDc5A9c8q/0dV/4289NcBh6/4t4yTwps+LMKt59eAXDIPwDpffnlEeUMz9f7aUVFgbmMC8k2z+6R9Rd/fresFVccu5ez/hZDKf5e2b+10/1Yf0sBiwpBggpBggpBggpBggpBggpBggpBggpBggpBgj9AedCrSJ1dcJlAAAAAElFTkSuQmCC" alt="" />

根据输出和分析上面的代码,发现{{^name}}{{/name}}再循环玩result对象数组后,只输出了name值为null的那一行值！

4、{{.}}    表示枚举，可以循环输出整个数组，例如：

var obj={
    result:["Macbook ","iPhone ","iPod ","iPad "]
};
var template="<div>{{#result}}<span>{{.}}</span>{{/result}}</div>";
var view=Mustache.render(template,obj);
document.getElementsByTagName("body")[0].innerHTML=view;

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPgAAAAhCAIAAAB7gvG7AAAC/klEQVR4nO2Y0WHEIAiGncuBnMdpXCbDXB9SL6CgaNKzrf/3dDlDQPijRPcCYAPc6gAA+AQQOtgCCB1sAYQOtgBCB1sAoYMtgNDBFkDoYAsgdLAFEDrYgobQj+idc87HoxxJQRmwcUTvXEhzxiIp9MNJgTg9Z1ByxcRu/ghD4Y0+uM7Nh92tpy/0OuzvvPwxoXcNUrgm9XmhV6G0wrv7rLXultATegihjDsFF8Kd6fxSodN/f6HQZzU0KfQfdLeErtBTKpSegvMx8unQva/QR94XyNj54HgNiKvJyBDL7ulR3IfYZl2X43oDU+ARsknpMYR0jVETmgRFBUPhdbJ00NRGVcVD7mwl1tytpy/0F1f6eUVTQ3N2RE/nyS+zUdH8FzYpkFSyC33oCud8trQYG0rLV/T3HSzAZgyiCTMvJjsZXitL9cWk0Mm/jRLb3K3HIPQjepYTH48iCWRibBlQtrGq2MToiL7aQIiGlaH8i78XnG5p5TeHx2eIoTSpXMlt0VB4ehhVW6j02qPZUEpsdbceg9Cp0vOU9TXAOT0L5YOZoVwnHoUydNp7sWNhPtrnDFUfUtn2YhBM6kzJaRkJrxFG/RbNnrrImSxKbHW3HovQL6W/X206HdKihVS+7tKc6//f/wgi0EV2pTm3DUnxyG7OF61ymIXOY1CELtAXeiM8PQxlZKp1KR0KJTa7W49J6FnpR/SkaSNN8TXX5r4m3HPyyIouNBCUnxH6xIpu8Dgs9Psrut0dvfxnK/q30iNrYeSDuOrbxNqjky+3+R79pb9djwi9F4NkIrfk98Ib6NGVr98Rd40SW92txyj0vAPXEpbu4id9/Crvr8oBQusIQR9ilVK+SB8ReicG0UQ6prjbSzSyVJ8RPbqiN0usuluPVeiC5IQe/X3yUXw48c60OkcvVUn62olzdEXqDwm9GYNmwpIgr++DQlfDKNzdOEfXHtgq8Z88Rwfg/wChgy2A0MEWQOhgCyB0sAUQOtgCCB1sAYQOtgBCB1sAoYMt+AIUw0ItDwE98AAAAABJRU5ErkJggg==" alt="" />

分析如上代码和输出发现:{{#result}}{{/result}}表示循环的目标是result数组，{{.}}则表示循环输出result中的每一项

5、{{keyName.keyName}}

var data={
    company:["Microsoft"],
    adress:{
        province:"浙江",
        city:"湖州",
        county:"安吉",
        town:"报福",
        village:"统里"
    }
}
var template="<h1>{{company}}</h1><ul>" +
        "<li>{{adress.province}}</li>" +
        "<li>{{adress.city}}</li>" +
        "<li>{{adress.county}}</li>" +
        "<li>{{adress.town}}</li>" +
        "<li>{{adress.village}}</li>" +
        "</ul>";
var view=Mustache.render(template,data);
document.getElementsByTagName("body")[0].innerHTML=view;

aaarticlea/png;base64,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" alt="" />