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); //结果：<span>转义</span><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包含的数据，在其他地方也可以被使用。