PUG 系列 | 第一課 初識Pug、插值和迭代

在這篇文章當中，我們將要一起學習三部分的內容：

1. Pug 語法概覽
2. Pug 變數
3. Pug 迭代

第一部分 初識 Pug

Pug 相關的介紹在前面的推送（文見 MSTest0 公眾號1月16日推送）中已經進行過一些介紹了，那麼我們今天就來快速過一下常見的 Pug 語法。在這一部分當中（很大可能性在將來的相關推送當中），我們將會使用截圖的方式來進行分享，當代碼量稍大的時候，我們還會提供源代碼；今後當代碼量非常大的時候，源代碼將會貼在文章後面的 CodePen 鏈接里，敬請諒解。

上圖左側是 Pug 源文件，右側是生成的 HTML 文件，而下方的 Terminal 部分就是 Gulp 的執行過程了。

上面演示了單元素的情況，接下來我們看看多元素並列（多個 <p> 元素並列）的情況：

多元素並列的情況，請注意 Pug 文件當中的行號

接下來是元素嵌套的情況，我們試著把所有的 <p> 元素放進一個 div 當中，請注意觀察 Pug 文件每行的縮進：

仔細觀察，試著對比 Pug 文件第 3, 4 行和第 12, 13 行，結合右側生成的 HTML 代碼來歸納一下：

1. Pug 中，縮進表示元素的嵌套，而空格之後的文本表示閉合元素 <?> 和 </?> 之間的部分。
2. Pug 當中，是不需要表示與 開標籤 對應的 閉標籤 的。
3. // 和 //- 的區別在於，前者會被轉換成 HTML 的注釋，而後者表示 Pug 文件的注釋，但不會被生成 HTML 的一部分。

我們知道，當接觸了 CSS 之後，最常使用到的就是 HTML 元素的兩個屬性：id 和 class。這兩個元素一個用來匹配整個文檔中第一個匹配 id 的元素，一個用來匹配整個文檔中所有匹配 class 的元素。在多種語言中，對 id 和 class 都有特殊照顧。CSS 選擇器中我們用 『.』 來表達 class 規則，而用 『#』 來表達 id 規則，這其實是有原因的（接下來這一部分僅作拓展，跳過不會影響到學習的進程）：

英語中，常常用 『#』 這個符號來表達數字、第幾之意，比如 #2 表達 number 2 或 second之意，後來為了使用方便，就簡化成一個符號 『#，所以應當讀作 number key，亦或 hash。至於高級語言 C# 的讀音，其實是因為那個 』#『 號本身是一個樂譜當中的 ?，讀作 sharp，表示把基本音符的音高增高半音。C# 之意眾說紛紜，但是這個使用 ?』 符號表達拔高之意，與 C++ 的 『++』 表達自增，有異曲同工之妙也。至於為何用 『#』 表達而不用 『?，想必是因為打字方便吧??

再說這個 』.『 代表的 class，各個面向對象編程語言里，是不是都這樣用的喲~

回歸正題

那我們就來試試，用 Pug 生成帶有 class 和 id 的 HTML 代碼：

有人不由要問了，如果一個標籤中既含有子元素，又含有文本，而文本又在子元素之後怎麼辦呢？即：

<div>n <p> Hello world.</p>n Nice to meet you!n</div>n

類似於 Shell 編程中的管道概念，我們使用 』|『 符號在獨立的一行之前，表示把其後的文本「注入」縮進所確定的父元素當中，且相對位置按照行順序排列，如圖：

有沒有覺得這個很好玩呢？悄悄告訴你，這個功能很實用的哦！

接下來我們得談一談除了 class 和 id 之外的其他屬性。其實很簡單，在元素的定義之後，用括弧括起來就行了，我們舉一個純代碼的例子，就不上圖了：

div.aclass#bid(data-name="My Name") Contentn

另一種添加屬性的方式是使用 &attributes 語法操作屬性對象：

p#para&attributes({"A": "a", "B": "b"}) My paragraph.n

第二部分 插值

使用連詞符 - 讀作 「dash」 作為一行的行首，然後使用 JavaScript 語法定義變數，然後使用 #{ } 插值語法來在其中使用字面表達式語句來填充。值得注意的是，#{} 插值是一種轉義語法，其中所有的特殊字元都會被轉義，比如：

另一種插值叫非轉義插值，使用 !{} 插值語法，比如：

比較兩種插值方式，應該就可以看到不同之處了。

第三種插值是指（HTML）標籤插入，使用 #[] 語法，括弧內使用 Pug 的語法進行，比如

divn | this is a pug #[code code sequence].n

將會生成：

<div>this is a pug <code>code sequence</code>.</div>n

正式由於這樣的標籤插入語法的出現，我們大大減少了行內元素（如：<em>, <strong> 等）的出現導致的大量使用 | 管道插入文本的幾率，也使得我們的代碼更加簡潔，推薦大家使用。

第三部分 迭代

Pug 當中，有兩個迭代關鍵字，分別是 each/ for 和 while。

each 常常用在需要從一個數組中遍曆元素，或是一個對象中遍歷屬性的情況之下，先看圖中的兩個例子：

例子當中，each 後面的兩個分別是迭代當中的當前元素（屬性）和當前的索引順序（從0開始）（其中索引順序可以省略），而 in之後緊接的，就是需要遍歷的數組或是對象。

while 語法，用於循環一定次數來迭代數組，使用方法：

這種語法的優點在於，能夠簡潔得使需要批量進行的操作完成，尤其適合在同一頁面多元素同構的情況下使用。

好的，本次分享就講到這裡，敬請期待下篇文章。

也歡迎關注專欄（淵說）和公眾號（MSTest0），和我們一起進步吧！