jade模板語(yǔ)法
jade寫(xiě)的網(wǎng)頁(yè)的demo
doctype html
html(lang="zh-CN")
head
meta(charset="UTF-8")
title jadeTest
body
.container
.header
.menu
.nav
li
a(href="#") 首頁(yè)
li
a(href="#") 新聞中心
.center
.row
.size1
.box.timely-msg
.hd
h2
a(href="#") 及時(shí)消息
.bd
ul.list
li
a(href="#") 這款合資車(chē)售價(jià)18萬(wàn)，2.0T+8速動(dòng)力，比邁騰還有面子，車(chē)標(biāo)成亮點(diǎn)
.size2
.box.news-list
.hd
h2
a(href="#") 新聞列表
.bd
ul.list
li
a(href="#") 這款合資車(chē)售價(jià)18萬(wàn)，2.0T+8速動(dòng)力，比邁騰還有面子，車(chē)標(biāo)成亮點(diǎn)
.footer
p 公司版權(quán)，違者必究
jade的特點(diǎn)
p 不像HTML一樣，有<>包圍標(biāo)簽，jade中的標(biāo)簽的屬性使用緊跟元素后面的小括號(hào)()括號(hào)括起來(lái)，屬性值使用引號(hào)；
p 另外，jade元素沒(méi)有相應(yīng)的開(kāi)始和結(jié)束標(biāo)記，是通過(guò)標(biāo)記的縮進(jìn)來(lái)表示從屬關(guān)系，這一點(diǎn)應(yīng)該是和python的語(yǔ)法類(lèi)似；
語(yǔ)法
doctype
p HTML文檔的開(kāi)始需要聲明文檔的類(lèi)型，具體的聲明方式為：
<!DOCTYPE html>
p jade中相應(yīng)的聲明方式為：
doctype html
元素和屬性
p HTML中的元素和屬性，元素的開(kāi)始和結(jié)束標(biāo)記，都是通過(guò)<>來(lái)標(biāo)識(shí)，而在jade中，不需要使用<>標(biāo)記元素的開(kāi)始和結(jié)束。HTML中的元素屬性，需要顯示的聲明屬性的類(lèi)型，如class、ID，jade中使用#表示id，.來(lái)表示class。
#user
.face
a(href="#") 修改頭像
對(duì)應(yīng)的HTML為:
<div id="user">
<div class="face"><a href="#">修改頭像</a></div>
</div>
如果元素只有一個(gè)屬性的時(shí)候，直接跟在元素后面的()中標(biāo)明屬性名并賦給相應(yīng)的值就可以了，但如果元素有多個(gè)屬性，那么元素的屬性之間使用逗號(hào)(,)分割
#user
.face
a(href="#",target="_blank") 修改頭像
<div id="user">
<div class="face"><a href="#" target="_blank">修改頭像</a></div>
</div>
元素包含的內(nèi)容
- 元素包含的內(nèi)容，可以直接將內(nèi)容跟在元素標(biāo)簽的后面；
.text 全面屏iPad來(lái)了！最低售價(jià)6499元，果粉們剁手嗎
- 使用"="來(lái)設(shè)置元素包含的內(nèi)容
.text="全面屏iPad來(lái)了！最低售價(jià)6499元，果粉們剁手嗎"
上面2行代碼對(duì)應(yīng)的html為:
<div class="text">全面屏iPad來(lái)了！最低售價(jià)6499元，果粉們剁手嗎</div>
<div class="text">全面屏iPad來(lái)了！最低售價(jià)6499元，果粉們剁手嗎</div>
jade中的=
jade中的=后面可以跟任何表達(dá)式，這個(gè)表達(dá)式可以是字符串，可以是變量，也可以是函數(shù)，或者是表達(dá)式運(yùn)算的結(jié)果。但需要注意，=后面的內(nèi)容會(huì)被轉(zhuǎn)碼(escape)
注意：=和前面的元素之間不要有空格，如果出現(xiàn)了空格，=則會(huì)被認(rèn)為是前面元素的內(nèi)容
=后跟字符串
.text="Hello world!<b>Hello world!</b>"
解釋為HTML后為：
<div class="text">Hello world!<b>Hello world!</b></div>
=后面的內(nèi)容會(huì)被轉(zhuǎn)碼，如果不想后跟的內(nèi)容被轉(zhuǎn)碼，則在=前面加!
.text!="Hello " + "<b>world!</b>"
解釋為HTML后的內(nèi)容為：
<div class="text">Hello <b>world!</b></div>
=后跟變量
ul.list
-var arr = ['one','two','three'];
each item in arr
li= item
這里的=后跟變量，還涉及到了jade的另外一個(gè)語(yǔ)法，jade的邏輯語(yǔ)法以及jade內(nèi)嵌js代碼
jade中元素的布爾屬性
jade中元素的布爾屬性設(shè)置為false，則不加入到元素中；如果元素中的布爾屬性設(shè)置值為true或者不設(shè)置值，都會(huì)在元素中加入布爾屬性
input(placeholder="請(qǐng)輸入用戶(hù)名",disabled)
input(placeholder="請(qǐng)輸入密碼",disabled=true)
input(placeholder="請(qǐng)確認(rèn)密碼",disabled=false)
解釋為HTML后為：
<input placeholder="請(qǐng)輸入用戶(hù)名" disabled>
<input placeholder="請(qǐng)輸入密碼" disabled>
<input placeholder="請(qǐng)確認(rèn)密碼">
jade中元素添加內(nèi)聯(lián)樣式
jade中元素添加內(nèi)聯(lián)樣式，和為元素添加屬性的方式基本一致，不同的是內(nèi)聯(lián)樣式的屬性會(huì)有多個(gè)，這多個(gè)屬性，可以放到一個(gè){}中，可以簡(jiǎn)單理解為js中的對(duì)象。
.text(style={color:'#f20',padding:'5px 10px'}) Hello World!
解釋為HTML后的代碼為：
<div style="color:#f20;padding:5px 10px" class="text">Hello World!</div>
jade元素添加內(nèi)聯(lián)樣式，基本的方式就和上面介紹的一致，但有些特殊的地方，暫時(shí)還沒(méi)有琢磨清楚，就是當(dāng)屬性名有-分隔的時(shí)候如font-size，在jade中內(nèi)聯(lián)樣式中怎么書(shū)寫(xiě)，還不知道。
jade自閉合標(biāo)簽
HTML5標(biāo)準(zhǔn)要求自閉合元素不需要閉合標(biāo)簽，即最后的/不需要手動(dòng)添加，有時(shí)為了兼容一些老版本的HTML標(biāo)準(zhǔn)的時(shí)候，需要后面的閉合標(biāo)簽，那么可以在自閉合標(biāo)簽后面緊跟一個(gè)/即可。
上面是文檔介紹的，但我測(cè)試了幾次，好像都沒(méi)有實(shí)現(xiàn)，這個(gè)已經(jīng)不重要了，現(xiàn)在的HTMl文檔的標(biāo)準(zhǔn)是實(shí)現(xiàn)HTML5規(guī)范，HMTL5標(biāo)準(zhǔn)規(guī)范已經(jīng)不允許使用自閉合標(biāo)簽的結(jié)束標(biāo)簽了。
input(placeholder="請(qǐng)輸入用戶(hù)名")/
img(src="../images/img-face.jpg")/
這個(gè)測(cè)試效果和文檔介紹的結(jié)果不一致，現(xiàn)在也不那么重要了，解釋后的HTML代碼也沒(méi)有添加自閉合的/。
jade中的特殊字符|
|在jade中是一個(gè)特殊的字符，它告訴jade模板解析器將后面的內(nèi)容原樣輸出，|后面也可以跟HTML元素。
a() 百度
| bc 我查找信息，喜歡百度
| <a >我想查找信息,不喜歡百度，喜歡谷歌</a>
解析為HTML的對(duì)應(yīng)代碼為：
<a >百度</a>
bc 我查找信息，喜歡百度
<a >我想查找信息,不喜歡百度，喜歡谷歌</a>
比如我們希望得到
<a >百度</a>
bc 我查找信息，喜歡百度
這樣的結(jié)果輸出，如果我們直接使用前面提供的語(yǔ)法,
a() 百度
bc 我查找信息，喜歡百度
那么得到的結(jié)果將是
<a >百度</a>
<bc>我查找信息，喜歡百度</bc>
jade解析器默認(rèn)回家字母解析為標(biāo)簽，即使bc后面緊跟這后面的文字，jade解析器也會(huì)將bc解析為標(biāo)記。這個(gè)時(shí)候使用jade的特殊字符|就可以解決這個(gè)問(wèn)題，可以讓后面的元素原樣輸出。
如果沒(méi)有bc等字母的話(huà)，僅僅是文字，那是可以得到預(yù)期的結(jié)果輸出的
<a >百度</a>
我查找信息，喜歡百度
#[]語(yǔ)法
如果我想在一段文本中插入一段jade語(yǔ)句，就需要#[]語(yǔ)法了。我們可以將jade語(yǔ)句寫(xiě)在[]中，就可以被jade解釋器解釋成html語(yǔ)句了
.text Hello,#[span John]
解釋后的HTML為：
<div class="text">Hello,<span>John</span></div>
jade中內(nèi)嵌javascript
jade作為模板引擎，可以在jade代碼中嵌入js代碼，這里的js代碼是作為服務(wù)端的代碼來(lái)執(zhí)行進(jìn)行邏輯處理的，而不是常規(guī)的html網(wǎng)頁(yè)中的瀏覽器的行為。
單行js代碼
jade中嵌入單行js代碼時(shí)，嵌入的js代碼需要以“-”開(kāi)頭
ul.list
-for(var i = 0; i < 3; i++)
li= i + "我就是個(gè)新聞列表"
解釋后對(duì)應(yīng)的HTML
<ul class="list">
<li>0我就是個(gè)新聞列表</li>
<li>1我就是個(gè)新聞列表</li>
<li>2我就是個(gè)新聞列表</li>
</ul>
jade中=跟內(nèi)容的時(shí)候，=和前面的元素不要留有空格，如果留空格的話(huà)，=就會(huì)被當(dāng)作當(dāng)前元素的內(nèi)容來(lái)處理了
多行js代碼
當(dāng)在jade中嵌入多行js代碼的時(shí)候，可以在每行js代碼都以“-”開(kāi)頭，也可以讓"-"獨(dú)占一行，然后js代碼做縮進(jìn)書(shū)寫(xiě)。
ul.list
-
var n = 4;
for(var j = 1; j < n; j++)
li= j + "實(shí)時(shí)消息"
預(yù)期的輸出HTML應(yīng)該如下：
<ul class="list">
<li>1實(shí)時(shí)消息</li>
<li>2實(shí)時(shí)消息</li>
<li>3實(shí)時(shí)消息</li>
</ul>
上面的是文檔介紹的語(yǔ)法，預(yù)期的輸出應(yīng)該是上面的輸出，但我實(shí)際使用的時(shí)候并沒(méi)有任何的輸出，可能是現(xiàn)在的語(yǔ)法有變化，我沒(méi)有細(xì)究。我真正實(shí)現(xiàn)嵌套多行js代碼，仍舊是每行js代碼以"-"開(kāi)頭。
ul.list
-var n = 4;
-for(var j = 1; j < n; j++)
li= j + "實(shí)時(shí)消息"
實(shí)際輸出結(jié)果值如下：
<ul class="list">
<li>1實(shí)時(shí)消息</li>
<li>2實(shí)時(shí)消息</li>
<li>3實(shí)時(shí)消息</li>
</ul>
jade的邏輯語(yǔ)法
jade自己有一些邏輯的語(yǔ)法，可以與js一起使用，這些jade語(yǔ)句前面不需要使用-開(kāi)頭。和python語(yǔ)法類(lèi)似。
遍歷 each...in
ul.list
-var university = ['北京大學(xué)','清華大學(xué)','中國(guó)傳媒大學(xué)'];
each item in arr
li= item
這里的=后跟的是變量，變量item
each...in還可以獲取到迭代變量的索引
ul.list
-var city = ['北京','上海','深圳'];
each item,index in city
li=index + ": " + item
解釋后的對(duì)應(yīng)HTML為：
<ul class="list">
<li>0: 北京</li>
<li>1: 上海</li>
<li>2: 深圳</li>
</ul>
上面的便利對(duì)象是數(shù)組，each ... in語(yǔ)法遍歷數(shù)組的時(shí)候，可以有2個(gè)變量，第一個(gè)變量為數(shù)組的項(xiàng)，第二個(gè)參數(shù)為數(shù)組的索引。
each...in語(yǔ)法還可以遍歷對(duì)象。遍歷對(duì)象的時(shí)候，each...in語(yǔ)法也是可以有2個(gè)參數(shù)，第一個(gè)參數(shù)為value，第二個(gè)參數(shù)為key。
ul.list
-var obj = {"address":"北京","mobile":"13278787878","job":"Teacher"};
each item,key in obj
li= key + ":" + item
解釋后對(duì)應(yīng)的HTML
<ul class="list">
<li>address:北京</li>
<li>mobile:13278787878</li>
<li>job:Teacher</li>
</ul>
循環(huán) while
這個(gè)語(yǔ)法沒(méi)想好怎么解釋?zhuān)徒栌闷渌幊陶Z(yǔ)言的解釋吧，不說(shuō)了，這里就是一個(gè)while...do的操作。
ul.list
-var num = 1;
while num < 4
li= num++
最后一行自增預(yù)算，也可以拆開(kāi)來(lái)寫(xiě)，像js一樣。
l.list
-var num = 0;
while num < 4
li= num
-num++
解釋后對(duì)應(yīng)的HTML：
<ul class="list">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
條件判斷
條件判斷，jade和其他編程語(yǔ)言的語(yǔ)法基本一致，起碼使用的關(guān)鍵詞是一致的，都為if。
jade中也可以使用取反操作，如!flag
-var flag = false;
if(flag)
.text 有權(quán)限
else if(!flag)
.text 沒(méi)有權(quán)限
else
.text 誰(shuí)知道有沒(méi)有權(quán)限
case語(yǔ)法
jade中沒(méi)有了switch，添加了case,這里也僅僅就是改了個(gè)名詞，改了跟叫發(fā)，使用和實(shí)現(xiàn)方法是完全一樣的。
-var gender = 1;
case gender
when 0
p 男
when 1
p 女
default
p 保密
<p>女</p>
復(fù)用塊
jade中可以通過(guò)mixin定義復(fù)用塊，定義方式為：mixin + 復(fù)用塊的名稱(chēng)，使用方式為：+復(fù)用塊名稱(chēng)
mixin下面的為復(fù)用塊的內(nèi)容，復(fù)用塊需要先定義后使用。即在定義服用快之前，不能使用，而在定義了復(fù)用塊以后的代碼中，使用位置不限。
mixin showName
.name Nicholas
+showName
.text 我是java開(kāi)發(fā)程序員
+showName
可以將復(fù)用塊簡(jiǎn)單的理解為函數(shù)，可以向復(fù)用塊中傳遞參數(shù)，使復(fù)用塊更加具有靈活性
mixin box(cls,title)
.box(class=cls)
.hd
h2=title
.bd
+box("news","新聞列表")
解釋后對(duì)應(yīng)的HTML為：
<div class="box news">
<div class="hd">
<h2>新聞列表</h2>
</div>
<div class="bd"></div>
</div>
這里的復(fù)用塊和我們之前的編碼習(xí)慣基本上吻合了，就是我們要求定義個(gè)公用模塊，然后有類(lèi)似結(jié)構(gòu)的都復(fù)制一個(gè)相同的模塊，然后修改一下class和模塊的標(biāo)題，現(xiàn)在解決了手動(dòng)修改的問(wèn)題，可以直接引用并給相應(yīng)的模塊賦值相應(yīng)的class和模塊標(biāo)題。
復(fù)用塊中引用塊
復(fù)用塊還可以接收一個(gè)塊(block)參數(shù)，這個(gè)參數(shù)是一組jade語(yǔ)句，這個(gè)參數(shù)名block是固定的，不能隨意更改。在調(diào)用的時(shí)候，只需要將這組jade語(yǔ)句以縮進(jìn)的形式寫(xiě)在mixin的下面即可。
復(fù)用塊引用塊情形的定義
mixin mixinName
jade語(yǔ)句
block
調(diào)用：
+mixinName
jade語(yǔ)句
demo
//復(fù)用塊的定義
mixin showUserInfo
.name Nicholas
.job Teacher
block
//復(fù)用塊調(diào)用
+showUserInfo
.text 他是個(gè)好老師，也是個(gè)好程序員
解釋為HTML后為：
<div class="name">Nicholas</div>
<div class="job">Teacher</div>
<div class="text">他是個(gè)好老師，也是個(gè)好程序員</div>
如果參數(shù)名不使用固定的關(guān)鍵字block，則自定義的參數(shù)名會(huì)被解釋為標(biāo)記，并且不會(huì)起到參數(shù)的作用。前面我提到，可以將復(fù)用塊簡(jiǎn)單的作為函數(shù)來(lái)理解，那么block我們就可以理解為形參，復(fù)用塊調(diào)用下面的jade就可以理解為實(shí)參。
加入我定義復(fù)用塊的時(shí)候，不添加block參數(shù)，那么在調(diào)用復(fù)用塊的下一行的縮進(jìn)jade語(yǔ)句是不會(huì)被解釋為HTML的。比如我定義并調(diào)用一個(gè)復(fù)用塊：
// 定義復(fù)用塊
mixin showUserInfo
.name Nicholas
.job Teacher
//調(diào)用復(fù)用塊
+showUserInfo
.text 他是個(gè)好老師，也是個(gè)好程序員
那么解釋為HTML后是不會(huì)顯示“他是個(gè)好老師，也是個(gè)好程序員”這一行內(nèi)容的
<div class="name">Nicholas</div>
<div class="job">Teacher</div>
但如果調(diào)用復(fù)用塊的下一行的jade語(yǔ)句沒(méi)有縮進(jìn)書(shū)寫(xiě)，那么這一行就不是作為復(fù)用塊的實(shí)參出現(xiàn)的，只是一般的jade語(yǔ)句，可以被正常解釋為HTML。
復(fù)用塊中的attributes屬性
前面的介紹，我們了解到復(fù)用塊可以定義block參數(shù)，除了block參數(shù)以外，jade還有另外一個(gè)隱藏的參數(shù)attributes，類(lèi)似于js中的默認(rèn)的函數(shù)參數(shù)對(duì)象arguments.這個(gè)attributes參數(shù)沒(méi)有想好怎么解釋?zhuān)蠢影桑?/p>
mixin showPersonal(name)
div(title!=attributes.title)=name
+showPersonal("我的姓名")(title="title屬性")
解釋后的HTML為：
<div title="title屬性">我的姓名</div>
attributs參數(shù)的作用，請(qǐng)參考復(fù)用塊showPersonal的調(diào)用時(shí)的第二個(gè)參數(shù)(title="title屬性")。
再就是需要注意定義復(fù)用塊時(shí)的attributes屬性，demo中使用了!=,而不是常規(guī)的=，這是因?yàn)閖ade中的=會(huì)進(jìn)行escaped轉(zhuǎn)碼，而使用了!=就不會(huì)進(jìn)行轉(zhuǎn)碼。
上面的demo是只有一個(gè)參數(shù)title，那么有多個(gè)參數(shù)的時(shí)候，是也像定義元素的屬性一樣，定一個(gè)屬性列表，屬性之間使用逗號(hào)分隔呢？在不是使用attributes屬性的時(shí)候，是沒(méi)有問(wèn)題的。但是使用attributes屬性，靈活性會(huì)更高一些。
-var attr = {'data-user':'Nicholas','data-job':'Teacher'}
.text&attributes(attr)
.text(title="title",data-job="student",data-age="18")
.text&attributes(attr)這行代碼，可以有縮進(jìn)，也可以沒(méi)有縮進(jìn)，縮進(jìn)和不縮進(jìn)實(shí)現(xiàn)的效果是完全一樣的
demo中的.text&attributes(attr)、.text(title="title",data-job="student",data-age="18")可以說(shuō)實(shí)現(xiàn)的效果完全相同，在屬性是固定的時(shí)候，但有的時(shí)候如果屬性不固定，需要根據(jù)特定場(chǎng)景賦予不同屬性的時(shí)候，attributes方式實(shí)現(xiàn)的靈活性就能體現(xiàn)出來(lái)了
填充數(shù)據(jù) #{}、!{}、!=、=
我們已經(jīng)知道為元素填充數(shù)據(jù)，可以通過(guò)=或者!=來(lái)實(shí)現(xiàn),其中=和!=的區(qū)別僅僅是后跟的元素?cái)?shù)據(jù)會(huì)不會(huì)被escaped轉(zhuǎn)碼，=會(huì)被轉(zhuǎn)碼，!=不會(huì)被轉(zhuǎn)碼。
.text= "信標(biāo)請(qǐng)求優(yōu)先避免與關(guān)鍵操作和更高優(yōu)先級(jí)的網(wǎng)絡(luò)請(qǐng)求競(jìng)爭(zhēng)"
然而還有一些情況不適合使用=或者!=.這個(gè)時(shí)候就得使用#{}語(yǔ)法了，其實(shí)#{}和!{}的區(qū)別也是會(huì)不會(huì)被轉(zhuǎn)碼的不同。
-var answer = "混合模式開(kāi)發(fā)";
.text 所謂hybrid，顧名思義就是‘#{answer}’
如上面的demo就不適合=,而使用#{}就比較合適。解釋后的HTML：
<div class="text">所謂hybrid，顧名思義就是‘混合模式開(kāi)發(fā)’</div>
填充數(shù)據(jù)的幾種方式，使用=和!=的地方都可以使用#{}和!{}替換使用，但是使用#{}和!{}的地方不一定可以使用=和!=替換，簡(jiǎn)單來(lái)說(shuō)，=和!=一般用于簡(jiǎn)單場(chǎng)景，#{}和!{}用于相對(duì)復(fù)雜一點(diǎn)的場(chǎng)景。
無(wú)論是使用=和!=還是使用#{}和!{}，當(dāng)填充的數(shù)據(jù)是字符串的時(shí)候，都需要使用引號(hào)括起來(lái)。如果不加引號(hào)，會(huì)編譯報(bào)錯(cuò)。
.text #{'啦啦'}
.text= '嘩嘩'
對(duì)應(yīng)的HTML
<div class="text">啦啦</div>
<div class="text">嘩嘩</div>
注釋
jade中的注釋?zhuān)蚸s等其他編程語(yǔ)言基本類(lèi)似，單行注釋使用//作為注釋的開(kāi)始。如果是多行注釋?zhuān)瑒t讓//單獨(dú)占一行，接下來(lái)的jade縮進(jìn)書(shū)寫(xiě)。
- 使用//注釋的jade文件，被解釋為HTML后，仍舊會(huì)顯示注釋的內(nèi)容
- 如果不希望在jade中注釋的內(nèi)容顯示在HTML中，則可以在使用//-注釋
//
用戶(hù)信息
包括用戶(hù)名、出生日期、性別
.text Nicholas 1987.12.12 男
對(duì)應(yīng)的HTML：
<!--用戶(hù)信息
包括用戶(hù)名、出生日期、性別-->
<div class="text">Nicholas 1987.12.12 男</div>
//-
用戶(hù)信息
包括用戶(hù)名、出生日期、性別
.text Nicholas 1987.12.12 男
對(duì)應(yīng)的HTML：
<div class="text">Nicholas 1987.12.12 男</div>
jade中沒(méi)有條件注釋的方法。HTML中有條件注釋的方法，如果有需要在jade中使用的條件注釋的地方，直接使用HTML中的注釋方法即可。
<!--[if IE 8]>
<html lang="en" class="lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<!--<![endif]-->
繼承
jade支持繼承，通過(guò)關(guān)鍵字extends來(lái)實(shí)現(xiàn)。
//- layout.jade
doctype html
html(lang="zh-CN")
head
block title
block script
body
block content
block footer
.footer
p 版權(quán)所屬 違者必究
//- son.jade
extends layout.jade
block title
title 列表頁(yè)
block script
script(script='https://lib.baomitu.com/jquery/3.3.1/jquery.js')
block content
.row
.size1
.box
.hd
h2 新聞列表
.size2
解釋的對(duì)應(yīng)HTML為：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>列表頁(yè)</title>
<script script="https://lib.baomitu.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<div class="row">
<div class="size1">
<div class="box">
<div class="hd">
<h2>新聞列表</h2>
</div>
</div>
</div>
<div class="size2"></div>
</div>
<div class="footer">
<p>版權(quán)所屬 違者必究</p>
</div>
</body>
</html>
