當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Jade简单教程

發布時間：2024/8/1 编程问答 62 豆豆

生活随笔收集整理的這篇文章主要介紹了 Jade简单教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Express框架里內嵌了Jade模板引擎。正好項目里也要用到，本篇整理了下Jade的相關用法。

安裝與執行
標簽和屬性
多行文本
變量
語句
Mixin
模板
注釋
過濾器

安裝與執行

安裝很簡單：

npm install jade –global

安裝后本地隨便新建一個sample.jade文件，執行：

jade sample.jade

就能將其翻譯成標準的sample.html源文件了。執行時可以帶上參數，通過jade -h查看支持的命令參數：

常用的命令參數，比如-P（大寫，命令參數是大小寫敏感的）。Jade默認編譯出來的html源文件里是沒有縮進的，不便于開發。加上-P參數后，編譯出來的html源文件里就有縮進了：

jade -P sample.jade

還有-w用來watch監視jade文件，每次改動保存后自動編譯成html文件，省去手動執行命令的麻煩：

jade -P -w sample.jade

-O用來給jade文件傳遞對象或JSON文件，用以替換模板內的變量：

jade -P -w sample.jade -O sample.json

標簽和屬性

傳統的HTML標簽寫尖括號很麻煩，Jade里可以省略尖括號，直接寫標簽名。標簽間的嵌套關系用換行加空格來實現。緊接在標簽名后加上.xx或#xx，就能給標簽添加css類名和id。標簽名后第一個空格后面的內容會被編譯成標簽內的文本內容。例如：

doctype html htmlheadbodyh1.titleClass#titleID My First Jade Page//編譯出來的結果 <!DOCTYPE html> <html><head></head><body><h1 id="titleID" class="titleClass">My First Jade Page</h1></body> </html>

是不是感覺寫起來簡單多了。因為css類名和id是最常用的標簽屬性，所以Jade簡化了它倆的寫法，可以緊接在標簽名后面。但標簽屬性的正統寫法應該是寫入()括號內，多個屬性用逗號隔開（css類名和id也可以寫入()括號內）：

a(href='http://www.jackzxl.net', target='_blank') 我的主頁//編譯出來的結果 <a href="http://www.jackzxl.net" target="_blank">我的主頁</a>

HTML里最常用的標簽就是div了，所以Jade提供了第二種簡化寫法，如果不寫標簽名默認就是div：

.divClass#divID 我是一個div//編譯出來的結果 <div id="divID" class="divClass">我是一個div</div>

多行文本

單行文本像上面這樣接在標簽名后的空格后面即可。多行文本有兩種寫法。第一種寫法是在標簽名后緊接一個.點。這樣后面的內容會被Jade模板視作文本域而保留換行符。例如：

p.第1行文本第2行文本第3行文本第4行文本//編譯出來的結果 <p>第1行文本第2行文本第3行文本第4行文本 </p>

但由于是文本域，因此用這種寫法的話，里面要嵌套標簽時，只能寫原生的HTML標簽了：

p.第1行文本第2行文本第3行文本第4行文本//編譯出來的結果 <p><span>第1行文本</span>第2行文本第3行文本第4行文本 </p>

多行文本的第二種寫法是在每行前加上|豎線符。而且如果開發者覺得第一種寫法里寫原生HTML標簽不爽，用這種寫法，可以用Jade語法來嵌套標簽。例如：

pspan 第1行文本| 第2行文本| 第3行文本| 第4行文本//編譯出來的結果 <p><span>第1行文本</span>第2行文本第3行文本第4行文本 <p>

多行文本的寫法不僅可用于p標簽等，也常見于style和script標簽，例如：

script.console.log("open mind");console.log("learning quick");console.log("work hard");

變量

如果僅僅上面這些快速編寫HTML的功能，那Jade也沒必要存在了。各種編輯器都有插件可以實現這種快速編寫的功能，例如sublime的Emmet插件。模板引擎的真正強大之處可以實現函數式的開發。先看變量。

變量聲明很簡單，前面加上-橫杠。使用變量只要#{變量名}就行了。例如：

- var cs = 'UTF-8' meta(charset='#{cs}')//編譯出來的結果 <meta charset="UTF-8">

但注意用#{}輸出的變量數據會執行HTML轉碼，例如：

- var alertData = '<script>alert(1);</script>' p #{alertData}//編譯出來的結果 <p><script>alert(1);</script></p>

原本想被執行的script腳本，被直接作為文本打印出來了。如果不想HTML轉碼，可以將#改成!嘆號：

- var alertData = '<script>alert(1);</script>' p !{alertData}//編譯出來的結果 <p><script>alert(1);</script></p>

那如果頁面就想輸出#{}和!{}呢？可以前面加\反斜杠來讓Jade引擎不編譯變量：

p \#{alertData} p \!{alertData}//編譯出來的結果 <p>#{alertData}</p> <p>!{alertData}</p>

除了用#{}和!{}外，也可以在標簽后面緊接=等號（不轉義用!=）來輸出變量。例如：

p= alertData p!= alertData

效果和上面是一樣的。這兩種寫法#{}和=等號輸出的區別如下：

input(value='#{aaa}') input(value=aaa)//編譯出來的結果 <input value="undefined"> <input>

可以看出用#{}如果變量未定義，將會編譯成undefined作為初始值。但用=等號來編譯變量的話，如果變量未定義就忽略。

有了變量就能輕松實現前后端分離。數據保存在JSON文件里。前端用Jade模板制作頁面，在需要顯示數據處用變量來實現。例如sample.json文件里：

{"charset": "UTF-8","title": "My First Jade Page" }

sample.jade文件里：

doctype html htmlheadmeta(charset='#{charset}')bodyh1.titleClass#titleID #{title}

執行命令：jade -P -w sample.jade -O sample.json后Jade文件里的變量被自動替換。編譯出來的sample.html：

<!DOCTYPE html> <html><head><meta charset="UTF-8"></head><body><h1 id="titleID" class="titleClass">My First Jade Page</h1></body> </html>

語句

Jade模板支持JavaScript語句：

if-else
unless
case-when
for-in
each-in
while

最常見的if-else：

- var author = 'Jack'; if authorp 作者：#{author} elsep 無作者//編譯出來的結果 <p>作者：Jack</p>

Jade還支持unless語句，它是if-else的反向，寫法都一樣，用的不多就不舉例了。

Jade里的case-when語句就是JavaScript里的switch-case語句（不知為何…）：

- var authors = ['Jack', 'Bill']; case authors[0]when 'Jack'p 作者是Jackwhen 'Bill'p 作者是Billdefaultp 無作者//編譯出來的結果 <p>作者是Jack</p>

循環遍歷用for-in（注意上面的if-else，case-when語句前不用像變量那樣加上-橫杠，但for的前面要加上-橫杠。如果漏寫-橫杠，會被解析為標簽）：

- var person = {name:'Jack', gender: 'Male'} - for (var prop in person)p= person[prop]//編譯出來的結果 <p>Jack</p> <p>Male</p>

循環遍歷也可以用each-in（each前的-橫杠加不加均可）：

- var employee = {name:'Jack', gender: 'male'} - each value, key in personp #{key}: #{value} - var language = ['Java', 'JavaScript', 'C++'] uleach item in languageli #{item}//編譯出來的結果 <p>name: Jack</p> <p>gender: male</p> <ul><li>Java</li><li>JavaScript</li><li>C++</li> </ul>

循環遍歷也可以用while（同樣前面加不加-橫杠均可）：

- var n = 0 ulwhile n < 4li= n++//編譯出來的結果 <ul><li>0</li><li>1</li><li>2</li><li>3</li> </ul>

Mixin

Mixin也不是個什么新的概念，例如sass里也用Mixin封裝css代碼，即能重用代碼，而且維護簡單。Jade也支持Mixin，可以理解為function，最簡單的無參數的代碼函數：

mixin sayHip Hi +sayHi//編譯出來的結果 <p>Hi</p>

上面聲明了一個mixin無參函數sayHi，調用時函數名前加上+加號。現在給mixin加上參數：

mixin personInfo(name, hobbies)p #{name}'s hobbies:ul.hobbyeach hobby in hobbiesli= hobby +personInfo('Jack', ['movie', 'music'])//編譯出來的結果 <p>Jack's hobbies:</p> <ul class="hobby"><li>movie</li><li>music</li> </ul>

函數內自然也可調用其他函數，例如上面兩個函數嵌套起來。這些和普通JavaScript的函數表現一致，沒啥好多介紹的：

mixin personInfo(name, hobbies)+sayHip #{name}'s hobbies:ul.hobbyeach hobby in hobbiesli= hobby +personInfo('Jack', ['movie', 'music'])

模板

mixin可以實現代碼的復用。文件與文件間常用模板來實現代碼復用。Jade用block和extends來實現模板的繼承。block塊就是定義一段HTML模塊：

block scriptsscript(src='jquery.js')script(src='underscore.js')script(src='backbone.js') //編譯出來的結果 <script src="jquery.js"></script> <script src="underscore.js"></script> <script src="backbone.js"></script>

上面的塊名就是scripts。定義好的block后，本文件內可以直接用block scripts來調用，這和mixin作用差不多，都能實現代碼復用。但block真正的作用在于占位，供子文件繼承，可以理解為傳統OO語言里的虛函數。父文件里定義的block，子文件里用extends來繼承并重寫。

例如每個文件的頁頭都一樣，就body里內容不一樣，可以寫一個header.jade：

doctype html htmlheadmeta(charset='#{charset}')block scriptsscript(src='jquery.js')script(src='underscore.js')script(src='backbone.js')bodyblock contentp please write content

每個頁面的header都長這樣。而body里定義了block content，這里block可以理解為一個占位符placeholder，需要繼承它的文件重寫block content。

根據業務需求寫頁面主體部分，例如sample.jade改成這樣：

extends headerblock contenth1.titleClass#titleID #{title}a(href='http://www.jackzxl.net', target='_blank') 我的主頁……

在sample.jade里，開頭用extends表明和header.jade的繼承關系。然后根據業務重寫header.jade里的block content。

執行jade -P -w sample.jade -O sample.json就能看到和之前一模一樣的頁面。引擎加載流程是：解析sample.jade，發現開頭有extends，就去解析header.jade，將其編譯成html。此時html里的body里是<p>please write content</p>。解析完header.jade就繼續解析sample.jade，發現block content，于是會將定義在header.jade里的block content替換掉。最終輸出的是正確的頁面內容，而不是<p>please write content</p>。

（但如果你執行的是jade -P -w header.jade -O sample.json會發現body里內容為<p>please write content</p>）

除繼承外還可以用include包含。Include會將內容無腦全拷貝進去。例如上面的sample.jade第一行extends header改成include header。編譯出來的結果：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><script src="jquery.js"></script><script src="underscore.js"></script><script src="backbone.js"></script></head><body><p>please write content</p></body> </html> <h1 id="titleID" class="titleClass">My First Jade Page</h1> <a href="http://www.jackzxl.net" target="_blank">我的主頁</a>

可以看出與extends不同，include就是無腦將另一個文件里的內容直接拷貝進去，不像block + extends可以重寫block。所以結果是錯誤的。

小細節注意：include包括extends如果省略后綴名，Jade默認該文件時.jade會進行編譯。但如果另一個文件里寫的是原生的html，需要寫明后綴名為.html（例如include xx.html），明確告訴Jade不要編譯。

注釋

Jade里加上//就能添加注釋，用雙斜杠的注釋會被輸出到html源碼里。例如：

//一行無意義的注釋//編譯出來的結果

如果不想在html源碼里輸出注釋，用//-，在雙斜杠后加一橫杠。例如：

//-一行無意義的注釋，編譯時直接跳過該行，不會被輸出到HTML源碼里

我們知道html里還可以寫注釋型的條件語句，常用于兼容IE。Jade里你同樣可以寫這些條件語句，例如將上面header.jade改成能識別IE89，應用不同的class：

doctype html   <html> headmeta(charset='#{charset}')block scriptsscript(src='jquery.js')script(src='underscore.js')script(src='backbone.js') bodyblock contentp please write content </html>

上面因為有了條件語句，所以html標簽用尖括號括了起來，因此最下面要手動加上來閉合標簽。而且Jade是空格縮進敏感的，需要將原先的head和body包括里面內容，全往前縮進2個空格。

過濾器

Jade同樣兼容其他模塊，例如寫博客愛用的markdown，寫css愛用的less，還有coffeeScript等。只要npm安裝好后，用:冒號+模塊名就能聲明使用這些模塊，例如：

:markdown... :less... :coffee...

以:markdown 為例，會把下面塊里的文本交給markdown去進行處理。

作者：張歆琳
鏈接：http://www.jianshu.com/p/e2a9cd3b7e56
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

轉載于:https://www.cnblogs.com/Mr-liyang/p/7655289.html

總結

以上是生活随笔為你收集整理的Jade简单教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： ctfmon.exe windows输入
下一篇： Gantt - attachEvent所