標籤：

PUG 系列 | 第二課 JS 代碼混合、包含引入

02-02

首先要說明，文章當中涉及幾處翻譯，都是筆者根據自己的理解妄自命名的，如果讀者有更好的理解，歡迎在評論中討論。

====================

在這一課當中，我們要進行兩個知識點的學習，根據標題可能不能很好懂得其含義，我們先做一個簡單的理解：

  1. JS 代碼混合 (Code)

    在這一功能特性下， JavaScript 代碼將被混合在 pug 文件當中，並且在編譯階段就被執行，利用了靜態解釋模板中的 JavaScript 語句的特性來實現對代碼的預處理，從而簡化模板的編寫操作。常常使用的就是控制語句和循環語句。

  2. 包含引入 (Include)

    包含引入功能可以把其他文本文件當中的內容原封不動引入當前 pug 文檔當中，構建高度復用的 pug 代碼，提高資源的利用率。如果一套頁面使用了完全相同的結構（有如 ASP.NET Web Forms 當中的母版），那麼使用這一 pug 特性就能大幅節省開發成本了。

重要提示：在這一課當中，需要具備一定的拓展能力，請盡量在電腦上閱讀，因為文末的 CodePen 鏈接能讓你在其中動手修改，實現對三大特性的深入理解。由於微信平台不支持文章中使用外部超鏈接，故文末列舉所有 CodePen 鏈接，用於進行實驗。

第一部分 JS 代碼混合

代碼混合分為三類：

  • 非字面表達式 Unbuffered Code
  • 轉義式字面表達式 Escaped Buffered Code
  • 非轉義式字面表達式 Unescaped Buffered Code

（上述翻譯為個人理解後取名，便於理解，但不代表官方翻譯）

第一類，表達的就是：執行代碼，但是不會將返回值以字面值得形式返回給當前的上下文。比如下述代碼：

var name = "Ruiqi";n"My name is " + name; // A行;n

當代碼全部執行後，A行會返回一個字面值 「My name is Ruiqi」，而有的時候我們又不允許 pug 在執行某段代碼的時候將字面值返回，比如 for 語句，此時就需要使用 『-』(dash) 來標記後面所接的一段是非字面表達式。否則，將會導致編譯器錯誤。

而當需要使用字面表達式的時候呢，就需要用引導符號 『=』 和 『!=』 分別表示第二類轉義式字面表達式和第三類非轉義式字面表達式了。以 『=』 為例，它會要求編譯器將後面的字面表達式的值，作為純文本引入到當前上下文當中，它與 『|』 的區別僅僅在於 『=』 連接產生字面值的表達式，而 『|』 連接完全的顯式字面表達式。

讀到這裡，請打開 CodePen 鏈接1 找到 「Section A」 來進行在線的實驗，如上圖。

操作時，請嘗試去掉 for 語句前的 dash 符號，看看是否會出現錯誤，或者嘗試改變縮進量。值得引起注意的是，for 語句是不可以放入一個 dash 符號引導的代碼塊的，必須另外起行：

// wrongn-n var array = ["wyy,"wzy","yhq","wrq"];n for (var i =0;i<3;i++)n li= array[i]n

在上述代碼編譯時，編譯器會拋出異常，需要改寫成下面這種形式：

// correctn-n var A = "abc"+"def";n var B = A + "ddd";neach ele in An li= elenn// another onen-n var A = "abc"+"def";n var B = A + "ddd";nn- for (var i=0;i<3;i++)n li yudann

至於轉義和非轉義的區別就很簡單了，具體可以通過搜索關鍵字 HTML符號轉義 來了解。

第二部分 包含引入

正如前面介紹的，包含引入的概念在模板化開發當中有著非常重要的意義。此處舉兩個例子：

  1. 代碼復用

    現在我們已經有了 A 頁面，它搭建了一套框架，包含頁面的導航、菜單和底部。而新開發的 B 頁面恰好需要使用 A 定義的這套框架。通常我們會把 A 當中的內容複製到 B 當中，這沒毛病，而且很簡單易行。但是問題恰恰不在這裡，問題就出在維護的時候。如果後期項目更新，設計更改，A 定義的框架要進行更新，那麼所有使用其定義的頁面都需要更新，當需要更改的頁面太多，必然會導致效率降低，甚至出現大量的紕漏，這是非常可怕的。所以，我們需要像引入一個頭文件那樣，用引用關係來構建高度復用的代碼。

  2. 功能延展

    現在有一個項目，每個 pug 文件都需要配置一段預製的代碼，比如 <head> 標籤當中的 <meta> 和 <link>、<script> 標籤。這些代碼量不大，但是逐個錄入卻又顯得麻煩和低效，同時所引用的庫（如 jQuery，d3js）等的升級也會是維護增加不少麻煩，所以不妨把這些都寫入一個包含塊當中，這樣能夠快速開發，並且降低維護的成本。

包含引入功能可以使用任何類型的文本文件，並且可以針對文件類型進行過濾器預處理，將處理後的文本引入代碼段。

引入的語法是使用include關鍵字，後面接需要引入的文件的完整路徑（包含文件名和拓展名），諸如：

bodyn include includes/body.pug // file includes/body.pug will be included.n divn p Hello pug!n

而基於過濾器的引入呢，只需在include關鍵字後加上「:xxx」（xxx表示過濾器的名字），比如：

bodyn include includes/body.pug // file includes/body.pug will be included.n divn p Hello pug!n

接下來我們展示一個實例：

其中，insert.pug 的內容如下：

li MSTest0nli - Ziyuannli - Haoqinli - Ruiqinli - Yuyannli - Zhongdongn

再舉一例，我們接入樣式表：

值得一提的是，在使用包含引入時，被引入的文件所有的縮進會被完全一致的保留在插入點，即：直接把被引入文件內容原封不動插入新段落。如果被插入的是 pug 代碼，還會被編譯成相應的 html 代碼。

接著是過濾器的使用。

注意使用過濾器時，需要根據需要先在項目的模塊中引入要使用的過濾器，比如接下來我要使用「markdown-it」過濾器，則應先添加包。命令為：

sudo yarn add jstransformer-markdown-it --save // yarnnsudo npm install jstransformer-markdown-it --save // npmn

第二部分包含引入無法在線練習，請各位使用本地編輯器（推薦 Visual Studio Code）。如果過濾器不清楚，不要著急，我們下一期文章會講解到。

包含引入與 ASP.NET 母版的區別在於，前者實現方式是「子模板包含母模板」，而後者的實現方式是「子模板嵌入母模板」。這一原理的區別本質都是實現同類文檔的規範化處理，但是前者具有更大的靈活性，能夠根據需要進行開發。

文章中出現的 CodePen 鏈接：（不需要註冊賬號，請直接在線練習）

  1. 鏈接1：codepen.io/DevChache/pe

在使用 CodePen 的 pug 時，可以點擊 HTML 區域右側的下拉菜單，選擇 View Compiled HTML 即可查看編譯得到的 HTML 文件。

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

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

推薦閱讀：

TAG:前端开发 | Pug |