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

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

阅读更多

文/董彬

引言

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
分享到:
评论

相关推荐

    为什么要使用HAML和SASS

    首先,HAML是一种简洁、清晰的HTML模板语言,它通过消除冗余的闭合标签和减少缩进混乱,使HTML代码更加简洁易读。在HAML中,元素的嵌套关系通过缩进来表示,没有开始和结束标签,而是用百分号(%)和元素名来创建...

    Jade —— 源于 Node.js 的 HTML 模板引擎

    Jade 是一种高性能的模板引擎,它深受 Haml(一种用于 Ruby 的模板引擎)的影响,采用 JavaScript 编写,主要面向 Node.js 开发者提供服务。通过 Jade,开发者能够更加高效、简洁地创建 HTML 文档。 #### 二、特性 ...

    pHAML-开源

    HAML是一种用于编写HTML模板的语言,其设计目的是提高代码的可读性、简洁性和一致性,减少冗余,并通过缩进替代HTML中的大量标签闭合。pHAML的出现,为PHP开发者提供了类似的功能,让PHP项目也能享受到HAML带来的...

    Rails相关电子书汇总二

    6. **视图模板**:ERB(Embedded Ruby)和HAML等模板语言的使用,以及如何创建动态和响应式的用户界面。 7. **测试驱动开发(TDD)**:Rails鼓励TDD实践,包括使用RSpec或Test::Unit进行单元测试和功能测试。 8. **...

    Agile Web Development with Rails

    3. **视图篇**:讲解Rails的模板系统,包括ERB、Haml和Slim等不同的模板语言,以及如何使用辅助方法和布局来创建动态和响应式的用户界面。 4. **控制器篇**:讨论Rails的控制器及其在处理HTTP请求和响应中的角色。...

    nomad_connect:LeWagon最终项目

    同时,Rails的 erb 模板引擎用于生成HTML,结合haml、slim等模板语言,可以创建出结构清晰、易于维护的视图。 "nomad_connect"作为一个社交网络应用,很可能包含了身份验证和授权功能。Rails提供了Devise这样的gem...

    rails50:使用Rails 5进行敏捷Web开发的源代码-web development source code

    Rails 5支持ERB、Haml等多种模板语言,并引入了`capture_helper`,使得辅助方法可以在视图模板中更方便地使用。此外,`form_with`代替了之前的`form_for`和`form_tag`,提供了一种更简洁的表单构建方式,支持HTML5...

    italy.beta-europe.org:网站http:italy.beta-europe.org

    网站的视图部分使用ERB(Embedded Ruby)或Haml等模板语言编写,它们允许在HTML中嵌入Ruby代码。这些模板在`app/views`目录下,负责动态生成页面内容。 6. 模型与数据验证: 在`app/models`目录下的Ruby文件定义了...

    Recipes:Ruby on Rails 精选食谱书

    Ruby on Rails,简称Rails,是基于Ruby语言的开源Web应用框架,它遵循MVC(Model-View-Controller)架构模式,旨在使Web开发过程更加简洁高效。Rails以其“约定优于配置”的理念,鼓励开发者遵循一套标准的代码组织...

    nisevi-backend:Ruby on Rails博客和产品组合

    《Ruby on Rails博客与产品组合应用详解——NISEVI》 NISEVI是一款基于Ruby on Rails框架构建的博客和产品组合应用程序。它提供了一个平台,让用户可以展示个人作品集,同时分享自己的想法和见解,体现了Rails框架...

    webbserverprogrammering-slutprojekt

    4. **模板引擎**:Ruby有多种模板引擎,如ERB(Embedded Ruby)、Haml和Slim,用于生成HTML、XML或其他格式的动态内容。 5. **数据库集成**:Ruby支持多种数据库,如MySQL、PostgreSQL和SQLite,通过ActiveRecord...

    car_trader

    5. **模板引擎与视图渲染**:Rails使用ERB(Embedded Ruby)或Haml等模板引擎来处理视图层。在"car_trader"中,这些模板将用于生成动态的HTML页面,展示车辆列表、详情、购买流程等。 6. **测试驱动开发**:Ruby...

    lorquotes2:lorquotes.ru的新引擎

    3. **模板系统**:Ruby on Rails中的ERB(Embedded Ruby)或Haml等模板引擎,用于生成HTML,确保了前端界面的动态性和响应性。 4. **搜索功能**:为了帮助用户快速找到特定的语录,lorquotes2可能集成了全文搜索...

    neighbors:le Wagon编码训练营的最终项目,批次531

    《邻居:Le Wagon编码训练营的批次531最终项目——深入理解Ruby on Rails的应用构建》 在编程世界中,Ruby on Rails(简称Rails)是一个备受推崇的Web开发框架,它以其“约定优于配置”的理念,高效且简洁的代码...

    pistoncms:开发人员的CMS

    4. **模板引擎**:如ERB(Embedded Ruby)或HAML,用于创建动态网页内容。 5. **数据库交互**:学习如何通过ActiveRecord与数据库进行交互,创建、查询和更新数据。 6. **RESTful API**:PistonCMS可能提供API接口,...

Global site tag (gtag.js) - Google Analytics