Jade笔记
這只是我的Jade筆記，完整的Jade教程請參考Jade 官方的英文文檔和https://www.w3cplus.com/html/how-to-use-jade.html
簡介
Jade是編寫HTML模板的簡潔語言，簡稱模板引擎，其實就是 HTML 預(yù)處理語言，非常類似 Sass 之于 CSS。其特點如下：
- 生成HTML
- 支持動態(tài)代碼
- 支持可重用性（DRY）
- 采用對縮進敏感的語法形式，提高了可讀性，省略了一些界定符號（大括號、尖括號……）
安裝
通過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"]); })標簽
標簽是 HTML 的核心元素。默認情況下，文本在行的開頭（或者僅在空格之后）代表一個html標記。縮進標簽嵌套，創(chuàng)建像html結(jié)構(gòu)的樹。
一般用法
在 Jade 中創(chuàng)建一個列表：
ulli Item Ali Item Bli Item C生成的 HTML：
<ul><li>Item A</li><li>Item B</li><li>Item C</li> </ul>就是這么簡單，再也不用顧慮標簽閉合了嗎、shift 鍵在哪啊，全程無壓力高速輸出！唯一需要記住的就是用統(tǒng)一的縮進來嵌套標簽。
提示：如果環(huán)境已經(jīng)正確安裝，那么大多數(shù)情況下的錯誤都是縮進惹的禍，一定一定要保持一致的縮進格式，建議統(tǒng)一將 tab 鍵輸出為空格，并采用 4 個空格作為標準縮進。
內(nèi)聯(lián)語法
為了節(jié)省空間，jade提供嵌套標簽的內(nèi)聯(lián)語法。
a: img <a><img/></a>自閉合標簽
標簽如img，meta，link等都是自動關(guān)閉（除非您使用XML文檔類型）。jade能自動識別自閉合標簽，input會編譯成<input/>。您也可以通過簡單地附加/字符來明確地自行關(guān)閉標簽。只有在你知道你在做什么的時候才這樣做。
foo/ foo(bar='baz')/ <foo/> <foo bar="baz"/>標簽中有大段的塊內(nèi)容
方式一：在標簽后面添加 .
比如一段js代碼，注意是script后面有一個.
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)建一個單行輸出注釋和單行不輸出注釋：
// 這個單行注釋會輸出到編譯后的文件中 p 單行輸出注釋 //- 這個單行注釋不會輸出到編譯后的文件中 p 單行不輸出注釋 <!-- 這個單行注釋會輸出到編譯后的文件中--> <p>單行輸出注釋</p> <p>單行不輸出注釋</p>由上可見，輸出和不輸出的差別就在于多了一個 -，謹記！
相比起單行注釋，多行注釋的內(nèi)容要在注釋符號的下一行，以相同的縮進來編寫。多行注釋的輸出和不輸出模式和單行注釋相同，需要使用 - 標記：
//這個多行注釋會輸出到編譯后的文件中這個多行注釋會輸出到編譯后的文件中 p 多行輸出注釋 //-這個多行注釋不會輸出到編譯后的文件中這個多行注釋不會輸出到編譯后的文件中 p 多行不輸出注釋 <!-- 這個多行注釋會輸出到編譯后的文件中 這個多行注釋會輸出到編譯后的文件中 --> <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
添加一個doctype只需要doctype，然后再跟一個可選的值，默認是html
doctype html會轉(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>注意：布爾屬性沒有值時默認為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 的用法。如果不在字面量前邊指定標簽名，則默認使用 div:
.link a.link #button a#button <div class="link"></div> <a class="link"></a> <div id="button"></div> <a id="button"></a>1個id和多個class，連著寫即可：
a#download-btn.btn.blue-btn <a id="download-btn" class="btn blue-btn"></a>也可以通過一個類名稱的數(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 屬性可以是一個字符串（像任何正常屬性），但它也可以是一個對象。為了更方便地修改該屬性，Jade 接收一個類似 JavaScript 對象類型的參數(shù)：
a(style={color: 'red', background: 'green'}) <a style="color:red;background:green"></a>&attributes
為了更方便地添加其他自定義屬性，jade 特意增加了一個語法格式 &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不會自動轉(zhuǎn)義。您必須確保對任何用戶輸入進行sanatize以避免 跨站點腳本。如果你的attributes是從一個mixin調(diào)用中傳入的，這個就完成了。
非轉(zhuǎn)義屬性
默認情況下，所有屬性都被轉(zhuǎn)義（用轉(zhuǎn)義序列替換特殊字符）以防止諸如跨站點腳本攻擊。如果你需要使用特殊字符，你可以使用!=而不是=。
div （escaped = "<code>" ） div （unescaped != "<code>" ） <div escaped = "<code>" > </ DIV> <div unescaped = "<code>" > </ div>注意：未轉(zhuǎn)換的緩沖代碼可能是危險的。您必須確保對任何用戶輸入進行sanatize以避免 跨站點腳本
文本
Jade 支持三種文本輸出方式：單行文本、管道文本和多行文本：
// 單行文本內(nèi)容直接跟在標簽名后面 p 這里是單行文本內(nèi)容 // 管道文本使用管道符 p| 這是一行管道文本，行數(shù)無限制| 這是一行管道文本，行數(shù)無限制| 這是一行管道文本，行數(shù)無限制| …… // 多行文本需要在標簽名后添加點號 p.這是多行文本，注意縮進這是多行文本，注意縮進這是多行文本，注意縮進 <!-- 單行文本內(nèi)容直接跟在標簽名后面--> <p>這里是單行文本內(nèi)容</p> <!-- 管道文本使用管道符--> <p>這是一行管道文本，行數(shù)無限制這是一行管道文本，行數(shù)無限制這是一行管道文本，行數(shù)無限制…… </p> <!-- 多行文本需要在標簽名后添加點號--> <p>這是多行文本，注意縮進這是多行文本，注意縮進這是多行文本，注意縮進 </p>代碼嵌入
將 JavaScript 嵌入到 Jade 中，一共有三種方法。第一種方式是使用 -，代碼中的特殊字符不會被轉(zhuǎn)義：
- for (var x = 0; x < 3; x++) li <a></a> <li><a></a></li> <li><a></a></li> <li><a></a></li>第二種方法是使用 =，代碼中的特殊字符將會被轉(zhuǎn)義：
p= 'This code is <escaped>!' <p>This code is <escaped>!</p>第三種方法是使用 !=，代碼中的特殊字符不會被轉(zhuǎn)義：
p!= 'This code is <escaped>!' <p>This code is <escaped>!</p>插值語法
使用插值語法，預(yù)先指定一個位置，方便以后插入一個新值，簡稱插值。
Jade 提供了字符串插值和標簽插值。其中，字符串插值由于要考慮到安全性問題，所以又分成了轉(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} // 標簽插值 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> <!-- 標簽插值--> <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這個經(jīng)典的條件判斷語句外，Jade 還提供了一個 unless 條件語句。如果說 if 可以通過判斷給定條件是否符合要求來執(zhí)行下一步，那么 unless 完全是相反的一件事，它會判斷給定條件是否不符合要求，如果不符合，就執(zhí)行下一步。
- var con = false unless conp Hello, World <p>Hello, World</p>分支語句
當需要 if 判斷的條件過多時，其他語言會提供類似 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 的語法，對于所有的條件默認只有一種輸出結(jié)果，如果沒有符合條件的就輸出 defualt 中的內(nèi)容。但是，有一個特例：
- var friends = 0 case friendswhen 0when 1defaultp you have #{friends} friends <p>you have very 0 friends</p>從上面的示例可以看出，當沒有可輸出內(nèi)容時，就會執(zhí)行向下查找可執(zhí)行語句，一直查找到 default。
也可以使用塊擴展：
- 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 實現(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ù)用、解耦、可讀、可擴。可維護等等優(yōu)勢。創(chuàng)建混合宏需要使用 mixin 標識符，創(chuàng)建混合宏實例時，需要使用 + 標識符：
//- 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>上面是最基本的混合宏，此時它還不具有諸多優(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>此外，還可以使用 ... 標識符表示不定數(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>有時候，我們需要替換混合宏的某個部分，那么就可以使用 block 標識符來占位：
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>這種可替代語法，進一步提高了 Jade 的靈活性。
最后，我們談?wù)動嘘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，是因為 Jade 已經(jīng)隱式為其引用了所有傳遞給 &attributes 的參數(shù)。
includes
實現(xiàn)高度復(fù)用的另一種方式就是將代碼片段保存到不同文件中，然后在需要的地方導(dǎo)入這些片段，為此，Jade 提供了 include 指令，下面是一個 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 標識符，設(shè)置一個可修改的代碼片段，緊跟 block 標識符之后的是該代碼片段的名字：
//- 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>上述這種繼承方式，會抹除原來代碼片段的部分，如果想要追加代碼片段，可以使用 append 和 prepend 指令。append 用于在原有代碼片段之后追加，prepend 用于在原有代碼片段之前追加。一個初始頁面：
//- 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技能大赛（