来源：http://ningandjiao.iteye.com/blog/1772845

一个技术能够风靡，一定是有它的原因的，在熟悉之前，我们没有资格去对它做任何的判断。

Haml 是一种简洁优美的模板语言，使用它之后可以大大缩减模板代码，减少冗余，提高可读性。并且Haml是一种完备的模板语言，没有牺牲当前模板语言的任何特性。

Haml的使用通常有两种方式： 
    一是作为Ruby on Rails的插件来使用； 
    二是作为一个独立的Ruby module来使用。 
因为Haml可以提升我们编写HTML文件的速度，同时避免一些不必要的语法错误，因此还可以使用Haml作为一个加速HTML编写的工具,当然前提条件是有一个能够快速的把HAML编译成HTML的工具。

Haml的语法 

从Html到Haml 
Html文件如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>订餐</title>

    <link rel="stylesheet" href="lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css"/>

    <script src="lib/jquery.js"></script>

    <script src="lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js"></script>

    <script src='data/foods.json' type='text/javascript'></script>

    <script src='data/restaurants.json' type='text/javascript'></script>

    <script src='data/users.json' type='text/javascript'></script>

    <script src="js/application.js"></script>

    <link rel="stylesheet" href="css/application.css" type="text/css">

</head>

<body>

<div data-role="page" id="main">

    <div data-role="header">

        <h1>订餐</h1>

    </div>

    <!-- /header -->

    <div data-role="content">

        <a href="#order" data-role="button">帮订餐</a>

        <a href="#orders" data-role="button">看订单</a>

    </div>

    <!-- /content -->

</div>

<div data-role="page" id="order">

    <div data-role="header">

        <a href="#main" data-icon="back">Back</a>

        <h1>订餐</h1>

    </div>

    <!-- /header -->

    <div data-role="content">

        <label>人：</label>

        <input type="text" name="name" id="user" value="" readonly/>

        <a href="#peoples" data-role="button">选人</a>

        <label>餐厅：</label>

        <input type="text" name="name" id="restaurant" value="" readonly/>

        <a href="#restaurants" data-role="button">选餐厅</a>

        <label>套餐：</label>

        <input type="text" name="name" id="food" value="" readonly/>

        <a href="#foods" data-role="button" id="choose-food">选套餐</a>

        <a id="confirm" href="#" data-role="button">确定</a>

    </div>

    <!-- /content -->

</div>

<div data-role="page" data-add-back-btn="true" id="orders">

    <div data-role="header">

        <h1>订单显示</h1>

    </div>

    <ul id="orderList" data-role="listview" data-theme="c"/>

</div>

<div data-role="page" data-add-back-btn="true" id="peoples">

    <div data-role="header">

        <h1>选人</h1>

    </div>

    <ul id="userList" data-role="listview" data-theme="c"/>

</div>

<div data-role="page" data-add-back-btn="true" id="restaurants">

    <div data-role="header">

        <h1>选餐厅</h1>

    </div>

    <ul id="restaurantList" data-role="listview" data-theme="c"/>

</div>

<div data-role="page" data-add-back-btn="true" id="foods">

    <div data-role="header">

        <h1>选套餐</h1>

    </div>

    <ul id="foodList" data-role="listview" data-theme="c"/>

</div>

</body>

</body>

</html>

改写后的HAML文件如下：

!!! Mobile

%html

  %head

    %meta{:charset=>"utf-8"}

    %meta{:name=>"viewport", :content=>"width=device-width, initial-scale=1"}

    %title 订餐

    %link{:rel=>'stylesheet', :href=>'lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.css'}

    %link{:rel=>'stylesheet', :href=>'css/application.css'}

    %script{:src=>'lib/jquery.js', :type=>'text/javascript'}

    %script{:src=>'lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js', :type=>'text/javascript'}

    %script{:src=>'data/foods.json', :type=>'text/javascript'}

    %script{:src=>'data/restaurants.json', :type=>'text/javascript'}

    %script{:src=>'data/users.json', :type=>'text/javascript'}

    %script{:src=>'js/application.js', :type=>'text/javascript'}

  %body

    %div#main{:data => {:role=>'page'}}

      %div{:data=> {:role=>'header'}}

        %h1 订餐

      %div{:data=> {:role=>'content'}}

        %a{:href=>'#order', :data=> {:role=>'button'}} 帮订餐

        %a{:href=>'#orders', :data=> {:role=>'button'}} 看订单

    %div#order{:data=> {:role=>'page'}}

      %div{:data=> {:role=>'header'}}

        %a{:href=>'#main', :data=> {:icon=>'back'}} Back

        %h1 订餐

      %div{:data=> {:role=>'content'}}

        %label 人:

        %input#user{:type=>'text',:name=>'name',:readonly=>'true'}

        %a{:href=>'#peoples', :data=> {:role=>'button'}} 选人

        %label 餐厅:

        %input#restaurant{:type=>'text',:name=>'name',:readonly=>'true'}

        %a{:href=>'#restaurants', :data=> {:role=>'button'}} 选餐厅

        %label 套餐:

        %input#food{:type=>'text',:name=>'name',:readonly=>'true'}

        %a{:href=>'#foods', :data=> {:role=>'button'}} 选人

        %a#confirm{:data=> {:role=>'button'}} 确定

    %div#orders{:data=> {:role=>'page', :add_back_btn=>'true'}}

      %div{:data=> {:role=>'header'}}

        %h1 订单显示

      %ul#orderList{:data=> {:role=>'listview'},:data=> {:theme=>'c'}}

    %div#peoples{:data=> {:role=>'page',:add_back_btn=>'true'}}

      %div{:data=> {:role=>'header'}}

        %h1 选人

      %ul#userList{:data=> {:role=>'listview'},:data=> {:theme=>'c'}}

    %div#restaurants{:data=> {:role=>'page',:add_back_btn=>'true'}}

      %div{:data=> {:role=>'header'}}

        %h1 选餐厅

      %ul#restaurantList{:data=> {:role=>'listview',:theme=>'c'}}

    %div#foods{:data=> {:role=>'page', :add_back_btn=>'true'}}

      %div{:data=> {:role=>'header'}}

        %h1 选套餐

      %ul#foodList{:data=> {:role=>'listview',:theme=>'c'}}

Haml的确让代码变得更短了，对于编写速度的提升目前还没有感受，因为，对于非常熟悉HTML语法的程序员来说，Haml的一些习惯还是会让我们填不少的坑，但是一个工具一定是在你熟练使用的时候才能提升你的效率，如果，对于Haml和Html5同样熟悉的开发人员，Haml的确是更有效率的工具。

HAML学习的更多相关文章

  1. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  2. Node.js 学习资源

    这篇文章编译整理自Stack Overflow的一个如何开始学习Node.js的Wiki帖,这份资源列表在SO上面浏览接近60万次,数千个收藏和顶.特意整理发布到这里,其中添加了部分中文参考资料. 学 ...

  3. Github上PHP资源汇总大全，php学习的好资料

    Github上PHP资源汇总大全,php学习的好资料 国外程序员ziadoz 在Github上收集整理了PHP的各种资源,内容包括模板.框架.数据库.安全等方面的库和工具.汇总了各种PHP资源,供各位 ...

  4. 转：Java学习路线图

    作者: nuanyangyang 标  题: Java学习路线图(整理中,欢迎纠正) 发信站: 北邮人论坛 (Mon Aug 11 19:28:16 2014), 站内   [以下肯定是不完整的列表, ...

  5. haml、sass简单的解释

    1. Haml 全名为 HTML Abstract Markup Language,主要就是让开发者能够使用缩排的方式撰写 HTML,做到永不忘记关 Tag 的效果. 例如:%h1= "He ...

  6. sass的学习笔记

    sass初学入门笔记(一) 我本身是个新手,一边学sass一边记下的笔记,可能有点罗嗦,但是复习起来的话还是比较全面直观的.当然,最重要的还是去实践,实践得真理 其它 CSS 预处理器语言: CSS ...

  7. [转]SCSS 和 SASS 和 HAML 和CoffeeScript

    Asset Pipeline 提供了内建直接使用 Sass 撰写 CSS 的功能. 你也许会生出这样的疑惑:什么是 Sass? Why should I care? Sass (Syntactical ...

  8. 从直播编程到直播教育：LiveEdu.tv开启多元化的在线学习直播时代

    2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...

  9. Angular2学习笔记（1）

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

随机推荐

  1. MySQL数据库恢复的经历。

    蛋疼,定时任务设置错误.把数据给删除了.还有一次是服务器时间不对,也把数据给删除了. 还好,开启了二进制日志,才算把数据找回,但是速度效率也太低. 痛定思变.在把一切交由电脑工作的时候,也要做好一定的 ...

  2. jQuery获取页面及个元素高度、宽度【转】

    获取浏览器显示区域(可视区域)的高度 :    $(window).height();    获取浏览器显示区域(可视区域)的宽度 : $(window).width();    获取页面的文档高度 ...

  3. java.lang.SecurityException: class "javax.servlet.FilterRegistration"（spark下maven）

    今天写spark例子用到maven,但是自己maven又不熟悉.遇到错误找了半天知道是(sevlet-api2.5 3.0)包冲突需要解决包之间依赖问题却不知道怎么下手.但是最终慢慢了解还是找到新手的 ...

  4. 要将serviceLocator注入到任何类中

    如果想要在任何类中都用到zf2的serviceLocator, 在类中实现serviceLocatorAwareInterface,然后getServiceConfig 方法中注册成服务即可直接使用该 ...

  5. Swiper说明及API手册说明

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

  6. 【NOIP2013】【P1441】花匠

    又一次看错题…… 原题: 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希望剩下的花排列得比 ...

  7. Android应用开发高效工具集1---ant构建简单Android项目

    本文转载于:http://blog.csdn.net/lincyang/article/details/40950153 在java编译那些事儿中提到了用ant去编译Java项目,今天扩展到用它来构建 ...

  8. DYNAMIC_DOWNCAST、STATIC_DOWNCAST、CRuntimeClass和IsKindOf

    DYNAMIC_DOWNCAST.STATIC_DOWNCAST.CRuntimeClass和IsKindOf   DYNAMIC_DOWNCAST(class, pointer ):如果pointe ...

  9. 在CentOS上安装Python

    首先我们需要在服务器上安装一个比较新的 Python,CentOS 5.8 默认装的 Python 是 2.4.3. [root@nowamagic ~]# python -V Python 我们需要 ...

  10. c# 获取 webbrowser 完整 cookie

    下面的代码实现的功能确实如标题所言,但要求是获取的是当前进程内的webbrowser,跨进程或引用的ShellWindows对象无效, 哎我本来两种情况都要用,只把前者代码先记下: internal ...