Jade笔记
這只是我的Jade筆記，完整的Jade教程請參考Jade 官方的英文文檔和https://www.w3cplus.com/html/how-to-use-jade.html
簡介
Jade是編寫HTML模板的簡潔語言，簡稱模板引擎，其實(shí)就是 HTML 預(yù)處理語言，非常類似 Sass 之于 CSS。其特點(diǎn)如下：
- 生成HTML
- 支持動(dòng)態(tài)代碼
- 支持可重用性（DRY）
- 采用對縮進(jìn)敏感的語法形式，提高了可讀性，省略了一些界定符號（大括號、尖括號……）
安裝
通過npm：npm install jade -g
查看版本：jade -v
編譯
通過gulp-jade編譯：
var gulp= require('gulp'); var jade= require('gulp-jade');gulp.task("jade",function(){gulp.src("./jade/*.jade").pipe(jade({pretty:true})).pipe(gulp.dest("html/")) })gulp.task("default",["watch"],function(){gulp.watch("jade/*.jade",["jade"]); })標(biāo)簽
標(biāo)簽是 HTML 的核心元素。默認(rèn)情況下，文本在行的開頭（或者僅在空格之后）代表一個(gè)html標(biāo)記。縮進(jìn)標(biāo)簽嵌套，創(chuàng)建像html結(jié)構(gòu)的樹。
一般用法
在 Jade 中創(chuàng)建一個(gè)列表：
ulli Item Ali Item Bli Item C生成的 HTML：
<ul><li>Item A</li><li>Item B</li><li>Item C</li> </ul>就是這么簡單，再也不用顧慮標(biāo)簽閉合了嗎、shift 鍵在哪啊，全程無壓力高速輸出！唯一需要記住的就是用統(tǒng)一的縮進(jìn)來嵌套標(biāo)簽。
提示：如果環(huán)境已經(jīng)正確安裝，那么大多數(shù)情況下的錯(cuò)誤都是縮進(jìn)惹的禍，一定一定要保持一致的縮進(jìn)格式，建議統(tǒng)一將 tab 鍵輸出為空格，并采用 4 個(gè)空格作為標(biāo)準(zhǔn)縮進(jìn)。
內(nèi)聯(lián)語法
為了節(jié)省空間，jade提供嵌套標(biāo)簽的內(nèi)聯(lián)語法。
a: img <a><img/></a>自閉合標(biāo)簽
標(biāo)簽如img，meta，link等都是自動(dòng)關(guān)閉（除非您使用XML文檔類型）。jade能自動(dòng)識別自閉合標(biāo)簽，input會(huì)編譯成<input/>。您也可以通過簡單地附加/字符來明確地自行關(guān)閉標(biāo)簽。只有在你知道你在做什么的時(shí)候才這樣做。
foo/ foo(bar='baz')/ <foo/> <foo bar="baz"/>標(biāo)簽中有大段的塊內(nèi)容
方式一：在標(biāo)簽后面添加 .
比如一段js代碼，注意是script后面有一個(gè).
script.console.log('Welcome to join wandoujia-fe')console.log('We want you') <script>console.log('Welcome to join wandoujia-fe')console.log('We want you') </script>方式二：每段前面添加|
script| console.log('Welcome to join wandoujia-fe')| console.log('We want you')注釋
Jade 支持兩種注釋：單行注釋和多行注釋。每種注釋支持兩種模式：輸出到源文件和不輸出到源文件。
在 Jade 中創(chuàng)建一個(gè)單行輸出注釋和單行不輸出注釋：
// 這個(gè)單行注釋會(huì)輸出到編譯后的文件中 p 單行輸出注釋 //- 這個(gè)單行注釋不會(huì)輸出到編譯后的文件中 p 單行不輸出注釋 <!-- 這個(gè)單行注釋會(huì)輸出到編譯后的文件中--> <p>單行輸出注釋</p> <p>單行不輸出注釋</p>由上可見，輸出和不輸出的差別就在于多了一個(gè) -，謹(jǐn)記！
相比起單行注釋，多行注釋的內(nèi)容要在注釋符號的下一行，以相同的縮進(jìn)來編寫。多行注釋的輸出和不輸出模式和單行注釋相同，需要使用 - 標(biāo)記：
//這個(gè)多行注釋會(huì)輸出到編譯后的文件中這個(gè)多行注釋會(huì)輸出到編譯后的文件中 p 多行輸出注釋 //-這個(gè)多行注釋不會(huì)輸出到編譯后的文件中這個(gè)多行注釋不會(huì)輸出到編譯后的文件中 p 多行不輸出注釋 <!-- 這個(gè)多行注釋會(huì)輸出到編譯后的文件中 這個(gè)多行注釋會(huì)輸出到編譯后的文件中 --> <p>多行輸出注釋</p> <p>多行不輸出注釋</p>Jade沒有任何特別的條件注釋語法。如果你的行以<開始，那么它被視為純文本。所以只需使用普通的HTML syle條件注釋：
<!--[if IE 8]> <html lang="en" class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->doctype
添加一個(gè)doctype只需要doctype，然后再跟一個(gè)可選的值，默認(rèn)是html
doctype html會(huì)轉(zhuǎn)換為：
<!DOCTYPE html>屬性
一般用法
在 Jade 中填寫屬性，基本上和 HTML 保持了一致：
input(type='checkbox', checked) input(type='checkbox'name='agreement'checked ) <input type="checkbox" checked> <input type="checkbox" name="agreement" checked>注意：布爾屬性沒有值時(shí)默認(rèn)為true。
但是，你見過可以根據(jù)條件設(shè)置屬性的語法形式嗎？這里就有：
- var authenticated = true body(class=authenticated ? 'authed' : 'anon') - var currentUrl = '/about' a(class={active: currentUrl === '/'} href='/') Home a(class={active: currentUrl === '/about'} href='/about') About <body class="authed"></body> <a href="/">Home</a><a href="/about" class="active">類名和ID名
對于頻繁使用到的類名和 ID 名，Jade 提供了兩種字面量：類名字面量和 ID 字面量——非常類似 Emmet 的用法。如果不在字面量前邊指定標(biāo)簽名，則默認(rèn)使用 div:
.link a.link #button a#button <div class="link"></div> <a class="link"></a> <div id="button"></div> <a id="button"></a>1個(gè)id和多個(gè)class，連著寫即可：
a#download-btn.btn.blue-btn <a id="download-btn" class="btn blue-btn"></a>也可以通過一個(gè)類名稱的數(shù)組來實(shí)現(xiàn)：
- var classes = ['foo', 'bar', 'baz'] a(class=classes) //- 也可以重復(fù)類屬性來合并數(shù)組 a.bing(class=classes class=['bing']) <a class="foo bar baz"></a> <a class="bing foo bar baz bing"></a>style
style 屬性可以是一個(gè)字符串（像任何正常屬性），但它也可以是一個(gè)對象。為了更方便地修改該屬性，Jade 接收一個(gè)類似 JavaScript 對象類型的參數(shù)：
a(style={color: 'red', background: 'green'}) <a style="color:red;background:green"></a>&attributes
為了更方便地添加其他自定義屬性，jade 特意增加了一個(gè)語法格式 &attributes：
- var attributes = {'data-foo': 'bar'}; div#foo(data-bar="foo")&attributes(attributes) <div id="foo" data-bar="foo" data-foo="bar"></div>注意：應(yīng)用的屬性&attributes不會(huì)自動(dòng)轉(zhuǎn)義。您必須確保對任何用戶輸入進(jìn)行sanatize以避免 跨站點(diǎn)腳本。如果你的attributes是從一個(gè)mixin調(diào)用中傳入的，這個(gè)就完成了。
非轉(zhuǎn)義屬性
默認(rèn)情況下，所有屬性都被轉(zhuǎn)義（用轉(zhuǎn)義序列替換特殊字符）以防止諸如跨站點(diǎn)腳本攻擊。如果你需要使用特殊字符，你可以使用!=而不是=。
div （escaped = "<code>" ） div （unescaped != "<code>" ） <div escaped = "<code>" > </ DIV> <div unescaped = "<code>" > </ div>注意：未轉(zhuǎn)換的緩沖代碼可能是危險(xiǎn)的。您必須確保對任何用戶輸入進(jìn)行sanatize以避免 跨站點(diǎn)腳本
文本
Jade 支持三種文本輸出方式：單行文本、管道文本和多行文本：
// 單行文本內(nèi)容直接跟在標(biāo)簽名后面 p 這里是單行文本內(nèi)容 // 管道文本使用管道符 p| 這是一行管道文本，行數(shù)無限制| 這是一行管道文本，行數(shù)無限制| 這是一行管道文本，行數(shù)無限制| …… // 多行文本需要在標(biāo)簽名后添加點(diǎn)號 p.這是多行文本，注意縮進(jìn)這是多行文本，注意縮進(jìn)這是多行文本，注意縮進(jìn) <!-- 單行文本內(nèi)容直接跟在標(biāo)簽名后面--> <p>這里是單行文本內(nèi)容</p> <!-- 管道文本使用管道符--> <p>這是一行管道文本，行數(shù)無限制這是一行管道文本，行數(shù)無限制這是一行管道文本，行數(shù)無限制…… </p> <!-- 多行文本需要在標(biāo)簽名后添加點(diǎn)號--> <p>這是多行文本，注意縮進(jìn)這是多行文本，注意縮進(jìn)這是多行文本，注意縮進(jìn) </p>代碼嵌入
將 JavaScript 嵌入到 Jade 中，一共有三種方法。第一種方式是使用 -，代碼中的特殊字符不會(huì)被轉(zhuǎn)義：
- for (var x = 0; x < 3; x++) li <a></a> <li><a></a></li> <li><a></a></li> <li><a></a></li>第二種方法是使用 =，代碼中的特殊字符將會(huì)被轉(zhuǎn)義：
p= 'This code is <escaped>!' <p>This code is <escaped>!</p>第三種方法是使用 !=，代碼中的特殊字符不會(huì)被轉(zhuǎn)義：
p!= 'This code is <escaped>!' <p>This code is <escaped>!</p>插值語法
使用插值語法，預(yù)先指定一個(gè)位置，方便以后插入一個(gè)新值，簡稱插值。
Jade 提供了字符串插值和標(biāo)簽插值。其中，字符串插值由于要考慮到安全性問題，所以又分成了轉(zhuǎn)義和不轉(zhuǎn)義兩種情況：
// 轉(zhuǎn)義字符串插值 `#{}` - var theGreat = "<span>escape!</span>"; p This will be safe: #{theGreat} // 不轉(zhuǎn)義字符串插值 `!{}` - var theGreat = "<span>escape!</span>"; p This will be safe: !{theGreat} // 標(biāo)簽插值 p #[a(href="jade-lang.com") Jade] <!-- 轉(zhuǎn)義字符串插值 `#{}`--> <p>This will be safe: <span>escape!</span></p> <!-- 不轉(zhuǎn)義字符串插值 `!{}`--> <p>This will be safe: <span>escape!</span></p> <!-- 標(biāo)簽插值--> <p><a href="jade-lang.com">Jade</a></p>如果要輸出 #{},那就得使用/來轉(zhuǎn)義
- var name = 'yaochun' p my name is \#{name} <p>my name is #{name}</p>條件語句
- var user = { description: 'foo bar baz' } - var authorised = false #userif user.descriptionh2 Descriptionp.description= user.descriptionelse if authorisedh2 Descriptionp.description.User has no description,why not add one...elseh1 Descriptionp.description User has no description <div id="user"><h2>Description</h2><p class="description">foo bar baz</p> </div>除了if ... else if ... else這個(gè)經(jīng)典的條件判斷語句外，Jade 還提供了一個(gè) unless 條件語句。如果說 if 可以通過判斷給定條件是否符合要求來執(zhí)行下一步，那么 unless 完全是相反的一件事，它會(huì)判斷給定條件是否不符合要求，如果不符合，就執(zhí)行下一步。
- var con = false unless conp Hello, World <p>Hello, World</p>分支語句
當(dāng)需要 if 判斷的條件過多時(shí)，其他語言會(huì)提供類似 switch 的分支判斷語句。在 Jade 中，也提供了類似的語法——case：
- var friends = 10 case friendswhen 0p you have no friendswhen 1p you have a frienddefaultp you have #{friends} friends <p>you have 10 friends</p>在 Jade 中并沒有提供類似 break 的語法，對于所有的條件默認(rèn)只有一種輸出結(jié)果，如果沒有符合條件的就輸出 defualt 中的內(nèi)容。但是，有一個(gè)特例：
- var friends = 0 case friendswhen 0when 1defaultp you have #{friends} friends <p>you have very 0 friends</p>從上面的示例可以看出，當(dāng)沒有可輸出內(nèi)容時(shí)，就會(huì)執(zhí)行向下查找可執(zhí)行語句，一直查找到 default。
也可以使用塊擴(kuò)展：
- var friends = 1 case friendswhen 0: p you have no friendswhen 1: p you have a frienddefault: p you have #{friends} friends <p>you have a friend</p>遍歷語句
Jade 使用 each 對數(shù)組和對象遍歷，用法與 JavaScript 大同小異。
// 遍歷數(shù)組 uleach val, index in ['zero', 'one', 'two']li= index + ': ' + val// 遍歷對象 uleach val, index in {1:'one',2:'two',3:'three'}li= index + ': ' + val <!-- 遍歷數(shù)組--> <ul><li>0: zero</li><li>1: one</li><li>2: two</li> </ul> <!-- 遍歷對象--> <ul><li>1: one</li><li>2: two</li><li>3: three</li> </ul>循環(huán)語句
Jade 使用 while 實(shí)現(xiàn)循環(huán)，用法與 JavaScript 相似：
- var n = 0 ulwhile n < 4li= n++ <ul><li>0</li><li>1</li><li>2</li><li>3</li> </ul>mixins
在 Scss 和 Jade 中，混合宏（mixins）都是舉足輕重的語法。混合宏具有復(fù)用、解耦、可讀、可擴(kuò)。可維護(hù)等等優(yōu)勢。創(chuàng)建混合宏需要使用 mixin 標(biāo)識符，創(chuàng)建混合宏實(shí)例時(shí)，需要使用 + 標(biāo)識符：
//- Declaration mixin listulli fooli barli baz //- Use +list +list <ul><li>foo</li><li>bar</li><li>baz</li> </ul> <ul><li>foo</li><li>bar</li><li>baz</li> </ul>上面是最基本的混合宏，此時(shí)它還不具有諸多優(yōu)勢，除非我們給它傳遞參數(shù)，才能讓它具有非凡活力：
mixin pet(name)li.pet= name ul+pet('cat')+pet('dog')+pet('pig') <ul><li class="pet">cat</li><li class="pet">dog</li><li class="pet">pig</li> </ul>此外，還可以使用 ... 標(biāo)識符表示不定數(shù)量的參數(shù)：
mixin list(id, ...items)ul(id=id)each item in itemsli= item+list('my-list', 1, 2, 3, 4) <ul id="my-list"><li>1</li><li>2</li><li>3</li><li>4</li> </ul>有時(shí)候，我們需要替換混合宏的某個(gè)部分，那么就可以使用 block 標(biāo)識符來占位：
mixin article(title).article.article-wrapperh1= titleif blockblockelsep No content provided+article('Hello world')+article('Hello world')p This is myp Amazing article <div class="article"><div class="article-wrapper"><h1>Hello world</h1><p>No content provided</p></div> </div> <div class="article"><div class="article-wrapper"><h1>Hello world</h1><p>This is my</p><p>Amazing article</p></div> </div>這種可替代語法，進(jìn)一步提高了 Jade 的靈活性。
最后，我們談?wù)動(dòng)嘘P(guān)屬性的混合宏：
mixin link(href, name)a(href=href)&attributes(attributes)= name+link('/foo', 'foo')(class="btn") <a href="/foo" class="btn">foo</a>上面混合宏中并沒有聲明 attributes，是因?yàn)?Jade 已經(jīng)隱式為其引用了所有傳遞給 &attributes 的參數(shù)。
includes
實(shí)現(xiàn)高度復(fù)用的另一種方式就是將代碼片段保存到不同文件中，然后在需要的地方導(dǎo)入這些片段，為此，Jade 提供了 include 指令，下面是一個(gè) index 頁面：
//- index.jade doctype html htmlinclude ./includes/head.jadebodyh1 My Sitep Welcome to my super lame site.include ./includes/foot.jadehead 代碼片段：
//- includes/head.jade headtitle My Sitescript(src='/javascripts/jquery.js')script(src='/javascripts/app.js')footer 代碼片段：
//- includes/foot.jade #footerp Copyright (c) foobar生成的 HTML：
<!doctype html> <html><head><title>My Site</title><script src='/javascripts/jquery.js'></script><script src='/javascripts/app.js'></script></head><body><h1>My Site</h1><p>Welcome to my super lame site.</p><div id="footer"><p>Copyright (c) foobar</p></div></body> </html>繼承
Jade 中使用 extends 來繼承代碼片段，與 include 本本分分地引用代碼段不同，繼承可以修改代碼片段。
首先，在 layout 頁面使用 block 標(biāo)識符，設(shè)置一個(gè)可修改的代碼片段，緊跟 block 標(biāo)識符之后的是該代碼片段的名字：
//- layout.jade doctype html htmlheadblock titletitle Default titlebodyblock content然后，在 index 頁面繼承 layout，并可以根據(jù)代碼片段的名字修改相關(guān)代碼：
//- index.jade extends ./layout.jadeblock titletitle Article Titleblock contenth1 My Article生成的 HTML：
<!doctype html> <html><head><title>Article Title</title></head><body><h1>My Article</h1></body> </html>上述這種繼承方式，會(huì)抹除原來代碼片段的部分，如果想要追加代碼片段，可以使用 append 和 prepend 指令。append 用于在原有代碼片段之后追加，prepend 用于在原有代碼片段之前追加。一個(gè)初始頁面：
//- layout.jade htmlheadtitle Layoutbodyblock contentp Hello使用 append ：
extend layoutblock append contentp World生成的 HTML：
<html><head><script src="/vendor/jquery.js"></script><script src="/vendor/caustic.js"></script></head><body><p>Hello</p><p>World</p></body> </html>使用 prepend：
extend layoutblock prepend contentp World生成的 HTML：
<html><head><script src="/vendor/jquery.js"></script><script src="/vendor/caustic.js"></script></head><body><p>World</p><p>Hello</p></body> </html>總結(jié)
- 上一篇： jade 支持html,Vue篇之vue
- 下一篇： 第四届“传智杯”全国大学生IT技能大赛（