Handlebars模板引擎

如果你不知道什么是模板,或者没用过,那我们先认识下在不是模板的时候,用一种语言生成另一种语言的最直接方式的时候,怎么操作。

比如:使用Javascript生成一些HTML:

document.write('<h1>Please Don't Do This</h1>');

document.write('<p><span class="code">document.write</span>is naughty,</p>');

如果像上面这样一直往下写,写500行,这样写一点意义也没有,问题是出现在哪里呢?

是:切换上下文环境困难。由Javacript生成的HTML充满了问题:

1、必须不断地考虑哪些字符需要转义以及如何转义。

2、使用JavaScript生成那些自身包含Javascript代码的HTML会很让人抓狂。

3、通常会失去编辑器的语法高亮显示和其他方便的语言特性。

4、很难发现格式不正确的HTML。

5、很难直观地分析。

6、很难让别人读懂你的代码。

针对以上问题,模板解决了在目标语言中编写代码的问题,同时也让插入动态数据成为了可鞥。用Mustache模板将之前的例子重写:

<h1>Much Better</h1>

<p>No <span class="code">document.write</span>here!</p>

<p>Today's date is {{}}.</p>

Handlebars是流行模板引擎Mustache的扩展。之所以推荐Handlebars,是因为它简单的Javascript集成(前端后后端)容易掌握的语法。

理解模板引擎的关键是在于上下文环境。当渲染一个模板时,便会传给模板引擎一个对象,就是上下文对象。

例如:如果上下文对象是{ name: 'Buttercup'},模板是<p>Hello, {{name}}!<p>,通过模板渲染HTML,最终输出结果是:

<h1>Meadowlark Travel</h1>

<p>Welcome,Buttercup</p>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值