`
lzqustc
  • 浏览: 206320 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Haml——简洁优美的模板语言

RailsRubyXHTMLCSSHTML 
阅读更多

文/董彬

引言

Haml 是一种简洁优美的模板语言，可以应用于Ruby on Rails、 PHP等Web开发平台，可以大大缩减模板代码，减少冗余，提高可读性。并且Haml是一种完备的模板语言，没有牺牲当前模板语言的任何特性。Haml由 Hampton Catlin发明并且开发了Ruby on Rails上的实现。本文将以Ruby on Rails中的Haml实现为例，帮助你了解Haml的基本语法和常用特性，让你领略到Haml带来的高效生产。

缩进嵌套

当嵌套结构变得复杂时，HTML代码一方面容易忘记添加结束标签，另一方面嵌套结构难以读懂。Haml中不需要结束标签，因为它借鉴了Python的语法，强制使用两个空白字符的缩进来表示代码的嵌套结构，既提高了代码的可读性，又避免了对结束标签的依赖。

%ul

　%li Salt

　%li Pepper

等价于

<ul>

<li>Salt</li>

<li>Pepper</li>

</ul>

自关闭标签用来关闭：

%br/

等价于：

<br />

Haml的缩进语法优点是：

1. Haml的强制缩进相当于从语言级别规定了代码的缩进规范，违反了这种规范的“灵活性”可以被看成是邪恶的£¬£¬没有缩进或者缩进乱七八糟的嵌套标签是这种灵活性的代价。Haml这种缩进的约束实际上让程序员从不同的缩进风格中解脱出来，关注更重要的事情。

2. 结束标签自标签语言诞生起就是一种冗余，IDE对于标签语言最常用的支持也就是结束标签的自动补全和嵌套标签的自动缩进。Haml致力于消除冗余。

HTML 属性

Haml用{}来设置HTML属性，{}中的内容被当作是Ruby Hash来解释，所以任何Ruby代码都可以被直接调用。例如：

%p{:class => cycle("odd", "even")} Hello

等价于

<p class = '<%= cycle("odd", "even")%>' > Hello </p>

重构重复代码时，往往要借助Helper方法。你也可以把一些HTML属性封装成Helper 方法，然后直接引用：

module ApplicationHelper

def image_src

{:src => 'hello.jpg'}

end

end

%img{image_src}/

被解释成：

<image src='hello.jpg' />

你也可以继续添加其他属性：

%img{image_src, :class => 'nice'}

CSS风格的id 和 class 属性

一个结构良好的HTML中，最常用的属性毫无疑问是 id 和 class。Haml借鉴了CSS的语法，简化了这两个属性的编写。基本的语法结构是：

%tagname#id.class

例如

%p#foo Hello

被解释成：

<p id='foo'> Hello </p>

如果你使用div标签，连tagname都可以省略。比如一个id属性为foo的div标签：

#foo Hello!

被解释成

<div id='foo'>Hello!</div>

同理

.nice Hello

被解释成

<div class='nice'> Hello </div>

也可以添加多个 class ：

#foo.nice.light

插入代码

相对于RHTML，Haml的代码插入方式简洁得多。对于需要直接输出的代码，

Haml用 = 来代替 <%= ...%> 。比如：

%p

1 + 2 =

= 1 + 2

被解释成：

<p>

1 + 2 = 3

<p>

对于非输出的代码，用 - 符号来插入。不同于一般Ruby代码的是，就像Haml处理HTML标签一样，Haml中的Ruby代码块不需要关闭。比如：

- (1..3).each do |i|

%p= i

被解释成：

<p>

1

</p>

<p>

2

</p>

声明文档类型

XHTML的声明方式以啰唆而著称：

 <?xml version="1.0" encoding="utf-8" ?>

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果你厌倦了每次Copy and Paste，可以尝试一下Haml的方式：

!!! XML

!!!

或者你喜欢 XHTML 1.1，就用：

!!! 1.1

来代替：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">结束语

笔者在经历过的大部分Ruby on Rails项目中使用了Haml，相对于RHTML削减了三分之一乃至一半的表示层代码量，并且提高了代码的可维护性。Haml简单易学，即使是页面设计人员也能够很快掌握，技术迁移成本很小。如果本文让你产生了对Haml的兴趣，不要犹豫，在项目中大胆的尝试吧。 注释：

1：http://haml.hamptoncatlin.com/

2：http://hamptoncatlin.com/

作者简介：

董彬， FreeWheel Inc. 的工程师。毕业于哈工大计算机系，有两年的Rails开发经验，爱好围棋和户外运动，潜心于Ruby on Rails，极限编程，BDD等领域。

 

 

补充：Haml的两个有用命令

 

将html文件转换为haml文件

$ html2haml index.html > output.haml

 

反之，haml转为html

$ haml index.haml > output.html
分享到：
| rails 分页
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics