在Javascript中 mustache.js是實現mustache模板系統。
Mustache是一種沒有邏輯的模板語法。它可以應用於HTML、配置文件、源代碼等任何地方。 它通過使用散列或對象中提供的值在模板中展開標記來工作。
我們稱它為沒有邏輯的模板，是因為它沒有if語句、else子句和for循環，它只有標簽。一些標簽被替換為值或什么也沒有或者一系列的值。
不能在模板中使用else if做邏輯判斷，我們可以在數據傳入之前對數據做邏輯操作。
我們在那使用mustache.js
你可以在任何可以使用JavaScript的地方使用mustache.js來渲染mustache模板。包括web瀏覽器、服務器環境（node）。
語法
- 模板以包裹住內容，格式中寫入的是模板的內容。 被替換的內容字段使用雙花括號包裹起來"{{}}"
- 插值表達式：雙花括號{{}} 包裹替換的字段
- {{#prop-name}}{{/prop-name}}用作for循環渲染，當prop-name的值為非空數組時，mustach不會遍歷該數組，渲染出個數和該數組長度相等的DOM元素
- 也可以用作if-else判斷。{{#prop-name}}{{/prop-name}}和{{prop-name}}{{/prop-name}}兩組標簽結合使用，當prop-name的值存在且不為false時，會渲染{{#prop-name}}{{/prop-name}}的內容，否則渲染{{prop-name}}{{/prop-name}}的內容。
<script id="template" type="x-tmpl-mustache"> {{name}} </script> <script type="text/javascript"> var template = $("#template").html(); //name值為函數返回值 var r = Mustache.render(template,{ name:function(){ return 'abc' //abc會替換雙花括號內name } }) //name值為字符串 var r = Mustache.render(template,{name:'wan'}) //字符串wan會替換雙花括號內的name </script>
我們注意到上面代碼render的第二個參數都是一個對象，第二個參數我們通常都會使用對象類型，傳入一個對象，在模板中書寫對象屬性，可以渲染出對象的值。 但也可以是其它類型如 數組、字符串類型、數字，如下:
<script id="template" type="x-tmpl-mustache"> {{.}} </script> <script type="text/javascript"> function loadUser(){ var template = $("#template").html(); var r = Mustache.render(template,'wan') //渲染出wan //或 var r = Mustache.render(template,[1,d,3]) //渲染出1,d,3 //或 var r = Mustache.render(template,1) //渲染出1 } </script>
我們可以看到如果第二個參數是其它類型，那么在模板中雙花括號內就用點.來表示，使用起來不方便。 一般在項目中很少會傳入其它類型。
對象屬性值為數組時 實現forEach遍歷數組渲染DOM
//頁面部分 <div id="target">Loading</div> //模板 <script id="template" type="x-tmpl-mustache"> <ul> {{#list}} <li> <span>{{name}}</span> <span>{{age}}</span> <span>{{job}}</span> </li> {{/list}} </ul> </script> //js部分 <script type="text/javascript"> var template = $("#template").html(); var r = Mustache.render(template,{ list:[ {name:'wannianqing',age:18,job:'The Front End'}, {name:'wangxiaosan',age:19,job:'java'}, {name:'lixiaosi',age:20,job:'The Front End'}, {name:'sunxiaowu',age:21,job:'java'} ] }) $("#target").html(r) </script>
用作if-else,屬性無論是顯示還是隱式轉換為boolean類型，true時渲染{{#prop-name}} false時渲染{{^prop-name}}
//頁面部分 <div id="target">Loading</div> //模板 <script id="template" type="x-tmpl-mustache"> {{#isShow}}一{{/isShow}} {{^isShow}}二{{/isShow}} </script> //js部分 <script type="text/javascript"> var template = $("#template").html(); var r = Mustache.render(template,{isShow:true}); //isShow存在且為布爾值true時，顯示 “一” var r = Mustache.render(template,{isShow:false}); //isShow存在且為布爾值true時，顯示 “二” var r = Mustache.render(template,{}); //isShow不存在時，顯示 “二” var r = Mustache.render(template,{isShow:[]}); //isShow存在，為空數組時，顯示 “二” var r = Mustache.render(template,{isShow:undefined}); //isShow存在，為undefined時，顯示 “二” var r = Mustache.render(template,{isShow:null}); //isShow存在，為null時，顯示 “二” $("#target").html(r) </script>
實際使用
用一個唯一id的script標簽包裹模板內容，type類型為text/template
<script id="template" type="text/template"></script>
使用原生javascript方法或者jquery方法獲得唯一id的script標簽的html內容
var template = document.getElementById('template').innerHTML.trim(); //或 var template = $("#template").html();
使用mustache的render方法處理模板后填充到目標位置
var rendered = Mustache.render(template,obj); $('#target').html(rendered)
完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body "loadUser()"> <div id="target">Loading</div> <script id="template" type="x-tmpl-mustache"> Hello {{}}~ <ul> {{#list}} <li>{{name}}</li> {{/list}} </ul> </script> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="js/mustache.js"></script> <script type="text/javascript"> function loadUser(){ var template = $("#template").html(); var obj = { list:[ {name:'wan'}, {name:'wan'}, {name:'wan'} ] } var rendered = Mustache.render(template,obj); $('#target').html(rendered) } </script> </body> </html>
上面示例是內部文件使用mustache模板引擎，我們還可以引入外部模板引擎來渲染頁面。
首先我們在HTML文檔中引入jquery.mustache.js文件配合mustache使用，jquery.mustache.js是jQuery做了一層封裝，提供了集中方法讓我們更方便使用mustache做模板渲染。 此處我們使用它的.load方法從指定路徑加載模板文件，加載成功后使用$.Mustache.render()處理模板渲染頁面。
$.Mustache .load('./mustache/demo2.mustache') .done(function(){ $("#target").html($.Mustache.render('demo2',{name:'wan'})) })
下面我們來看一個完整的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="target">Loading</div> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> <script type="text/javascript" src="js/mustache.js"></script> <script type="text/javascript" src="js/jquery.mustache.js"></script> <script type="text/javascript"> //要傳入的數據 var objData = { list:[ {name:'wannianqing',age:18,job:'The Front End'}, {name:'wangxiaosan',age:19,job:'java'}, {name:'lixiaosi',age:20,job:'The Front End'}, {name:'sunxiaowu',age:21,job:'java'} ] } //加載模板方法 function loadTemplateMustache(mustacheName,targetId,templateId,data){ //模板路徑 var mustacheDir = './mustache/'+mustacheName+'.mustache'; //渲染目標容器 var targetContainer = $(targetId); if(targetContainer.length > 0){ $.Mustache .load(mustacheDir) //加載模板文件 .done(function(){ //渲染模板 renderTarget(targetContainer,templateId,data) }) } } //渲染模板方法 function renderTarget(dom,templateId,data){ var el = dom; el.html(''); el.append($.Mustache.render(templateId,data)); } loadTemplateMustache('demo4','#target','template',objData) </script> </body> </html> ———————————————— 版權聲明：本文為CSDN博主「lucky萬萬」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。 原文鏈接：https://blog.csdn.net/weixin_30019329/article/details/87895623