Jade是一款基於haml的html模版引擎，采用JavaScript實現，可以方便地在Node.js、Yeoman等框架中使用。
文檔
安裝
在Node中安裝Jade的方法如下：
npm install jade
在Yeoman中，安裝及配置過程較為復雜，具體方法請參看Grunt 之 Jade自動化生成的實現(待寫)。
靜態語法
在本文中，將會介紹如何用簡單的Jade模版語言來生成所需的HTML代碼，可以極大減少代碼量和提高可讀性。
Jade同時具有很多的動態語言特性，本文中不詳細涉及。
首先，我們來對比一下xml和json的特性，xml一個很大的缺點就是需要2倍的標簽以及4倍的尖括號，雖然機器能夠有效識別但十分不便於書寫。另外，xml標簽這樣成對出現也同時增加了錯誤率，降低了可讀性。所以現在越來越多的人用json而非傳統的xml。
同樣的，html和xml的語法非常相似，缺點也是非常相似，所以這里我們來介紹一種新的更為簡潔清晰的模版語言 —— Jade。
第一步，我們來了解一下jade的基本靜態語法部分。
對於一個經典的html代碼如下：
<html lang="en">
<head>
<title>Jade</title>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container" class="col class1 class2">
<p>You are amazing</p>
<p>
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
</p>
</div>
</body>
</html>
我們也可以用jade來寫：
html(lang="en")
head
title= pageTitle
body
h1 Jade - node template engine
#container.col.class1.class2
p You are amazing
p.
Jade is a terse and simple
templating language with a
strong focus on performance
and powerful features.
通過上面的例子，相信大家都能很快了解Jade的語法模式，主要概括一下有以下幾點：
- 標簽名稱不變，無需使用尖括號
< >圍繞。 - 標簽不具有嵌套性，使用縮進來表示嵌套關系，每級縮進相當於一層嵌套。
- 使用標簽名稱后
#someid來表示id屬性，無需再使用屬性名id＝‘someid’。 - 使用標簽名稱后
.someclass來表示class屬性，多個class可連續使用。 - 對於帶有id或class屬性的
div標簽，可以省略div不寫。 - 對於其他屬性，在標簽名后使用括號
( )來圍繞，與html的標簽屬性使用方式相同，也可用逗號分隔。 - 在標簽名稱和所有屬性后使用一個空格來分隔其文本內容，即從每個標簽名稱開始第一個不在屬性內的空格之后的內容都將識別為文本。
- 對於多行文本，在標簽的所有屬性之后使用單獨的
.，其下級縮進的內容都將視為文本。
掌握上面的內容基本就已經可以用Jade來寫代碼了，不過接下來還是說一下其他的一些語法。
對於嵌套來說，除了使用上面的縮進方法外，如果是只有一個子元素，可以使用: 來實現嵌套。例如：
ul#books
li
a(href="#book-a") Book A
li
a(href="#book-b") Book B
該列表中，由於每個li下都只有一個a標簽，故也可寫作：
ul#books
li: a(href="#book-a") Book A
li: a(href="#book-b") Book B
注意：冒號后面一定要有一個空格！
對於多行文本，如果同時具有子元素的話，使用.會導致無法識別子元素，故需要使用另一種標識符|，例如：
ul#books
p
| foo bar
| hello world
p 這是子元素而非另一行文字
當然，這樣的缺點就是對於多行文字的每一行都要有一個|。
過濾器
通過過濾器功能，可以在jade模版中快速套用其他語言，比如寫作本文的markdown或者能夠替代js的coffee script：
:markdown
# Markdown
+ line 1
+ line 2
> It's quote
I often like including markdown documents.
script
:coffee
console.log 'This is coffee script'
限於篇幅，這里就不對Markdown語言和Coffee Script做介紹了。
過濾器和單元素嵌套一樣使用冒號，但是注意，過濾器的冒號后面沒有空格！
動態特性
到上面為止，似乎Jade相對於haml都沒有什么實質性改變，只是對於html的一種簡化方式，使用很多編譯器插件也可以實現類似的簡化書寫能力。而實際上，Jade遠不僅僅是一種靜態語言，它同時也能實現很多需要腳本語言才能實現的動態特性，比如賦值、循環、判斷等等。
在任何一門動態語言中，變量是永遠不可或缺的，這也是和標記性語言的根本區分標識。
在Jade中，使用和C系語言相似的方式進行賦值和運算：
foo = "hello"
tmp = "world" + "!"
h1= foo
span= tmp
對於上面的代碼，可能很多人第一眼看到都會有一個疑問，Jade怎么知道等號左邊是變量名還是標簽呢？
再仔細看看，很快就會發現，又是傳說中的空格在作祟，變量后面等號前必須加空格，而標簽直接接等號，不能加空格！
其實Jade中還有另一種賦值語句，用的不是=而是!=。這里可能會有一些凌亂，!=不是條件語句中的不等於邏輯運算符么？在Jade中，!=確實是不等於的邏輯運算符。但是在對標簽的賦值中，也就像上面的一樣不加空格的賦值語句中，它表示另一種賦值理念：
name ＝ "Hello <em>World</em>"
li= name
li!= name
生成的html代碼為：
<li>Hello <em>World</em></li>
<li>Hello <em>World</em></li>
從上面可以看出，使用=會直接賦予純文本而非html代碼，如果需要產生的值是直接html代碼的話，需要使用!=來防止轉換！
補充一點，除了在Jade文件中對變量賦值，Jade還支持在編譯時對變量賦值的特性，區別在於變量從模版中分離，從而可以在動態賦予相應的內容。
接下來，我們來稍微接觸一下Jade的流程控制語句：
books ＝ ["A", "B", "C"]
select
each book, i in books
option(value=i) Book #{book}
上面可以生成具有類似結構的多個option：
<select>
<option value="0">Book A</option>
<option value="1">Book B</option>
<option value="2">Book C</option>
</select>
除此之外，還有if-else,unless-else,case-when等條件控制語句，此處不做詳述，如有需要可以訪問官方文檔。
就工程上來說，這些內容可能真的用不到或者不會用的。Jade的動態特性是根據條件動態的生成對應的HTML，而目前來說，因為JavaScript的存在，HTML本身就已經是動態的了，而且這些動態過程大多並不是在編譯成HTML時能夠確定的，而是在用戶瀏覽HTML的過程中實時確定；相反，需要在Jade編譯成HTML進行邏輯判斷的東西，也都能直接通過JavaScript的動態特性來實現，特別是現在已經有了各種各樣的JavaScript框架。
雖然Jade在設計上考慮了很多方面，不過對於我們開發人員來說最需要的可能還是其對HTML本身的語法簡化部分，Jade的動態特性部分建議不要濫用。
本站地址： http://trotyl.github.io/