Hamlit — 把HTML寫得更好更快

HTML作為標記語言,語法簡單,理解容易。但對很多開發人員卻是很痛苦的。

若忘了關閉標記,或者配對錯誤,聰明的瀏覽器能幫你自動糾正,但在用家的瀏覽器,特別是手機版本,大多都不是很聰明。這些小小的錯誤,引致版面出現各種奇怪狀況。

從官方網頁抓下來的

Haml叫開發員放棄直接寫HTML(erb),取而代之,以更嚴謹的語法標記資料。寫好後,再由Haml編譯器轉換回HTML。倘若標記有錯,編譯器會直接指出,提高代碼質量。

Haml曾風靡一時,然而Ruby原版的Haml編譯器實在太慢了,erb新特性亦欠奉,故此被後繼者Slim追上。

可幸2015年Hamlit出現了。在刪減一些周邊功能下,它的Haml編譯器比原版Haml的快得多,整體更比Slim快一些。

很多項目無須複雜介面互動,我認為turbolinks+HTML已經很足夠,沒有必要用上Angular/ReactJS/VueJS


設定

(1) 把Gem加進Gemfile

gem 'hamlit'

(2) 執行bundle install安裝Hamlit

完成!

更詳盡的設定可以看Gem的GitHub ReadMe

使用

本篇只列出常用功能
完整功能可參閱的
官方文檔方

Haml主要以下列12種方式來簡化及壓縮HTML (erb):

(1) 以%tag取代<tag>

(2) 標記內容寫在標記後面,亦可縮進(indent)一格寫在下一行

(3) 無須關閉標記

HTML

<br/>
<div>Hello World</div>

Haml

%br
%div Hello World
-#Or
%div
Hello World

(4) 以縮進處理網狀結構的標記(Nested Tags)

HTML

<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>

Haml

%ul
%li One
%li Two
%li Three

(5) 標記內的屬性放在括號內

HTML

<div id="header">Hello World</div>

Haml

%div(id="header") Hello Wolrd
-#Or
%div{id:"header"} Hello Wolrd

(6) Id以及Class分別能以#.寫在標記後面

(7) 當加入Id或Class,而標記是div時,div則可省略

HTML

<div id="header" class="blue">Hello World</div>

Haml

#header.blue Hello Wolrd

(8) 以-執行Ruby語句,或創建block

(9) 以=輸出字串,亦可以使用符號組合#{}

(10) 循環及條件判斷不需要以end作結

HTML+erb

<div id="header" class="blue"><%=@header %></div>
<% if @posts.size > 0 %>
<% @posts.each do |p| %>
<span><%=p.title %></span>
<% end %>
<% else %>
<span>No posts.</span>
<% end %>

<div id="footer" class="red"><%=@footer %></div>

Haml

#header.blue=@header
-if @posts.size > 0
-@posts.each do |p|
%span=p.title
-else
%span No posts.

#footer.red #{@footer}

(11) 處理Haml的特殊字符時,可使用\

HTML

<title>= @title</title>

Haml

%title
\= @title

(12) 支援其他語法,包括CSS和Javascript

Haml

:css
.blue{
color: blue;
}
:javascript
console.log("hello world");

Slim vs Haml?

大同小異,差距不大。編輯器對Hamlit支援好一點,Slim則支援erb的串流模式。


性能測試

從缺。

可參考Hamlit GitHub Gem專頁
Like what you read? Give Adam Aiken a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.