首先要说明，文章当中涉及几处翻译，都是笔者根据自己的理解妄自命名的，如果读者有更好的理解，欢迎在评论中讨论。

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

在这一课当中，我们要进行两个知识点的学习，根据标题可能不能很好懂得其含义，我们先做一个简单的理解：JS 代码混合 (Code)

在这一功能特性下， JavaScript 代码将被混合在 pug 文件当中，并且在编译阶段就被执行，利用了静态解释模板中的 JavaScript 语句的特性来实现对代码的预处理，从而简化模板的编写操作。常常使用的就是控制语句和循环语句。

包含引入 (Include)

包含引入功能可以把其他文本文件当中的内容原封不动引入当前 pug 文档当中，构建高度复用的 pug 代码，提高资源的利用率。如果一套页面使用了完全相同的结构(有如 http://ASP.NET Web Forms 当中的母版)，那么使用这一 pug 特性就能大幅节省开发成本了。

重要提示：在这一课当中，需要具备一定的拓展能力，请尽量在电脑上阅读，因为文末的 CodePen 链接能让你在其中动手修改，实现对三大特性的深入理解。由于微信平台不支持文章中使用外部超链接，故文末列举所有 CodePen 链接，用于进行实验。

第一部分 JS 代码混合

代码混合分为三类：非字面表达式 Unbuffered Code

转义式字面表达式 Escaped Buffered Code

非转义式字面表达式 Unescaped Buffered Code

(上述翻译为个人理解后取名，便于理解，但不代表官方翻译)

第一类，表达的就是：执行代码，但是不会将返回值以字面值得形式返回给当前的上下文。比如下述代码：

var name = "Ruiqi";

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

当代码全部执行后，A行会返回一个字面值 “My name is Ruiqi”，而有的时候我们又不允许 pug 在执行某段代码的时候将字面值返回，比如 for 语句，此时就需要使用 ‘-’(dash) 来标记后面所接的一段是非字面表达式。否则，将会导致编译器错误。

而当需要使用字面表达式的时候呢，就需要用引导符号 ‘=’ 和 ‘!=’ 分别表示第二类转义式字面表达式和第三类非转义式字面表达式了。以 ‘=’ 为例，它会要求编译器将后面的字面表达式的值，作为纯文本引入到当前上下文当中，它与 ‘|’ 的区别仅仅在于 ‘=’ 连接产生字面值的表达式，而 ‘|’ 连接完全的显式字面表达式。读到这里，请打开 CodePen 链接1 找到 “Section A” 来进行在线的实验，如上图。

操作时，请尝试去掉 for 语句前的 dash 符号，看看是否会出现错误，或者尝试改变缩进量。值得引起注意的是，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

至于转义和非转义的区别就很简单了，具体可以通过搜索关键字 HTML符号转义 来了解。

第二部分 包含引入

正如前面介绍的，包含引入的概念在模板化开发当中有着非常重要的意义。此处举两个例子：代码复用

现在我们已经有了 A 页面，它搭建了一套框架，包含页面的导航、菜单和底部。而新开发的 B 页面恰好需要使用 A 定义的这套框架。通常我们会把 A 当中的内容复制到 B 当中，这没毛病，而且很简单易行。但是问题恰恰不在这里，问题就出在维护的时候。如果后期项目更新，设计更改，A 定义的框架要进行更新，那么所有使用其定义的页面都需要更新，当需要更改的页面太多，必然会导致效率降低，甚至出现大量的纰漏，这是非常可怕的。所以，我们需要像引入一个头文件那样，用引用关系来构建高度复用的代码。

功能延展

现在有一个项目，每个 pug 文件都需要配置一段预制的代码，比如

标签当中的 和 、