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

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

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

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

包含引入 (Include)

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

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

第一部分 JS 代碼混合

代碼混合分為三類：非字面表達式 Unbuffered Code

轉義式字面表達式 Escaped Buffered Code

非轉義式字面表達式 Unescaped Buffered Code

(上述翻譯為個人理解后取名，便于理解，但不代表官方翻譯)

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

var name = "Ruiqi";

"My name is " + name; // A行;

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

而當需要使用字面表達式的時候呢，就需要用引導符號 ‘=’ 和 ‘!=’ 分別表示第二類轉義式字面表達式和第三類非轉義式字面表達式了。以 ‘=’ 為例，它會要求編譯器將后面的字面表達式的值，作為純文本引入到當前上下文當中，它與 ‘|’ 的區(qū)別僅僅在于 ‘=’ 連接產生字面值的表達式，而 ‘|’ 連接完全的顯式字面表達式。讀到這里，請打開 CodePen 鏈接1 找到 “Section A” 來進行在線的實驗，如上圖。

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

// wrong

-

var array = ["wyy,"wzy","yhq","wrq"];

for (var i =0;i<3;i++)

li= array[i]

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

// correct

-

var A = "abc"+"def";

var B = A + "ddd";

each ele in A

li= ele

// another one

-

var A = "abc"+"def";

var B = A + "ddd";

- for (var i=0;i<3;i++)

li yudan

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

第二部分 包含引入

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

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

功能延展

現(xiàn)在有一個項目，每個 pug 文件都需要配置一段預制的代碼，比如

標簽當中的 和 、

總結

以上是生活随笔為你收集整理的js pug 代码_PUG 系列 | 第二课 JS 代码混合、包含引入的全部內容，希望文章能夠幫你解決所遇到的問題。

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