- 浏览: 1036770 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
繁星水:
Useful!!
Object-C之(Null)与(Bool) -
pacer123:
请问注解@ApiModelProperty 在哪个jar包下面 ...
Micro Service工具集之Swagger:可测试的样式化API文档 -
sucheng2016:
这东东真的好用么/
对象转换利器之Dozer -
zzq0324:
http://git.oschina.net/zzq0324/ ...
基于Spring-WS的Restful API的集成测试 -
lrz0534:
你好,我在maven上面下载了swagger-springmv ...
Micro Service工具集之Swagger:可测试的样式化API文档
一个技术能够风靡,一定是有它的原因的,在熟悉之前,我们没有资格去对它做任何的判断。
Haml 是一种简洁优美的模板语言,使用它之后可以大大缩减模板代码,减少冗余,提高可读性。并且Haml是一种完备的模板语言,没有牺牲当前模板语言的任何特性。
Haml的使用通常有两种方式:
一是作为Ruby on Rails的插件来使用;
二是作为一个独立的Ruby module来使用。
因为Haml可以提升我们编写HTML文件的速度,同时避免一些不必要的语法错误,因此还可以使用Haml作为一个加速HTML编写的工具,当然前提条件是有一个能够快速的把HAML编译成HTML的工具。
Haml的语法
从Html到Haml
Html文件如下:
改写后的HAML文件如下:
Haml的确让代码变得更短了,对于编写速度的提升目前还没有感受,因为,对于非常熟悉HTML语法的程序员来说,Haml的一些习惯还是会让我们填不少的坑,但是一个工具一定是在你熟练使用的时候才能提升你的效率,如果,对于Haml和Html5同样熟悉的开发人员,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的确是更有效率的工具。
发表评论
-
Ruby IO之ARGF,ARGV
2013-11-23 15:44 3537在使用ruby脚本时, 经常需要用到在参数中给出文件名,然后再 ... -
Luhn算法的Ruby实现
2013-11-22 20:18 1256什么是Luhn算法? Wiki上得标准定义:http://en ... -
使用Sinatra创建Soap Web Service
2013-11-21 17:58 1535简单对象访问协议(SOAP)是一种轻量的、简单的、基于 XML ... -
Ruby之对象模型的大一统
2013-05-14 20:53 3316当前类 不同于JAVA等静 ... -
Ruby之代码块的迷思
2013-05-05 18:51 6881块的定义、调用与运行 在Ruby中,定义一个代码块的方式有2种 ... -
Ruby之方法的妙用
2013-05-01 20:18 3917方法的查找与执行 Ruby中对象的方法都定义在类中,当对象想要 ... -
Ruby之类的真相
2013-04-29 18:12 2721打开类和猴子补丁 在Ruby中,类定义的方法和其他的语句没有任 ... -
Sinatra 101(3)--自动化测试
2013-04-24 18:44 1938首先,安装rspec,非常简单 gem install rsp ... -
Sinatra 101 (2)–快速构建一个Note系统
2013-04-22 15:51 1684Views Sinatra中,默认所有的页面都放在views目 ... -
Sinatra 101(1)
2013-04-19 16:09 2204介绍 Sinatra是由 Blake Mizerany在200 ... -
Rails的MVC和路由策略
2012-07-15 20:53 1574MVC In Rails 在rails中,发送一个请求(/u ... -
End To End RoR Demo
2012-07-13 22:02 11201、生成项目架构 rails ne ... -
Ruby&CouchDB之Hello World
2012-07-09 22:20 1078require 'net/http' module Co ... -
《Rails Step by Step》之Rails的目录结构
2012-07-09 21:41 1267刚开始学Rails,因为其“约定大于配置”的特性,让开发 ... -
《松本行弘的程序世界》之让程序飞(Ruby版)
2012-07-01 00:15 1705为什么要做性能优化? “过早优化是万恶之源”,作为 ... -
Ruby之猴子补丁
2012-06-25 21:58 3924何谓猴子补丁(Monkey Patch)?在动态语言中,不修改 ... -
Cucumber 入门学习
2012-04-11 21:38 209011、Cucumber是什么 Cucumber是一个在 ... -
关于DSL(Domain Specification Language)的由来
2012-04-10 22:42 1417最近在学习Ruby的时候,看到Martin Fow ... -
GitHub的Ruby代码规范
2012-04-07 11:33 5029最近开始接触Ruby和Rails的开发,个人是一个疯狂迷 ...
相关推荐
标题“为什么要使用HAML和SASS”涉及到的是前端开发中的两个重要工具——HAML(HTML Abstraction Markup Language)和SASS(Syntactically Awesome Style Sheets)。这两个工具都是为了提高HTML和CSS编码的效率和...
$haml = new Haml(); $html = $haml->render('path/to/your/file.haml'); echo $html; ``` `MtHaml` 提供了一些自定义配置选项,如设置输出的 HTML 版本、开启或关闭 CSS 选择器支持等。通过调整这些配置,你可以...
**Ruby-Haml:高效简洁的HTML模板引擎** Ruby-Haml是一种高效的HTML模板引擎,它以简洁、易读的语法简化了HTML的...通过学习和掌握Haml,开发者能够更好地组织和管理他们的代码,从而在Web开发领域中提升专业技能。
这个项目的目标是帮助前端开发者在浏览器端直接编译Haml模板,以实现更高效、更简洁的前端代码编写。 Haml是一种预处理语言,旨在提高HTML代码的可读性和简洁性。它通过缩进和简化的语法减少HTML的冗余,使得代码...
你可能需要在`app/views/scaffolds`目录下创建Haml版本的模板文件,如`index.haml`, `show.haml`, `new.haml`, `edit.haml`等,以便脚手架可以使用这些模板。 4. **使用插件**:有些Rails插件,如`haml-rails`,...
学习 MtHaml 需要理解HAML的基本语法,同时掌握如何在PHP项目中集成和使用。可以通过官方文档、教程和示例代码来快速上手。随着熟练度的提升,可以探索如何利用 MtHaml 提高代码质量,优化模板性能,以及如何与其他...
**Laravel 开发:深入理解 Laravel Blade 和 HAML** 在 Laravel 框架中,Blade 是一个强大的模板引擎,它允许开发者以简洁且可读性强的语法编写视图。Blade 提供了 PHP 代码与 HTML 的无缝集成,使得在处理复杂的...
编写类似于ruby的haml实现的代码 在错误的标签嵌套上失败,例如table> td> tr 图书馆支持 请参阅如果您将对haml-to-php.com的支持添加到框架中,我想参考您的工作。 我知道的相关工作 请参阅此处。 最引人注目。 ...
将Haml与Rails一起使用要将Haml与Rails一起使用,只需将Haml添加到您的Gemfile中并运行bundle 。 gem 'haml' 如果您想用Haml替换基于Rails基于Erb的生成器,请将也添加到您的Gemfile中。格式化Haml的最基本元素是...
用于Webpack的Ruby Haml加载程序 将Haml文件作为模块导入Webpack项目中。 返回渲染的模板。 这很慢。 它是为临时使用而创建的,直到转换为Jade。 此自述文件基于自述文件。 设置 添加到您的webpack配置模块....
用法将所有.haml文件保存在/app/views 将所有.sass文件保存在/app/styles 要观看文件运行(在终端中): ./watch要停止观看: Control + C就是这样! 所有已编译的Haml文件都存储在/compiled/ 所有已编译的Sass文件...
《哈姆雷特编译器:Haml的形式化语法详解》 ...然而,随着技术的发展,为了提高开发效率和代码的可读性,出现了许多预处理器,如Haml...通过学习和使用这个工具,你将能够创建出更加优雅、易于维护的Web应用界面。
用Haskell编写的HAML到ERB转换器。 该程序将模板转换为 。 为什么 很多人更喜欢HAML而不是ERB。 但不是每个人,也不是每个情况都如此。 ERB更简单,更容易记住规则,并且对HTML熟悉的人都可以访问。 ERB模板更易于...
"前端开源库-ewg-haml-coffee-gulp"是一个专为前端开发者设计的项目,它整合了三个重要的技术: EWG HAML、CoffeeScript 和 Gulp。 首先,让我们深入了解一下这三个核心组件: 1. **EWG HAML**: EWG HAML是一种...
"s-ublime-text-haml-sass-master.zip"这个压缩包文件显然是为Sublime Text 2设计的一个扩展资源,目的是为了增强其对HAML和SASS这两种语言的支持。 HAML(HTML Abstraction Markup Language)是一种简洁、清晰的...
本项目是基于Ruby的Haml模板引擎设计源码,包含149个文件,主要文件类型为rb、haml、xhtml、erb、x、md、gitignore、gitmodules、yml和yardopts。该项目适用于Haml模板引擎的开发和设计,为用户提供了一个丰富的资源...
Yii 框架的 HAML 视图渲染器 yii-haml是扩展,它为您的视图带来了功能。 基于项目的分支。 使用 Composer 安装 将此添加到您的composer.json : " repositories " : [ { " type " : " composer " , " url " : ...
gulp-ruby-haml 这是一个,将使用该插件haml命令行脚本编译Haml的文件转换成HTML。 您需要同时安装Ruby和Haml才能使用此功能。 尝试gem install haml 。 如果使用 ,请将gem 'haml'添加到Gemfile中,然后运行bundle...
2. HAML模板语言:学习HAML的语法和特性,以及如何用它来编写简洁、优雅的HTML模板。 3. CSS样式设计:掌握CSS选择器、盒模型、布局方式(如Flexbox或Grid),以及响应式设计,以实现美观且适应不同屏幕尺寸的界面。...
HAML-Lint haml-lint是一种帮助保持文件清洁和可读的工具。 除了特定于 HAML 的样式和 lint 检查之外,它还与集成以将其强大的静态分析工具带到您的 HAML 文档中。 您可以从命令行手动运行haml-lint ,也可以将其...