Hogan

Hogan 的简介

1.模板原理：将模板文件和数据通过模板引擎生成最终的HTML代码；
2.引擎核心：
利用正则表达式分解出普通字符和模板标识符；
将模板标识符转换成普通的语言表达式；
生成待执行语句；
将数据填入执行，生成最终的字符串。
3.Hogan:是一个非常简单的模板引擎，用 Hogan 渲染 html 模板不用操作 dom 会更方便。

Hogan 的安装和使用

1.通过 npm 安装 hogan
npm instanll hogan.js --save-dev

2.CommonJs 下的使用方法：

//引入 hogan
var hogan =require('hogan.js');

//渲染所需模板
var data = {
    name : 'Rosen'
};

//模板的编译
var compiledTemplate = hogan.compile(template);

//模板的渲染
var result =compiledTemplate.render(data);

//输出结果
console.log(result);

//output:<div>Hey!I am Rosen!</div>

注意：npm 里还有一个 hogan 的组件，是对 hogan.js 做的一个套壳的包装（若使用 hogan 出错的话，换成 hogan.js）;

Hogan 语法

{{name}} —— 读取一个变量，假如 name 是个 html 片段，这里会对 html 编码，如果放到 dom 里，显示成了一段html 代码。

//数据：
{ name : 'Rosen' };

//模板：
<div>Hey！I am {{name}}!</div>

//结果：
<div>Hey！I am Rosen!</div>

{{{name}}} —— 还是读取变量，但是若 name 是个 html 片段的话，这里不对 html 编码，放在 dom 里就是一段 dom。

//数据：
{name : '<span color = "red">Rosen</span>'};

//模板
<div>Hey ! I am {{{name}}}!</div>

//结果
<div>Hey!I am <span color="red">Rosen</span>!</div>

{{#list}} {{/list}} —— 代表循坏，#标记用来当作bool型的判断。

//数据：
{
    list : [
        {name : 'Roaen'},
        {name : 'JIM'}
    ],
    isRosen : true
}

//数组型用法：
{{#list}}
    <span>{{name}}</span>
{{/list}}

//bool型用法：
{{#isRosen}}我就是Rosen啊！{{/isRosen}}

//数组型结果
<span>Rosen</span><span>JIM</span>

//bool型结果
我就是Rosen啊！

{{^list}}{{/list}} —— 非的逻辑，如果列表为空，或者非真值都会进这个分支，其中包括false、null、undefined,0。

//数据：
{
    list : [],
    isRosen : false
}

//数组型的用法
{{^list}}
    这列表抠搜的，啥玩意都没有！
{{/list}}

//bool型用法
{{^isRosen}}谁是Rosen?不认识{{/isRosen}}

//数组型结果：
这列表抠搜的，啥玩意都没有！

//bool型结果：
谁是Rosen?不认识！

{{.}} —— 代表枚举类型里的当前元素，枚举类型没有索引名，只能用{{.}}。

//数据：
{
    list : ['Rosen','JIM']
}

//{{.}}用法：
{{#list}}
    <span>{{.}}</span>
{{/list}}

//结果：
<span>Rosen</span><span>JIM</span>

{{!}}——注释

//用法：
{{! 楼下是二货！}}
<span>我最厉害！</span>

//执行结果：

总结

{{data}}转义的变量

{{{data}}}不转义的变量

{{#list}}{{/list}}列表循环/真值判断

{{^list}}{{/list}}空列表/非真值判断

{{.}}枚举当前元素

{{!}}注释

本文原创发布于慕课网 ，作者： Rosen_Gao ，转载自http://www.imooc.com/article/18493。