簡述JavaScript模塊化編程（二）

前置閱讀：簡述JavaScript模塊化（一）

在前面一文中，我們對前端模塊化所經歷的三個階段進行了了解：

1. CommonJs,由於是同步的，所以主要應用於服務器端，以Node.js為代表。
2. AMD，異步模塊定義，預加載，推薦依賴前置。以require.js為代表。
3. CMD，通用模塊加載，懶加載，推薦依賴就近。以Sea.js為代表。

而在ES6已經大行其道的今天，ES6中所提供的模塊化的方法也自然而然成了我們進行JavaScript模塊化編程的標准，因此ES6模塊的語法雖然在一些較為老的瀏覽器上不能直出，需要進行轉譯，但卻代表着未來的JavaScript發展趨勢。

ES6模塊特性

在ES6中將模塊認為是自動運行在嚴格模式下並且沒有辦法退出運行的JavaScript代碼。在一個模塊中定義的變量不會自動被添加到全局共享的作用域之中，這個變量只能作用在這個作用域中。此外模塊還必須導出一些外部文件可以訪問的元素，以供其他模塊或代碼使用。

除了這個基本特性，ES6模塊還有兩大特性也十分重要，需要額外注意：

• 首先是在模塊的頂部this值是undefined，這是由於在ES6中的模塊的代碼是在嚴格模式下執行的。（如果對this不是很熟悉的可以去看我的這篇文章：深入淺出this關鍵字）
• 其次，模塊不支持HTML風格的代碼注釋，這是早期瀏覽器所遺留下的JavaScript特性，在ES6的語法里不予支持。

基本用法-模塊加載

首先我們來看瀏覽器是如何加載模塊的。其實在ES6規范出來之前，web瀏覽器就規定了三種方式來引入JavaScript文件：

• 在沒有src屬性的<script>元素中直接內嵌JavaScript代碼
• 在<script>元素中通過src屬性指定一個地址來加載JavaScript代碼文件
• 通過Web Worker或Service Worker的方法加載並執行JavaScript代碼

而在瀏覽器中，默認的行為就是將JavaScript作為腳本來進行加載，而非模塊。所以我們要告訴瀏覽器我們加載的是模塊，方法就是在<script>元素中，將type屬性指定為"module"。具體看下面的示例：

// 第一種方式
<script type=""module>
    import { add } from "./example";
    let num = add(1, 1);
</script>
//  第二種方式
<script type="module" src="example.js">
// 第三種方式，以腳本的方式加載example.js
let worker = new Worker("example.js");

當HTML解析器遇到<script>元素的type="module"的時候，模塊文件就開始下載，直到文件被完全解析完成才會去執行模塊內的代碼。模塊文件是按照他們出現在HTML文件中順序執行的，也就是說無論用何種方式引入模塊，第一個<script type=""module>總是在第二個<script type=""module>之前執行。

基本用法-導出

在ES6中我們可以使用export關鍵字將一部分代碼暴露給其他模塊，以供其他模塊或代碼使用。先讓我們來看看export關鍵字在MDN的定義吧：

export語句用於在創建JavaScript模塊時，從模塊中導出函數、對象或原始值，以便其他程序可以通過 import 語句使用它們。（
此特性目前僅在 Safari 和 Chrome 原生實現。它在許多轉換器中實現，如Traceur Compiler，Babel或Rollup。）

通過MDN的定義我們可以知道：export關鍵字可以將其放在任何函數、對象或原始值前面，從而將它們從模塊中導出。示例如下：

//   ./example.js
// 導出變量
export var a = 1;
// 導出函數
export function addA(value) {
    return value + a;
}
//導出類
export class add1 {
    constructor(value) {
        this.value = value + a;
    }
}
//這個函數就是這個模塊所私有的，在外部不能訪問它
function say1() {
    console.log('我是不是很帥');
}
//這又是個函數
function say2() {
    console.log('沒錯我就是很帥');
}
//在后面對函數進行導出,它就不是私有的了
export say2;

需要注意的是：使用export導出的函數和類都需要一個名稱，除非使用default關鍵字，否則就不能用這個方法導出匿名函數或類。所以當我們需要導出匿名的函數或者類時，我們可以這么做：

//   ./example.js
//導出匿名函數
export default function(a, b) {
    return a + b；
}
//或者導出匿名的類
export default class {
consturctor(value) {
    this.value = value + 1;
    }
}

具體關於default關鍵字的用法我會在后面做具體介紹，現在只需記住：當我們需要導出匿名的函數或者類時要使用export default語法。

基本語法-導入

在ES6中，從模塊中導入的功能可以通過import關鍵字。import語句由兩部分組成：要導入元素的標識符和元素應當從哪個模塊導入。

//  ./say.js
import { say2 } from "./example.js";
console.log(say2()); // '沒錯我就是很帥'

import 后面的大括號中的say2表示從規定模塊導入的元素的名稱。關鍵字from后面的字符串則表示要導入的模塊的路徑，這通常是包含模塊的.js文件的相對或絕對路徑名，需要注意的是只允許使用單引號和雙引號的字符串來包裹路徑，瀏覽器使用的路徑格式與傳給<script>元素的相同，所以必須把文件的擴展名也加上。

（注：由於Node.js遵循基於文件系統前綴以區分本地文件個包的慣例，即example是一個包，而./exampple.js是一個本地文件。為了更好的兼容多個瀏覽器Node.js環境，我們一定要在路徑前包含./或../來表示要導入的文件。）

除此之外，我們還可以導入多個元素或者直接導入整個模塊：

// 導入多個元素
improt { a, addA, say2 } from "./example.js";
console.log(a); // 1
sonsole.log(addA(1); // 2

// 導入整個模塊
import * as example from "./example.js"
console.log(example.a); // 1
sonsole.log(example.addA(1); // 2
console.log(example.say2()); // '沒錯我就是很帥'

上面的導入整個模塊就是把example.js中導出的所有元素全部加載到一個叫做example的對象中，而所導出的元素就會作為example的屬性被訪問。因為example對象是作為example.js中所導出成員的命名空間對象而被創建的，所以這種導入方式被稱為命名空間導入（name space import)。

還有一點要注意的是，不管import語句把一個模塊寫了多少次，該模塊只執行一次。意思就是，在首次執行導入模塊后，實例化的模塊就會被保存在內存中，只要使用import語句引用它就可以重復使用它：

// 首次導入需要加載模塊example.js
import { a } from "./example.js"
// 下面的兩個import將無需加載example.js了
import { addA } from "./example.js"
import { say2 } from "./example.js"

當從模塊中導入一個元素時，它與const是一樣無法定義另一個同名變量和導入一個同名元素，也無法在import語句前使用元素或者改變導出的元素的值：

//接上面的代碼

say2 = 1 ;  //會拋出一個錯誤

這是由於ES6的import語句為導入的元素創建的是只讀綁定的標識符，而不是原始綁定。因此元素只有在被導出的模塊中才可以被修改，即使是將該模塊的全部導入也無法修改其中的元素。

//   ./example.js
// 這是一個函數
export function setA(newA) {
    a = newA;
}
//  ./say.js
import { a, setA } from "./example";
console.log(a);  // 1
a = 2;   //拋出錯誤

// 所以我們得這么做
setA(2); 
console.log(a);  // 2

調用setA(2)時會返回到example.js中去執行，將a設置為2。由於say.js導入的只是a的只讀綁定的標識符而已，因此會自動進行更改。

其他基本語法

1.語法限制

export和import在語法上還有一個重要的限制，那就是他們必須在條件語句和函數之外使用，例如：

if (ture) {
    export var a = 1;      //語法錯誤
}
function imp() {
    import a from "./example.js"; //語法錯誤
}

由於模塊語法存在的其中一個原因是讓JavaScript引擎可以靜態地確定哪些代碼是可以導出的，因此export和import語句被設計成靜態的，不能進行任何形式的動態導出或導入。

2.重命名解決

有時在開發中，我們在導入一些元素后不想使用它們的原始名稱了，我們就可以在導出過程或者導入過程中去改變導出元素的名稱：

// 導出過程
function add(a, b) {
    return a + b;
}
export { add as add1 };  //在導入過程中必須使用add1作為名稱 

// 導入過程
import {add as add1 } from "./example"
console.log(add1(1,1));  // 2
console.log(typeof add); //undefined

3.模塊的默認值

在CommonJS等其他的模塊化規范中，從模塊中導出或導入默認值是一個常見的用法，因此在ES6中也延用了這種用法並進行了優化。在ES6中我們可以使用default關鍵字來指定默認值，並且一個模塊只能默認一個導出值：

// ./example.js
// 第一種默認導出語法
export default function(a, b) {
    return a + b;
}
// 第二種默認導出語法
function add(a, b) {
    return a + b;
}
export default add;
// 第三種默認導出語法
function add(a, b) {
    return a + b;
}
export { add as default };

需要注意的是第三種語法，default關鍵字雖然不能作為元素的名稱，但可以作為元素的屬性名稱，因此可以使用as語法將add函數的屬性設置為default。

導入默認值的語法則是這樣的：

//  第一種語法
import add from "./example";
//  第二種語法
import { default as add } from "./example";

看到這里有些朋友可能會發現，我們的第一種語法中import關鍵字后面並沒有加大括號，認為這是錯誤的。其實這是導入默認值的獨特語法，在這的本地名稱add用於表示模塊導出的任何默認函數，這種語法是最純凈的，ES6標准創建團隊的大佬們也希望這種語法能成為web主流的模塊導入形式。

我們前面說的導入匿名函數也同樣使用這種語法：

//   ./example.js
//導出匿名函數
export default function(a, b) {
    return a + b；
}
// ./say.js
import add from "./example";
console.log(add(1,1));  // 2

在這里本地名稱add就是用於表示上面的匿名函數的。

4.導出已導入的元素

我們同樣可以在本模塊內導出我們在本模塊內導入的元素，有以下幾種語法：

//  第一種語法
import { add } from ./example.js;
export { add };

//  第二種語法
export { add } from ./example.js;

//換一個名稱導出
export { add as add1 } from ./example.js; //以add這個名稱導入，再以add1的名稱導出

// 導出整個模塊
export *  from ./example.js;

// 最后預祝自己8月份面試成功offer滿天飛-_-||