BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

HAML:简洁高效就是美

| 作者 Sam Aaron 关注 0 他的粉丝 ,译者 Jason lai 关注 0 他的粉丝 发布于 2007年5月19日. 估计阅读时间: 4 分钟 | QCon上海2018 关注大数据平台技术选型、搭建、系统迁移和优化的经验。

Dan Grigsby在他对Haml精采绝伦的介绍中,对Greenspun第十编程法则改头换面,炮制了Grigsby第一法则:

“任何足够复杂的rhtml partial里面都包含了一个特别的非正式定义并充满Bug且实现了一半的Haml。”

那么Haml到底是什么?Haml的作者Hampton Catlin如是说:

“Haml是对传统XHTML的生成方式的一种反叛。它既不是纯粹的代码,也不是一种文本处理语言。它是与众不同的,是一种在我看来最为自然的XHTML构造方式。”

此外,Haml的网站上说:“Haml让你撇开臃肿丑陋的模板,将它们以优雅整洁的代码代替。”下面我们先来简单看看到底丑陋的模板会是什么样子,而优雅整洁的代码又是如何:

下面是一个“丑陋模板”的范例:

<div id="profile">
<div class="left column">
<div id="date"><%= print_date %></div>
</div>
<div class="right column">
<div id="email"><%= current_user.email %></div>
<div id="bio"><%= h current_user.bio %></div>
</div>
</div>

你可以看见,这只是标准的HTML/ERb的代码片断。对于你来说,这可能不会那么刺激审美神经。然而,正如Grigsby在他的文章中巧妙地解释到的,不仅仅里面会存在许多重复,而且也会出现很多不必要的字符。Hampton认为,标识语言应该是赏心悦目的,而且不是所有能赏心悦目的东西都很好,他认为能优雅到让你开发速度更快,这才是最好的。因此,从这点出发,输出同样结果的代码片段子Haml看起来应该是这样的:

#profile
.left.column
#date= print_date
#address= current_user.address
.right.column
#email= current_user.email
#bio= h(current_user.bio)

这看起来可能会有点奇怪,不过你不得不承认的是,这代码瘦下来好多。值得注意的是,代码中大量使用了空格来消除HTML的闭合标签,并使用CSS风格的语法来描述div的id和class,而且消除了难看的<%= %>标签。如果你比较一下两个版本字符数的大小,你会发现范例中Haml版本的字符数是HTML版本的64%。这就意味着你可以少输入36%的字符、少读36%的字符。归根到底就是少了36%的碍眼的东西。Antoine de Saint-Exupery对Haml给于了高度评价:“在没有什么可以去除,而不是什么都加不进去的时候,十全十美的目标就达到了。”

从大家对Haml的反应来看,评价褒贬不一。有不少Ruby狂热分子会把它和Python相提并论,因为它大量使用了空格缩进。然而,Hampton一行Python代码都没有写过,他只是觉得空格可以在文档中可以表示结构。他认为Haml更像YAML而不是Python,因为它更专注于文档的结构和数据的配置。

新的视点总是有自己一席之地的,DHH也同意说:“我不能肯定这符合我的口味,但我非常欣赏从另一个角度思考问题的意愿。”社区同样也表示支持态度,因为关于Haml的活动和讨论也很是热烈。Hampton拿着不断发展的社区开起玩笑说:

“在Haml的论坛上面晃我感觉总是很奇怪,我感觉我是在读大家对一门技术写的情书。;)”

Hampton认为,你只需要花20分钟就会喜欢上Haml的简洁。不过,Grigsby不同意这个观点,他认为2分钟足矣。

要了解更多关于Haml的信息,请看Grigsby的介绍Haml网站

查看英文原文:HAML: The Beauty of Efficiency

评价本文

专业度
风格

您好,朋友!

您需要 注册一个InfoQ账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

简介了? by xu huisheng

只看到失去了html的原貌,不知道你这样搞怎么让美工设计页面了。打算让程序员写这些吗?

如果没有好的IDE,太难普及了 by Kong Fanbin

如果没有好的IDE,太难普及了
XSLT是个挺好的东西,没有好的IDE一样不能火起来。

要程序员累死啊? by lei snail

字节是少了,可是页面设计人员看不懂啊,不是很直观,最后还要程序员转一遍,麻烦啊

Re: 要程序员累死啊? by Guo Xiaogang

我觉得这种方式其实假设了页面中数据和表现的分离。页面设计人员就不该管这些,他们写CSS就好了。

不过我也觉得就少打了些字,跟<div/>的写法相比没多大区别。也许是例子太简单了吧,有时间还要仔细看看再下结论。

Re: 要程序员累死啊? by 夏 绪宏

刚才看了点教程,使用了一下,还是挺不错的,不过也存在一些问题..
简洁是简洁里,但是有的东西又被限制了..不是特别灵活,如果是别人合作的话,也的要求美工也要学习 这东西...
有得总有失.自己权衡了..

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

5 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT