web模板引擎mustache

Web 模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，通常是标准的 HTML 文档。当然不同的开发语言有不同模板引擎，如 Javascript 下的 Hogan 、ASP 下的 aspTemplate、以及 PHP 下的 Smarty，这里主要介绍基于 Javascript 语言的模板引擎，目前流行有 Mustache、Hogan、doT.js、JsRender、Kendo UI Templates等.
接下来我们将开启我们的mustache学习之旅！

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

2 使用mustache的前提条件
为了能够使用mustche，我们必须在自己的html中引入mustache.js文件，引入方式如下：

<script type="text/javascript" src="mustache.js"></script>

如果没有该文件，可以在github上进行下载，下载链接为：http://github.com/janl/mustache.js

3 mustche语法
为了能全面的理解mustache，接下来将介绍一下其基本语法，特此说明：代码中用到的数据如下，且代码均是该js文件的一部分

<script type="text/javascript">
var data = {
    "name": "北京骏马国际酒店",
    "hotel_info": {
        "street": "北京市海淀区中关村南路南1条甲2号",
        "city": "北京",
        "Hotel_area": "中关村商圈 ",
    },
    "links": [
        {"link_address": "http://www.youku.con"},
        {"link_address": "http://www.baidu.con"},
    ],
    "score": "<b>90</b>",
    "facility": ["wifi","独立卫浴"]，
    "getCity": function(){
          return this.hotel_info.city;
    }
}
</script>

• 简单的变量替换：{{name}}

var tpl = '{{name}}';
var html = Mustache.render(tpl, data);
console.log( html );
//输出：北京骏马国际酒店

语法解释：
主要的渲染方法为Mustache.render，该方法有两个参数，第一个为要渲染的模版，也就是上例中的tpl，第二个
就是数据源也就是上例中的data对象

• 如果变量含有html的代码而不想转义可以用{{&score}}

var tpl = '{{&score}}';
var html = Mustache.render(tpl, data);
console.log( html );
//输出：<b>90</b>
//如果去掉&则输出：&lt;b&gt;90&lt;&#x2F;b&gt;

• 如果是对象，还能解释其属性

var tpl = '{{hotel_info.street}}';
var html = Mustache.render(tpl, data);
console.log( html );
//输出：北京市海淀区中关村南路南1条甲2号

• {{#keyName}} {{/keyName}}兼有if判断和forEach的功能

var tpl = '{{#hotel_info}}{{street}}--{{city}}{{/hotel_info}}';
var html = Mustache.render(tpl, data);
console.log( html );
//输出：北京市海淀区中关村南路南1条甲2号--北京

语法解释：
以#开始、以/结束表示区块，它会根据当前上下文中的键值来对区块进行一次或多次渲染

• 迭代

var tpl = "{{#links}}{{&link_address}}--{{/links}}";
var html = Mustache.render(tpl, data);
console.log( html );
//输出 ：http://www.youku.con--http://www.baidu.con--

• 如果迭代的是数组，还可以用{{.}}来替代每个元素

var tpl = "{{#facility}}{{.}}--{{/facility}}";
var html = Mustache.render(tpl, data);
console.log( html );
//输出 ：wifi--独立卫浴--

• 迭代输出的还可以是一个function返回的结果，function可以读取当前变量的上下文来获取其他属性执行其他操作

var tpl = "{{getCity}}";
var html = Mustache.render(tpl, data);
console.log( html );
//输出 ：北京

• {{^keyName}} {{/keyName}}
  该语法与{{#keyName}} {{/keyName}}类似，不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容

• {{>partials}} 子模块
  当结构比较复杂时，我们可以使用该语法将复杂的结构拆分成几个小的子模块

var tpl = "<h1>{{company}}</h1> <ul>{{>info}}</ul>"
var child = {info: "{{#hotel_info}}<li>{{street}}</li><li>{{city}}</li><li>{{Hotel_area}}</li>{{/hotel_info}}"};
var html = Mustache.render(tpl, data, child);
//输出：<h1></h1> <ul><li>北京市海淀区中关村南路南1条甲2号</li><li>北京</li><li>中关村商圈 </li></ul>

• {{!comments}} 表示注释，注释后不会渲染输出任何内容