先贴个Hogan的github地址镇楼：https://github.com/twitter/hogan.js
在实战课《手把手从0打造企业级电商平台-前端实战》里，很多同学反馈对Hogan模板引擎不太熟悉，这里整理个手记，对它介绍一下。Hogan是一个非常简单的模板引擎，可以把它理解成Mustuche语法的编译器。Hogan简单到只有六七条语法，可以说是目前最简单的模板引擎了，估计以后也仍然会是的。
我们选择Hogan，就是因为它最简单，体积最小，没有之一。我只想要一个能做变量替换和循环的模板引擎，有Hogan就够了。
Hogan的安装和使用
通过npm安装hogan:
npm install hogan.js--save-dev
CommonJs下的使用方式：
// 引入hoganvarhogan=require('hogan.js');// 渲染所需模板vartemplate='
Hey! I am {{name}}!';// 渲染所需数据vardata={name:'Rosen'};// 模板的编译varcompiledTemplate=hogan.compile(template);// 模板的渲染varresult=compiledTemplate.render(data);// 输出结果console.log(result);// output: Hey! I am Rosen!这里要注意一下，npm里还有一个叫hogan的组件，是对hogan.js做的一个套壳的包装，同学们如果使用hogan出错的话，可以换成这里的hogan.js，还是原厂的好！除了引用名称，其他用法都是完全一样的。
Hogan语法
{{name}}
// 数据：{name:'Rosen'};// 模板：
Hey!I am{{name}}!// 结果：Hey!I amRosen!这就是读取一个变量，假如name是个html片段，这里会对html编码，如果放到dom里，就显示成了一段html代码。
{{{name}}}
// 数据：{name:'Rosen'};// 模板
Hey!I am{{{name}}}!// 结果Hey!I amRosen!大括号能怎么样？还是读取一个变量，只不过name是个html片段的话，这里不对html编码，放在dom里就是一段dom。
{{#list}} {{/list}}
这个老复杂了，是个循环呢，吓死老衲了！当然#标记还可以当做bool型的判断。
// 数据:{list:[{name:'Rosen'},{name:'JIM'}],isRosen:true}// 数组型用法：{{#list}}{{name}}{{/list}}// bool型用法：{{#isRosen}}我就是Rosen啊！{{/isRosen}}// 数组型结果：RosenJIM// bool型结果：我就是Rosen啊！
{{^list}} {{/list}}
这货和上一个是相反的，就是非的逻辑。如果列表为空，或者非真值都会进这个分支，其中包括false，null，undefined，0什么的。
// 数据:{list:[],isRosen:false}// 数组型用法：{{^list}}这列表抠搜的，啥玩意都没有！{{/list}}// bool型用法：{{^isRosen}}谁是Rosen?不认识！{{/isRosen}}// 数组型结果：这列表抠搜的，啥玩意都没有！// bool型结果：谁是Rosen?不认识！
{{.}}
代表枚举类型里的当前元素，枚举类型没有索引名，只能用{{.}}
// 数据:{list:['Rosen','JIM']}// {{.}}用法：{{#list}}{{.}}{{/list}}// 结果：RosenJIM
{{!}}
我就是个注释，知道你们都不乐意用我
// 用法:{{!楼下是二货}}我最厉害！// 执行结果:我最厉害！
这些就是hogan的常用语法，还有个引入片段的语法基本用不到，这里就不讲了。
然后会是什么呢？然后就没有然后了，就这些！
总结：Hogan，不就这么几句
{{data}}转义的变量
{{{data}}}不转义的变量
{{#list}} {{/list}}列表循环 / 真值判断
{{^list}} {{/list}}空列表 / 非真值判断
{{.}}枚举的当前元素
{{!}}我是注释
Hogan是不是简单到有点过分了？学完了都不好意思说我又学会了一个新东西。
看过这篇以后，别再说Hogan我不太会用。
作者： Rosen_Gao
链接：http://www.imooc.com/article/18493
来源：慕课网
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
网友评论