Javascript模板引擎：Hogan

hogan.js是一个开源前端模板引擎，无逻辑的设计，简单好用，性能也不错。

使用

引入hogan.js，下载链接：http://www.bootcdn.cn/hogan.js/，然后通过hogan.js语法把模版渲染出来。代码如下：

<script src="hogan.js"></script>
<script>
var data = {
    name: "执念"
};
var template = "我的名字:{{name}}";

var hogan = Hogan.compile(template);  //Hogan模版对象
var html = hogan.render(data);        //结果：我的名字:执念
</script>

模版语法

1、{{keyName}}:

{{}}就是模版的标示符，花括号里的 keyName 表示键名，这句的作用是直接输出与键名匹配的键值，就如上面的例子。

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

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

var data = {
    people: [{
        name: "Jack",
        age: 18
    }, {
        name: "Davide",
        age: 19
    }]
};
var template = "{{#people}}名字:{{name}},年龄:{{age}};{{/people}}";

var hogan = Hogan.compile(template);  //Hogan模版对象
var html = hogan.render(data);        //结果：名字:Jack,年龄:18;名字:Davide,年龄:19;

{{#keyName}}{{/keyName}}具备简单的判断功能，如果keyName值为null/undefined/false；则不渲染输出任何内容。如：

var data = {
    unvisible: false,
    visible: true
};
var template = "{{#unvisible}}false;{{/unvisible}}{{#visible}}true{{/visible}}";

var hogan = Hogan.compile(template);  //Hogan模版对象
var html = hogan.render(data);        //结果：true

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

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

var data = {
    unvisible: false,
    visible: true
};
var template = "{{#unvisible}}false;{{/unvisible}}{{#visible}}true{{/visible}}";
var hogan = Hogan.compile(template);  //Hogan模版对象
var html = hogan.render(data);        //结果：true

4、{{.}}:

表示枚举，可以循环输出整个数组，如：

var data = {
    array: [1,2,3]
};
var template = "{{#array}}数字:{{.}};{{/array}}";
var hogan = Hogan.compile(template);  //Hogan模版对象
var html = hogan.render(data);        //结果：数字:1;数字:2;数字:3;

 5、{{>modular}}:

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

var data = {
    name: "执念",
    age: 18,
    sex: "男"
};
var template1 = "我的名字:{{name}};{{>age}};{{>sex}};";
var template2 = {
    age: "年龄:{{age}}",
    sex: "性别:{{sex}}"
};

var hogan = Hogan.compile(template1);      //Hogan模版对象
var html = hogan.render(data, template2);  //结果：我的名字:执念;年龄:18;性别:男;

6、{{{keyName}}}或者{{&keyName}}:

{{keyName}}输出会将等特殊字符转译，如果想保持内容原样输出可以使用{{{}}}或者{{&}}，如：

var data = {
    specialChar: "<span>转义</span>"
};
var template = "{{specialChar}}<br />{{{specialChar}}}<br />{{&specialChar}}";

var hogan = Hogan.compile(template);    //Hogan模版对象
var html = hogan.render(data);          //结果：&lt;span&gt;转义&lt;/span&gt;<br /><span>转义</span><br /><span>转义</span>

正常的{{specialChar}}被Hogan转义，最终会以纯文本方式显示，而{{{specialChar}}}和{{&specialChar}}中包含的标签依旧正常输出，未转义。

7、{{!notes}}或者<!-- notes -->:

{{!}}表示注释，注释后不会渲染输出任何内容，但是不足之处在于注释内部不能包含mustache变量，否则会不好用。使用HTML的注释，能够注释掉任何内容。

var data = {
    notes: "注释"
};
var template = "{{!notes}}";

var hogan = Hogan.compile(template);    //Hogan模版对象
var html = hogan.render(data);          //结果：""，空字符串

处理复杂数据

Hogan展示的还可以是一个function返回的结果，function可以读取当前变量的上下文来获取其他属性执行其他操作，如：

var data = {
    judgements: [{
        name: "Jack",
        age: 18
    },{
        name: "Davide",
        age: 35
    },{
        name: "King",
        age: 60
    }],
    ageStage: function() {
        if(this.age < 20) {
            return "青年"
        }
        else if(this.age < 40) {
            return "中年"
        }
        else {
            return "老人"
        }
    }
};
var template = "{{#judgements}}{{name}}人生阶段：{{ageStage}};{{/judgements}}";

var hogan = Hogan.compile(template);    //Hogan模版对象
var html = hogan.render(data);          //结果：Jack人生阶段：青年;Davide人生阶段：中年;King人生阶段：老人;

通过此种方式，可以对复杂的数据进行处理。从上面可以看出，ageStage并不是judgemengs包含的部分，但是可以被使用，这说明只要是data包含的数据，在其他地方也可以被使用。