Mustache.js 简单易用的 JavaScript 模版框架

  • Z时代
  • 2024-01-10
  • 分类：IT

Mustache.js 是一个 Mustache 模板系统的 JavaScript 实现。 Mustache 模板语法的逻辑比较简单。它用于 HTML 配置文件，源代码等。它的工作方式是通过通过以哈希值或者对象的方式扩展模板标签。

Mustache.js 简单易用的 JavaScript 模版框架

Mustache 简介

Mustache 是一个 logic-less （轻逻辑）模板解析引擎，它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中，Mustache是基于JavaScript实现的模版引擎，类似于JQuery Template，但是这个模版更加的轻量级，语法更加的简单易用，很容易上手。

Mustache 语法

Mustache 的模板语法很简单，就那么几个：

  • {{keyName}}

  • {{#keyName}} {{/keyName}}

  • {{^keyName}} {{/keyName}}

  • {{.}}

  • {{<partials}}

  • {{{keyName}}}

  • {{!comments}}

使用 Mustache

下面就具体讲一下Mustache的使用。在开始讲之前，需要先从Github上获取相关的Mustache.js文件，获取文件之后，解压到你的项目文件夹中。 然后就开始具体的使用，首先需要在页面的head标签内引用jQuery.js 和Mustache.js两个脚本文件，主要有以下几个方面的用法。

简单的对象绑定

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);

语法解释

  1. Mustache的语法很简单，用两个大括号标记要绑定的字段即可，“{{}}”；

  2. 大括号内的字段名称要和Mustache.render方法中的第二个参数中的对象的属性名一致

  3. 主要的渲染方法为Mustache.render，该方法有两个参数，第一个为要渲染的模版，也就是上例中的template，第二个就是数据源也就是上例中的user对象

对象数组循环渲染

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);

语法解释

  1. 对于对象数据Mustache也有其特殊的语法：{{#}}{{/}}，如果所给定的数据源是一个对象数组，则可以使用该语法，很方便的用来循环展示。

  2. 其中{{#}}标记表示从该标记以后的内容全部都要循环展示

  3. {{/}}标记表示循环结束。这种情况多用于table行的展示。

判断对象为null（false/undefined）

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);

语法解释

  1. 上边我们有讲到{{#}}{{/}}这样的语法，除了上边的循环遍历之外，它还有另外的一层意思就是判空，如果{{#}}中的值为null或false或undefine则其标记内的内容则不展现

  2. 在代码示例中，users对象中的第一个对象名为null，所以在展示时，该条用户信息没有被展示。

  3. 有了判空的方法当然还有与之相反的方法{{^}}，该方法表示的意思与{{#}}意思相反。

防止 HTML 转义

var user = { name: "<h1>Olive</h1>" };
var template = "my name is {{name}}";
var view = Mustache.render(template, user);
$("#user_name").html(view);<span style="line-height:1.5"> </span>

在某些时候，我们要绑定的数据源中可能会有一些html标记，如果单纯的采用{{}}这种方式来绑定的话，默认的会将HTML标记转义。为了解决防止绑定字段中的内容被转移我们可以这样做{{&}},这样就可以防止转义。

简单示例

function show(t) {
	$("#content").html(t);
}
var view = {
	title: 'YZF',
	cacl: function () {
		return 6 + 4;
	}
};
$("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));

可以很明显的看出Mustache模板的语法，只需要使用{{和}}包含起来就可以了，里面放上对象的名称。 通过本示例也可以看出，如果指定的属性为函数的时候，不会输出函数里面的内容，而是先执行函数，然后将返回的结果显示出来。

不转义 HTML 标签

var view = {
	name: "YZF",
	company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

通过这个示例可以看出Mustache默认是会将值里面的html标记进行转义的，但是有时候我们并不需要。 所以这里我们可以使用{{{和}}}包含起来，或者是{{和}}包含，那么Mustache就不会转义里面的html标记。

绑定子属性的值

var view = {
	"name": {
		first: "Y",
		second: "zf"
	},
	"age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

相信看到第一个示例的时候，就会有人想到能不能绑定子属性，如果你努力看下去了。那么祝贺你，现在就是解决你的需求的方式，仅仅只需要通过.来使用子属性即可。

条件式选择是否渲染指定部分

var view = {
	person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));

问题总是不断，如果我们还需要能够根据我们给的值，决定是否渲染某个部分，那么现在就可以解决这个问题，当然还要提示的就是不仅仅是false会导致不渲染指定部分。 null，空数组，0，空字符串一样有效。语法上面比较简单，就是使用{{#key}} ... {{/key}}来控制中间的内容。

循环输出

var view = {
	stooges: [
		{ "name": "Moe" },
		{ "name": "Larry" },
		{ "name": "Curly" }
	]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

仅仅学会上面的方式，大部分地方你都解决了，但是还是会出现麻烦的地方，就是循环输出，如果你一个一个写，相信会很烦躁，当然Mustache不会让我们失望，它也给出了如何循环输出的方式，这里是将一个由对象组成的数组输出，如果我们输出的是数组，就需要使用{{.}}来替代{{name}}。

循环输出指定函数处理后返回的值

var view = {
	"beatles": [
		{ "firstname": "Johh", "lastname": "Lennon" },
		{ "firstname": "Paul", "lastname": "McCartney" }
	],
	"name": function () {
		return this.firstname + this.lastname;
	}
};
show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));

循环输出是有了，但是我们还想后期进行加工。那么这个完全符合你的需要，因为Mustache会将数组中的值传递给你的函数，输出你函数返回的值。这里我们可以看到最外层是数组，只要在里面使用函数那么外层的数组就会作为这个函数的参数传递进去。

自定义函数

var view = {
	"name": "Tater",
	"bold": function () {
		return function (text, render) {
		   return render(text) + "<br />";
		}
	}
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

上面我们都是用的变量作为节，那么我们现在用函数作为节，会有什么效果呢。 它会调用我们函数返回的函数，将节中间的原始字符串作为第一个参数，默认的解释器作为第二个参数，那么我们就可以自行加工。

反义节

var view = {
	"repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

上面我们也用节，但是仅仅只能选择是否输出某个部分。所以这里我们弥补一下。 如果我们使用了{{^和}}来定义节的话，那么这个部分只会在里面的值为空，null，空数组，空字符串的时候才会显示。那么我们就可以实现了if else的效果了。

部分模板

var view = {
	names: [
		{ "name": "y" },
		{ "name": "z" },
		{ "name": "f" }
	]
};
var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));

Mustache虽然节约了很多时间，但是我们定义了很多模板，但是彼此之间无法互相嵌套使用，也会造成繁琐。 所以这里我们还要介绍如何定义部分模板，用来在其他模板里面使用，这里使用其他模板的方式仅仅是{{>templetename}}。 最大的不同就是Mustache.render方法有了第三个参数。

预编译模板

Mustache.parse(template);
//其他代码
Mustache.render(template,view);

模板既然有好处，也有坏处。就是编译模板需要时间，所以在我们已知会使用某个模板的前提下，我们可以预先编译好这个模板，以便后面的使用。

相关链接

  • Github地址：https://github.com/janl/mustache.js

  • 项目地址：http://mustache.github.com/

以上是 Mustache.js 简单易用的 JavaScript 模版框架 的全部内容， 来源链接： utcz.com/p/231822.html

回到顶部