Jade是一款高性能簡潔易懂的模板引擎，Jade是Haml的Javascript實現，在服務端（NodeJS）及客戶端均有支持。 功能 客戶端支持 超強的可讀性 靈活易用的縮進 塊擴展 代碼默認經過編碼處理以增強安全性 編譯及運行時的上下文錯誤報告
命令行編譯支持 HTML5模式（使用!!!5文檔類型） 可選的內存緩存 聯合動態和靜態標記類 利用過濾器解析樹的處理。
Jade是一款高性能簡潔易懂的模板引擎，Jade是Haml的Javascript實現，在服務端（NodeJS）及客戶端均有支持。
功能
- 客戶端支持
- 超強的可讀性
- 靈活易用的縮進
- 塊擴展
- 代碼默認經過編碼處理以增強安全性
- 編譯及運行時的上下文錯誤報告
- 命令行編譯支持
- HTML5模式（使用!!!5文檔類型）
- 可選的內存緩存
- 聯合動態和靜態標記類
- 利用過濾器解析樹的處理
- 支持 Express JS
- 利用each透明的循環objects,arrays甚至不可枚舉對象
- 塊註釋
- 不需要標記前綴
- AST過濾器
-
過濾器
- :sass 需要安裝 sass.js
- :less 需要安裝 less.js
- :markdown 需要安裝 markdown-js 或 node-discount
- :cdata
-
:coffeescript 需要安裝 coffee-script
- Vim語法文件
- TextMate包
-
Screencasts
其它語言實現
- php
- Scala
- Ruby
公開API
var jade = require('jade'); // 渲染字符串 jade.render('.csser.com 字符串', { options: 'here' }); // 渲染文件 jade.renderFile('path/to/csser.com.jade', { options: 'here' }, function(err, html){ // 這裏的options是可選的 // 回調函數可以作爲第二個參數 }); // 編譯一個函數 var fn = jade.compile('string of jade', options); fn.call(scope, locals);
Options
- scope 執行作用域（this）
- locals 本地變量對象
- filename 處理異常及緩存時使用
- cache 通過文件名將Javascript緩存在內存中
- debug 輸出生成的標記和函數體
- compiler 替換jade默認編譯引擎
語法
行尾
在解析前會將 CRLF 和 CR 轉換爲 LF.
標記
標記是一行的第一個單詞：
html
會被轉換爲 <html></html>
標記也可以有id：
div#container
這將被渲染成<div id="container"></div>
如何處理類？
div.user-details
渲染爲: <div class="user-details"></div>
多個class？並且還有id？
div#foo.bar.baz
渲染爲：<div id="foo" class="bar baz"></div>
總寫div確實很煩人，可以省略之：
#foo .bar
輸出： <div id="foo"></div><div class="bar"></div>
標記文本
只需要將文本內容放在標記後面：
p wahoo!
渲染爲 <p>wahoo!</p>.
酷，但是如何處理大段文本呢？
p | foo bar baz | rawr rawr | super cool | go jade go
渲染爲 <p>foo bar baz rawr.....</p>
內插法？是的，這兩種類型的文本都可以使用內插法，如果我們傳入{ locals: { name: '一回', email: 'xianlihua[at]gmail.c}}，om' 可以這樣做：
#user #{name} <#{email}>
輸出：<div id="user">一回 <xianlihua[at]gmail.com></div>
出於某種原因需要輸出#{}？轉義之：
p \#{CSSer, 關注Javascript技術}
這樣就得到了：<p>#{CSSer, 關注Javascript技術}</p>
也可以使用反轉義變量!{html}，下面的代碼將輸出script標記：
- var html = "<script></script>" | !{html}
包含文本的嵌套標記也可以使用文本塊：
label | Username: input(name='user[name]')
或者直接使用標記文本:
label Username: input(name='user[name]')
只接受純文本的標記，如script,style,以及textarea不需要開頭的|字符，例如：
html head title CSSer, 關注Web前端技術 script if (foo) { bar(); } else { baz(); }
再次作爲替代方案，我們可以使用點號'.'來表示一個文本塊，例如：
p. foo asdf asdf asdfasdfaf asdf asd.
輸出:
<p>foo asdf asdf asdfasdfaf asdf asd . </p>
如果點號'.'與標記之間有空格，Jade解析其會忽略它，將其作爲文本處理：
p .
輸出:
<p>.</p>
註釋
單行註釋當前看起來與Javascript一致，即“//”，單行註釋的內容必須放在同一行上：
// 一些段落 p foo p bar
將會輸出：
<!-- 一些段落 --> <p>foo</p> <p>bar</p>
Jade也支持非緩衝註釋，只需增加一個橫槓：
//- 該行註釋將不會被輸出到解析後的頁面中 p foo p bar
輸出：
<p>foo</p> <p>bar</p>
塊註釋
塊註釋會依據縮進進行處理：
body // #content h1 CSSer,關注Web前端技術
輸出：
<body> <!-- <div id="content"> <h1>CSSer,關注Web前端技術</h1> </div> --> </body>
Jade也支持條件註釋，例如：
body /if IE a(href='http://www.mozilla.com/en-US/firefox/') Get Firefox
輸出:
<body> <!--[if IE]> <a href="http://www.mozilla.com/en-US/firefox/">Get Firefox</a> <![endif]--> </body>
嵌套
Jade支持通過嵌套來以自然的方式定義標記：
ul li.first a(href='#') foo li a(href='#') bar li.last a(href='#') baz
塊擴展
塊擴展允許創建單行的簡潔嵌套標記，下面的示例與上例輸出相同：
ul li.first: a(href='#') foo li: a(href='#') bar li.last: a(href='#') baz
特性
目前Jade支持'('和')'的特性定界符。
a(href='/login', title='View login page') Login
另外我們也可以使用冒號（:）來作爲分割符：
a(href: '/login', title: '註冊成爲CSSer.com會員') Login
Boolean特性也被支持：
input(type="checkbox", checked)
值爲變量的Boolean特性只有在值爲true時輸出：
input(type="checkbox", checked: someValue)
分拆在多行也能正常解析：
input(type='checkbox', name='agreement', checked)
文檔類型
利用!!!來增加頁面的文檔類型：
!!!
將會輸出過渡型文檔類型，然而：
!!! 5
將會輸出HTML5的文檔類型，下面是默認定義的文檔類型，這也可以很容易的被擴展：
var doctypes = exports.doctypes = { '5': '<!DOCTYPE html>', 'xml': '<?xml version="1.0" encoding="utf-8" ?>', 'default': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">', 'transitional': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">', 'strict': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">', 'frameset': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">', '1.1': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">', 'basic': '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">', 'mobile': '<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">' };
要修改默認值只需改變：
jade.doctypes.default = 'whatever you want';
過濾器
過濾器以冒號（:）作爲前綴，如 :markdown 將會對文本進行函數處理，（一回注：類似Smarty的變量調節器），本頁開始處列出了目前Jade支持的過濾器。
body :markdown Woah! jade _and_ markdown, very **cool** we can even link to [CSSer](http://www.csser.com)
渲染後:
<body><p>Woah! jade <em>and</em> markdown, very <strong>cool</strong> we can even link to <a href="http://www.csser.com">CSSer</a></p></body>
過濾器也可以處理解析樹，通常過濾器可以正常處理文本塊，但是通過傳入規則的塊過濾器可以做任何它能做的。
body conditionals: if role == 'admin' p You are amazing else p Not so amazing
代碼
Jade目前支持三種類型的可執行代碼，第一種以-爲前綴，不會被緩衝：
- var foo = 'bar';
這可被用於條件或循環：
- for (var key in obj) p= obj[key]
由於Jade的緩衝技術，下面的代碼是有效的：
- if (foo) ul li yay li foo li worked - else p oh no! you are not in csser.com
甚至詳細的迭代循環：
- if (items.length) ul - items.forEach(function(item){ li= item - })
任何你希望的都可以實現！
接下來我們轉義了緩衝代碼，用於緩衝返回值，以等號（=）作爲前綴：
- var foo = 'bar' = foo h1= foo
輸出： bar<h1>bar</h1>. 被'='緩衝的代碼會默認經過轉義以增強安全性，要輸出爲轉義的值需要使用 !=：
p!= aVarContainingMoreHTML
一個允許使用"vanilla"Javascript的例外，是 - each 標記，其表現形式爲：
- each VAL[, KEY] in OBJ
實現循環數組的例子：
- var items = ["one", "two", "three"] - each item in items li= item
輸出:
<li>one</li> <li>two</li> <li>three</li>
循環對象的鍵和值：
- var obj = { foo: 'bar' } - each val, key in obj li #{key}: #{val}
這會輸出 <li>foo: bar</li>
也可以進行嵌套循環：
- each user in users - each role in user.roles li= role
當一個屬性爲undefined，Jade會輸出空串，例如：
textarea= user.signature
近期的Jade版本會輸出空字符串而不是undefined：
<textarea></textarea>
命令行工具：bin/jade
輸出html到標準輸出（stdout）：
jade examples/*.jade --pipe
生成 examples/*.html ：
jade examples/*.jade
傳入參數：
jade examples/layout.jade --options '{ locals: { title: "CSSer" }}'
[完]
轉自:http://www.csser.com/board/4f3f516e38a5ebc978000508#/post/4f54fd1bb439efec21000076
