Jade 語(yǔ)法整理

Jade 是HTML預(yù)處理語(yǔ)言，省略了大量的尖括號(hào)，簡(jiǎn)潔，高效
參考網(wǎng)址：Jade的使用

Doctype

doctype html

生成的HTML：

<!DOCTYPE html>

其他常用類型還有： doctype xml, doctype transitional, doctype strict

標(biāo)簽

標(biāo)簽是 HTML 的核心元素，Jade對(duì)縮進(jìn)敏感，可以根據(jù)縮進(jìn)劃分層次結(jié)構(gòu)，省略一些界定符號(hào)（大括號(hào)、尖括號(hào)......）。

ul 
    li Item A
    li Iten B
    li Item C

生成的HTML：

<ul>
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
</ul>

提示：一定要保持一致的縮進(jìn)格式，建議統(tǒng)一將tab鍵輸出為空格，并采用4個(gè)空格為標(biāo)準(zhǔn)縮進(jìn)。

縮進(jìn)

Jade 支持兩種注釋：?jiǎn)涡凶⑨尯投嘈凶⑨專糠N注釋支持兩種模式：輸出到源文件和不輸出到源文件，差別在于多了一個(gè) -。
創(chuàng)建一個(gè)單行輸出注釋和單行不輸出注釋:

// 這個(gè)單行注釋會(huì)輸出到編譯后的文件中
p 單行輸出注釋
//- 這個(gè)單行注釋不會(huì)輸出到編譯后的文件中
p 單行不輸出注釋

生成的HTML:

<!-- 這個(gè)單行注釋會(huì)輸出到編譯后的文件中-->
<p>單行輸出注釋</p>
<p>單行不輸出注釋</p>

相比起單行注釋，多行注釋的內(nèi)容要在注釋符號(hào)的下一行，以相同的縮進(jìn)來(lái)編寫(xiě)。

//
    這個(gè)多行注釋會(huì)輸出到編譯后的文件中
    這個(gè)多行注釋會(huì)輸出到編譯后的文件中
p 多行輸出注釋
//- 
    這個(gè)多行注釋不會(huì)輸出到編譯后的文件中
    這個(gè)多行注釋不會(huì)輸出到編譯后的文件中
p 多行不輸出注釋

生成的HTML:

<!-- 
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
這個(gè)多行注釋會(huì)輸出到編譯后的文件中
-->
<p>多行輸出注釋</p> 
<p>多行不輸出注釋</p>

屬性

在Jade 中填寫(xiě)屬性，基本上和HTML保持一致：

input(type='checkout', checked)
input(
    type='checkbox'
    name='agreement'
    checked
)

生成的HTML:

<input type="checkbox" checked>
<input type="checkbox" name="agreement" checked>

對(duì)于頻繁使用的類名和ID名，Jade提供了兩個(gè)字面量：類名字面量和ID字面量，若不在字面量前指定標(biāo)簽名，則默認(rèn)使用 div

.link
a.link
#button
a#button

生成的HTML:

<div class="link"></div>
<a class="link"></a>
<div id="button"></div>
<a id="button"></a>

另一個(gè)常被修改的屬性是 style, 為了方便修改該屬性，Jade接收一個(gè)類似JavaScript對(duì)象類型的參數(shù)：

a(style={color: 'red', background: 'green'})

生成的HTML：

<a style="color:red;background:green"></a>

為方便的添加其他自定義屬性，Jade特意增加一個(gè)語(yǔ)法格式 &attributes :

- var attributes = {'data-foo': 'bar'};
div#foo(data-bar="foo")&attributes(attributes)

生成的HTML:

<div id="foo" data-bar="foo" data-foo="bar"></div>

另外，還可以根據(jù)條件設(shè)置屬性的語(yǔ)法形式：

- 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

生成的HTML:

<body class="authed"></body>
<a href="/">Home</a><a href="/about" class="active"></a>

文本

Jade支持三種文本輸出方式：?jiǎn)涡形谋?、管道文本和多行文本?/p> 

// 單行文本內(nèi)容直接跟在標(biāo)簽名后面
p 這里是單行文本內(nèi)容
// 管道文本使用管道符
p 
    | 這是一行管道文本，行數(shù)無(wú)限制
    | 這是一行管道文本，行數(shù)無(wú)限制
    | 這是一行管道文本，行數(shù)無(wú)限制
    | ......
// 多行文本需要在標(biāo)簽名后添加點(diǎn)號(hào)
p. 
    這是多行文本，注意縮進(jìn)
    這是多行文本，注意縮進(jìn)
    這是多行文本，注意縮進(jìn)
    ......

生成的HTML:

<!-- 單行文本內(nèi)容直接跟在標(biāo)簽名后面 -->
<p>這里是單行文本內(nèi)容</p>
<!-- 管道文本使用管道符 -->
<p>
    這里是一行管道文本，行數(shù)無(wú)限制
    這里是一行管道文本，行數(shù)無(wú)限制
    這里是一行管道文本，行數(shù)無(wú)限制
    ......
</p>
<!-- 多行文本需要在標(biāo)簽名后添加點(diǎn)號(hào) -->
<p>
    這里是一行管道文本，行數(shù)無(wú)限制
    這里是一行管道文本，行數(shù)無(wú)限制
    這里是一行管道文本，行數(shù)無(wú)限制
    ......
</p>

代碼嵌入

將JavaScript嵌入到Jade中，共3種方法：

① 使用 -,代碼中的特殊字符不會(huì)被轉(zhuǎn)義：

-for (var i=0; i<3; i++)
    li <a></a>

生成的HTML:

<li><a></a></li>
<li><a></a></li>
<li><a></a></li>

② 使用 =，代碼中的特殊字符將會(huì)轉(zhuǎn)義：

p
    = 'This code is <escaped>!'

生成的HTML:

<p>this is <escaped;>!</p>

③ 使用 !=，代碼中的特殊字符不會(huì)被轉(zhuǎn)義：

p
    != 'This code is <escaped>!'

生成的HTML:

<p>this is <escaped>!</p>

插值語(yǔ)法

Jade 提供了字符串插值和標(biāo)簽插值，其中字符串插值要考慮到安全性問(wèn)題，所以又分成轉(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]

生成的HTML:

<!-- 轉(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"></a></p>

條件語(yǔ)句

最基本的條件語(yǔ)句：if ... else if ... else:

- var user = { description: 'foo bar baz' }
- var authorised = false
#user 
    if user.description
        h2 Description
        p.description=  user.description
    else if authorised
        h2 Description
        p.description.
            User has no description, 
            why not add one...
    else 
        h1 Description
        p.description User has no description

生成的HTML:

<div id="user">
    <h2>Description</h2>
    <p class="description">foo bar baz</p>
</div>

此外，Jade還提供了一個(gè) unless條件語(yǔ)句，它會(huì)判斷條件是否不符合要求，若不符合，則執(zhí)行下一步。

- var con = false
unless con
    p Hellp, World

生成的HTML:

<p>Hello, World</p>

分支語(yǔ)句

Jade中提供了類似switch語(yǔ)法 -- case:

- var friends = 10 
case friends 
    when 0 
        p you have no friends 
    when 1 
        p you have a friend 
    default 
        p you have #{friends} friends

生成的HTML：

<p>you have 10 friends</p>

注意：在Jade中并沒(méi)有提供類似break 的語(yǔ)法，對(duì)于所有的條件默認(rèn)只有一種輸出結(jié)果，如果沒(méi)有符合條件的就輸出defualt 中的內(nèi)容，但有一種特例：

- var friends = 0 
case friends 
    when 0 
    when 1 
    default p you have #{friends} friends

生成的HTML:

<p>you have very 0 friends</p>

上面的示例可以看出，當(dāng)沒(méi)有可輸出內(nèi)容時(shí)，就會(huì)執(zhí)行向下查找可執(zhí)行語(yǔ)句，一直到 default

遍歷語(yǔ)句

Jade使用 each 對(duì)數(shù)組和對(duì)象遍歷，用法與JavaScript大同小異。

// 遍歷數(shù)組
ul 
    each val, index in ['zero', 'one', 'two']
        li= index + ': ' + val

// 遍歷對(duì)象
ul 
    each val, index in {1:'one',2:'two',3:'three'}
        li= index + ': ' + val

生成的 HTML:

<!-- 遍歷數(shù)組 -->
<ul>
    <li>0: zero</li>
    <li>1: one</li>
    <li>2: two</li>
</ul>
<!-- 遍歷對(duì)象 -->
<ul>
    <li>1: one</li>
    <li>2: two</li>
    <li>3: three</li>
</ul>

循環(huán)語(yǔ)句

Jade 使用 while 實(shí)現(xiàn)循環(huán)，用法與JavaScript相似：

- var n = 0;
ul 
    while n < 4
        li= n++

生成的 HTML:

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

mixins

在 Scss 和 Jade 中，混合宏（mixins）都是舉足輕重的語(yǔ)法，混合宏具有復(fù)用、解耦、可讀、可擴(kuò)、可維護(hù)等優(yōu)勢(shì)。創(chuàng)建混合宏需要使用 mixin 標(biāo)識(shí)符，創(chuàng)建混合宏實(shí)例時(shí)，需要使用 + 標(biāo)識(shí)符：

//- Declaration
mixin list
    ul
        li foo
        li bar
        li baz
//- Use
+list
+list

生成的 HTML:

<ul> 
    <li>foo</li> 
    <li>bar</li> 
    <li>baz</li> 
</ul> 
<ul> 
    <li>foo</li> 
    <li>bar</li> 
    <li>baz</li> 
</ul>

上面是最基本的混合宏，給它傳遞參數(shù)，才能讓它更有通用性：

mixin pet(name)
    li.pet= name
ul
    +pet('cat')
    +pet('dog')
    +pet('pig')

生成的 HTML:

<ul>
    <li class="pet">cat</li>
    <li class="pet">dog</li>
    <li class="pet">pig</li>
</ul>

此外，還可以使用 ... 標(biāo)識(shí)符表示不定數(shù)量的參數(shù)：

mixin list(id, ...items)
    ul(id=id)
        each item in items
            li= item
+list('my-list', 1, 2, 3, 4)

生成的 HTML:

<ul id="my-list"> 
    <li>1</li> 
    <li>2</li> 
    <li>3</li> 
    <li>4</li> 
</ul>

有時(shí)候，我們需要替換混合宏的某個(gè)部分，就可以使用 block 標(biāo)識(shí)符來(lái)占位：

mixin article(title)
    .article
        .article-wrapper
            h1= title
            if block
                block
            else 
                p No content provided
+article('Hello world')

+article('Hello world')
    p This is my
    p Amazing article

生成的 HTML:

<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>

有關(guān)屬性的混合宏，其中一種是：

mixin link(href, name) 
    a(href=href)&attributes(attributes)= name
    
+link('/foo', 'foo')(class="btn")

生成的 HTML:

<a href="/foo" class="btn">foo</a>

上面混合宏中并沒(méi)有聲明 attributes，是因?yàn)?Jade 已經(jīng)隱式為其引用了所有傳遞給 &attributes 的參數(shù)

includes

實(shí)現(xiàn)高度復(fù)用的一種方式是將代碼片段保存到不同文件中，然后在需要的地方導(dǎo)入這些片段，為此，Jade 提供了 include 指令。下面是一個(gè) index 頁(yè)面：

//- index.jade
doctype html
html
    include ./includes/head.jade
    body
        h1 My Site
        p Welcome to my super lame site.
        include ./incliudes/foot.jade

head 代碼片段：

//- includes/head.jade
head
    title My Site
    script(src='/javascripts/jquery.js')
    script(src='/javsscripts/app.js')

footer 代碼片段：

//- includes/foot.jade
#footer
    p Copyright (c) footer

生成的 HTML:

<!doctype html>
<html>
    <head>
        <title>My Site</title>
        <script src='/javascripts/jquery.js'></script>
        <script src='/javsscripts/app.js'></script>
    </head>
    <body>
        <h1>My Site</h1>
        <p>Welcome to my super lame site.</p>
        <div id="footer">
            <p>Copyright (c) footer</p>
        </div>
    </body>
</html>

繼承

Jade 中使用 extends 來(lái)繼承代碼片段，與 include 本分地引用代碼段不同，繼承可以修改代碼片段。
首先，在 layout 頁(yè)面使用 block 標(biāo)識(shí)符，可以設(shè)置一個(gè)可修改的代碼片段，緊跟之后的是該代碼片段的名字：

//- layout.jade
doctype html 
html 
    head
        block title
            title Default title
    body
        block content

然后，在 index 頁(yè)面繼承 layout, 并可以根據(jù)代碼片段的名字修改相關(guān)代碼：

//- index.jade
extends ./layout.jade

block title
    title Article Title

block content
    h1 My Article

生成的 HTML:

<!doctype html> 
<html> 
    <head> 
        <title>Article Title</title> 
    </head> 
    <body> 
    <h1>My Article</h1> 
    </body> 
</html>

上面的繼承方式，會(huì)抹除原來(lái)代碼片段的部分，如果想要追加代碼片段，可以使用 append 和 prepend 指令。 append 用于在原來(lái)代碼片段之后追加，prepend 用于在原有代碼之前追加，一個(gè)初始頁(yè)面：

//- layout.jade
doctype html 
html 
    head
        title Layout
    body
        block content
            p Hello

生成的 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 layout

block prepend content
    p 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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容