Javascript 语言的模板引擎：Mustache简单总结

来源：互联网发布：c语言贪心算法例题编辑：程序博客网时间：2024/06/05 13:29

最近项目中用到了js的模板引擎，用了后感觉很方便，在这里简单的做个总结。

一、Mustache的介绍

Mustache是一个轻量级和轻逻辑的模板引擎，优点有语法简单、易学、可用于多种语言。

二、准备工作

需要到官网上下载mustache.js文件，引入到自己html文件中，如图（1）和图（2）：

图（1）

图（2）

三、基本语法及用法

1.先准备一段json数据data和一段html代码

<html>

<head>

$(function(){

var data = {
"name": "张三",

“age”:"20",
"address": {
"street": "1 Infinite Loop Cupertino</br>",
"city": "California ",
"state": "CA ",
"zip": "95014 "
},
"product": ["Macbook ","iPhone ","iPod ","iPad "]
}

});

</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<div class="div7"></div>
<div class="div8"></div>
</body>
</html>

2.基本语法：

(1). Mustache.render(tpl, data);

这个方法是Mustache渲染模板的方法，tp1是模板信息，data是json数据，具体用法请看下面的实例。

(2). {{keyName}}

{{}}就是Mustache的标示符，花括号里的keyName表示json数据里面的键名，{{keyName}}可以直接输出与keyName匹配的键值.

例：

var tpl = '<h1>Hello {{name}}</h1>';
var html = Mustache.render(tpl, data);
$(".div1").text(html);

输出结果：

(3).{{#keyName}} {{/keyName}}

以{{#keyName}}开始，以 {{/keyName}}结束表示块区域

例：

var tp2='{{#address}}<p>{{street}},{{city}},{{state}}</p>{{/address}}'
var html2=Mustache.render(tp2,data);
$(".div2").text(html2);

输出结果：

注意：如果{{#address}}为空、undefined、false时，不会输出任何值。

(4).{{^keyName}} {{/keyName}}

此语法与{{#keyName}} {{/keyName}}类似，表示块区域，不同的是该语法只有值为空、undefined、false时才渲染。

例：

var tp3 = '{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}';
var html3 = Mustache.render(tp3, data);

$(".div3").text(html3);

输出结果：

(5).{{.}}表示枚举，可以循环输出整个数组

var tp5='{{#product}}<p>{{.}}</p> {{/product}}';
var html5=Mustache.render(tp5,data);

输出结果：

(6).{{>keyName}}

以>开始表示子模块，如{{> address}}；当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块

例:

输出结果：

(7).{{{keyName}}}

此语法会将字符原样输出

var tp7='{{#address}} <p><{{{street}}}</p> {{/address}}';
var html7=Mustache.render(tp7,data);
alert(html7);
$(".div7").html(html7);

输出结果：

(8).'{{!注释内容，不会输出}}'

此语法表示注释

(9).模板定义除了以上几种，还可以用以下方法定义：

<script type="text/template" id="test_tpl" info="定义模板">
<ul>
<li>{{test}}</li>
<li>{{test}}</li>
<li>{{test}}</li>
</ul>
</script>

//测试外部定义的模板
var tp8 = $("#test_tpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
var rowData={"test":"aaa"};
var html8=Mustache.render(tp8, rowData);//渲染模板
$(".div8").html(html8);

测试结果：

0 0