HAML学习笔记

晏富

2023-12-01

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

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

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

[b]Haml的语法[/b]
[img]http://dl.iteye.com/upload/attachment/0079/5566/c593d25e-4640-35f9-87cd-ac05aba53937.png[/img]

[b]从Html到Haml[/b]
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学习笔记

相关阅读

相关文章

相关问答

相关文档