HTML模板渲染引擎Hogan

本文介绍了Hogan.js,一个HTML模板渲染引擎。通过npm安装后,可以使用不同的语法来处理变量、HTML编码、循环和条件判断。例如,`{{name}}`用于对HTML编码,`{{{name}}}`则不编码直接插入DOM,`{{#list}} {{/list}}`用于循环,`{{^list}} {{/list}}`表示否定逻辑,而`{{.}}`代表当前循环元素,`{{!}}`则用于注释。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Hogan的安装和使用

通过npm安装hogan:

npm install hogan.js --save-dev


CommonJs下的使用方式:

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

// 渲染所需模板
var template = '<div>Hey! I am {{name}}!</div>';

// 渲染所需数据
var data = {
    name : 'Rosen'
};

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

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

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

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

Hogan语法

{{name}}

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

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

// 结果:
<div>Hey! I am Rosen!</div>

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

{{{name}}}

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

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

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

大括号能怎么样?还是读取一个变量,只不过name是个html片段的话,这里不对html编码,放在dom里就是一段dom。

{{#list}} {{/list}}

这个老复杂了,是个循环呢,吓死老衲了!当然#标记还可以当做bool型的判断。

// 数据:
{
    list : [
        {name : 'Rosen'},
        {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>

// 执行结果:
<span>我最厉害!</span>

这边文章是转自Rosen_Gao老师的,学习到了很多 ,之后再做相应实现和整理
链接:http://www.imooc.com/article/18493
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值