`

HAML学习笔记

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

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的确是更有效率的工具。
  • 大小: 113 KB
分享到:
评论

相关推荐

    为什么要使用HAML和SASS

    标题“为什么要使用HAML和SASS”涉及到的是前端开发中的两个重要工具——HAML(HTML Abstraction Markup Language)和SASS(Syntactically Awesome Style Sheets)。这两个工具都是为了提高HTML和CSS编码的效率和...

    MtHaml:PHP实现的HAML模板语言类库.zip

    $haml = new Haml(); $html = $haml-&gt;render('path/to/your/file.haml'); echo $html; ``` `MtHaml` 提供了一些自定义配置选项,如设置输出的 HTML 版本、开启或关闭 CSS 选择器支持等。通过调整这些配置,你可以...

    Ruby-Haml是一个HTML的模板引擎

    **Ruby-Haml:高效简洁的HTML模板引擎** Ruby-Haml是一种高效的HTML模板引擎,它以简洁、易读的语法简化了HTML的...通过学习和掌握Haml,开发者能够更好地组织和管理他们的代码,从而在Web开发领域中提升专业技能。

    前端项目-clientside-haml-js.zip

    这个项目的目标是帮助前端开发者在浏览器端直接编译Haml模板,以实现更高效、更简洁的前端代码编写。 Haml是一种预处理语言,旨在提高HTML代码的可读性和简洁性。它通过缩进和简化的语法减少HTML的冗余,使得代码...

    让脚手架直接生成Haml模板

    你可能需要在`app/views/scaffolds`目录下创建Haml版本的模板文件,如`index.haml`, `show.haml`, `new.haml`, `edit.haml`等,以便脚手架可以使用这些模板。 4. **使用插件**:有些Rails插件,如`haml-rails`,...

    MtHaml:PHP实现的HAML模板语言类库

    学习 MtHaml 需要理解HAML的基本语法,同时掌握如何在PHP项目中集成和使用。可以通过官方文档、教程和示例代码来快速上手。随着熟练度的提升,可以探索如何利用 MtHaml 提高代码质量,优化模板性能,以及如何与其他...

    Laravel开发-laravel-blade-haml

    **Laravel 开发:深入理解 Laravel Blade 和 HAML** 在 Laravel 框架中,Blade 是一个强大的模板引擎,它允许开发者以简洁且可读性强的语法编写视图。Blade 提供了 PHP 代码与 HTML 的无缝集成,使得在处理复杂的...

    haml-to-php:PHP的haml实现

    编写类似于ruby的haml实现的代码 在错误的标签嵌套上失败,例如table&gt; td&gt; tr 图书馆支持 请参阅如果您将对haml-to-php.com的支持添加到框架中,我想参考您的工作。 我知道的相关工作 请参阅此处。 最引人注目。 ...

    haml:HTML抽象标记语言-标记Haiku

    将Haml与Rails一起使用要将Haml与Rails一起使用,只需将Haml添加到您的Gemfile中并运行bundle 。 gem 'haml' 如果您想用Haml替换基于Rails基于Erb的生成器,请将也添加到您的Gemfile中。格式化Haml的最基本元素是...

    ruby-haml-loader:使用实际Ruby`haml`的Webpack Haml加载器

    用于Webpack的Ruby Haml加载程序 将Haml文件作为模块导入Webpack项目中。 返回渲染的模板。 这很慢。 它是为临时使用而创建的,直到转换为Jade。 此自述文件基于自述文件。 设置 添加到您的webpack配置模块....

    Haml2Html:一个易于使用的编译器,用于使用Haml&Sass开发静态页面

    用法将所有.haml文件保存在/app/views 将所有.sass文件保存在/app/styles 要观看文件运行(在终端中): ./watch要停止观看: Control + C就是这样! 所有已编译的Haml文件都存储在/compiled/ 所有已编译的Sass文件...

    hamlet-compiler:Haml 的形式化语法

    《哈姆雷特编译器:Haml的形式化语法详解》 ...然而,随着技术的发展,为了提高开发效率和代码的可读性,出现了许多预处理器,如Haml...通过学习和使用这个工具,你将能够创建出更加优雅、易于维护的Web应用界面。

    herbalizer:转换HAML到ERB

    用Haskell编写的HAML到ERB转换器。 该程序将模板转换为 。 为什么 很多人更喜欢HAML而不是ERB。 但不是每个人,也不是每个情况都如此。 ERB更简单,更容易记住规则,并且对HTML熟悉的人都可以访问。 ERB模板更易于...

    前端开源库-ewg-haml-coffee-gulp

    "前端开源库-ewg-haml-coffee-gulp"是一个专为前端开发者设计的项目,它整合了三个重要的技术: EWG HAML、CoffeeScript 和 Gulp。 首先,让我们深入了解一下这三个核心组件: 1. **EWG HAML**: EWG HAML是一种...

    s-ublime-text-haml-sass-master.zip

    "s-ublime-text-haml-sass-master.zip"这个压缩包文件显然是为Sublime Text 2设计的一个扩展资源,目的是为了增强其对HAML和SASS这两种语言的支持。 HAML(HTML Abstraction Markup Language)是一种简洁、清晰的...

    基于Ruby的Haml模板引擎设计源码

    本项目是基于Ruby的Haml模板引擎设计源码,包含149个文件,主要文件类型为rb、haml、xhtml、erb、x、md、gitignore、gitmodules、yml和yardopts。该项目适用于Haml模板引擎的开发和设计,为用户提供了一个丰富的资源...

    yii-haml:Yii 框架的 HAML 视图渲染器

    Yii 框架的 HAML 视图渲染器 yii-haml是扩展,它为您的视图带来了功能。 基于项目的分支。 使用 Composer 安装 将此添加到您的composer.json : " repositories " : [ { " type " : " composer " , " url " : ...

    gulp-ruby-haml:用于Gulp的Haml插件,使用Ruby Haml gem

    gulp-ruby-haml 这是一个,将使用该插件haml命令行脚本编译Haml的文件转换成HTML。 您需要同时安装Ruby和Haml才能使用此功能。 尝试gem install haml 。 如果使用 ,请将gem 'haml'添加到Gemfile中,然后运行bundle...

    Notebook:使用Ruby on Rails,HAML和CSS的笔记本应用

    2. HAML模板语言:学习HAML的语法和特性,以及如何用它来编写简洁、优雅的HTML模板。 3. CSS样式设计:掌握CSS选择器、盒模型、布局方式(如Flexbox或Grid),以及响应式设计,以实现美观且适应不同屏幕尺寸的界面。...

    haml-lint:编写干净且一致的HAML的工具

    HAML-Lint haml-lint是一种帮助保持文件清洁和可读的工具。 除了特定于 HAML 的样式和 lint 检查之外,它还与集成以将其强大的静态分析工具带到您的 HAML 文档中。 您可以从命令行手动运行haml-lint ,也可以将其...

Global site tag (gtag.js) - Google Analytics