摘要：例如我們導入模塊，可以這么導入桃翁歡迎關注公眾號前端桃園報錯不能定義相同名字變量報錯，不能重新賦值小豬可以看到導入綁定這里不理解綁定，文章后面會解釋時，形式類似于對象解構，但實際上并無關聯。

歡迎訪問個人站點

一個模塊只不過是一個寫在文件中的 JavaScript 代碼塊。

模塊中的函數或變量不可用，除非模塊文件導出它們。

簡單地說，這些模塊可以幫助你在你的模塊中編寫代碼，并且只公開應該被你的代碼的其他部分訪問的代碼部分。

增加可維護性：由于每個模塊都是獨立的，每個人寫的代碼是不會相互影響的，在維護代碼的時候很好排查是哪個模塊出錯。

可復用性：在日常的開發中，特別是大點的項目，代碼的可復用性就更重要了，也許你會用復制粘貼的形式，但是直接一個 import 命令就可以搞定，豈不快哉。

避免命名污染：在 javascript 腳本中，所有的 js 文件的頂級作用域創建的變量，會被添加到共享的全局作用域，這就會導致不同的人開發的代碼可能會有相同的變量名，導致變量名污染。

導出模塊所用的命令是 export。

前面也提到一個模塊就是一個 javascript 文件，在這個模塊中定義的變量，外部是無法獲取到的，只有通過 export 導出的變量其他模塊才可以用

最簡單的導出方式就是在聲明的變量、函數、類前面加一個 export

// export1.js 

// 導出變量
export let name = "桃翁";

// 導出函數
export function print() {
    console.log("歡迎關注公眾號：前端桃園");
}

// 導出類
export class Person {
    constructor(name) {
        this.name = name;
    }
}
// 私有函數
function privateFunction () {
    console.log("我是私有函數，外部訪問不了我");
}

注意：

1. 被導出的函數或者類，都必須要有名稱，意思就是說不能用這種方式導出匿名函數或者匿名類。
2. privateFunction 函數，沒有加 export 命令，被當做這個模塊的私有變量，其他模塊是訪問不到的。

除了上面那種導出方式，還有另外一種

// export2.js

// 導出變量
let name = "桃翁"；

// 導出函數
function print() {
    return "歡迎關注公眾號：前端桃園";
}

// 導出類
class Person {
    constructor(name) {
        this.name = name;
    }
}

// 私有函數
function privateFunction () {
    return "我是私有函數，外部訪問不了我";
}

export { name, print, Person }

上面這種寫法導入一組變量，與 export1.js 是等價的。

導入的模塊可以理解為是生產者（或者服務的提供者），而使用導入的模塊的模塊就是消費者。

導入模塊的命令是 import, import 的基本形式如下：

import { var1, var2 } from "./example.js"

import 語句包含兩部分：一是導入需要的標識符，二是模塊的來源。

注意：瀏覽器中模塊來源要以「/」或者 「./」 或者 「../」開頭 或者 url 形式，不然會報錯。

例如我們導入 export1.js 模塊，可以這么導入

// import1.js
import { name, print, Person } from "./export1.js";

console.log(name); // 桃翁

console.log(print()); // 歡迎關注公眾號：前端桃園

// 報錯, 不能定義相同名字變量
let name = 2333; 

// 報錯，不能重新賦值
name = "小豬";

可以看到導入綁定(這里不理解綁定，文章后面會解釋)時，形式類似于對象解構，但實際上并無關聯。

當導入綁定的時候，綁定類似于使用了 const 定義，意味著不能定義相同的變量名，但是沒有暫時性死區特性(但是在 深入理解ES6 這本書里面說是有暫時性死區限制，我在 chrome 上測試了的，讀者希望也去試下，到底受不受限制)。

let name = 2333;

上面這行代碼會報錯。

這種導入方式是把整個生產者模塊當做單一對象導入，所有的導出被當做對象的屬性。

// import2.js
import * as namespace from "./export1.js"

console.log(namespace.name); // 桃翁

console.log(namespace.print()); // 歡迎關注公眾號：前端桃園

有時候你并不想導出變量的原名稱，需要重新命名,這個時候只需要使用 as 關鍵字來制定新的名字即可。

// export3.js

function print() {
    return "歡迎關注公眾號：前端桃園";
}

export { print as advertising }

拿上面導出的舉例子

// import3.js
import { advertising as print } from "./export3.js"

console.log(typeof advertising); // "undefined"

console.log(print()); // 歡迎關注公眾號：前端桃園 

此代碼導入 advertising 函數并重命名為了 print ，這意味著此模塊中 advertising 標識符不存在了。

default 關鍵字是用來做默認導入導出的。

// defaultExport.js

// 第一種默認導出方式
export default function print() {
    return "歡迎關注公眾號：前端桃園";
}

// 第二種默認導出方式
function print() {
    return "歡迎關注公眾號：前端桃園";
}

export default print;

// 第三種默認導出方式
function print() {
    return "歡迎關注公眾號：前端桃園";
}

export { print as default }

default 這個關鍵字在 JS 中具有特殊含義，既可以作為同命名導出，又標明了模塊需要使用默認值。

注意： 一個模塊中只能有一個默認導出。

默認導入和一般的導入不同之處就是不需要寫大括號了，看起來更簡潔。

把上面 defaultExport.js 模塊導出的作為例子

import print from "./defaultExport.js"

console.log(print()); // 歡迎關注公眾號：前端桃園 

那如果既有默認的又有非默認的怎么導入呢？看例子就明白了

// defaultImport1.js

let name = "桃翁";

function print() {
    return "歡迎關注公眾號：前端桃園";
}

export { name, print as default }

// defaultImport2.js

import print, { name } from "./defaultImport1.js"

console.log(print()); // 歡迎關注公眾號：前端桃園

console.log(name); // 桃翁

混合導入需要把默認導入的名稱放在最前面，然后用逗號和后面非默認導出的分割開。

思考了很久是否應該加上進階內容，本來是想寫入門級系列的，但是想了想，還是都寫進來吧，入門的看入門前面基礎，深入理解的看進階。

進階部分主要介紹 模塊的幾個特性

靜態執行

動態關聯

模塊不會重復執行

所謂靜態執行其實就是在編譯階段就需要確定模塊的依賴關系，那么就會出現 import 命令會優先于模塊其他內容的執行，會提前到編譯階段執行。

// static1.js
console.log("佩奇");

import { nouse } from "./static2.js"

// static2.js
export function nouse() {
    return "我是不需要的";
}

console.log("小豬");

可以看到最后輸出的應該是「小豬」先輸出，而「佩奇」后輸出，可以得出雖然 static2.js 在后面引入，但是會被提升到模塊的最前面先執行。

這也是我前面所說的不受暫時性死區原因之一，在這里可以寫一個例子試試：

// static3.js
console.log(nouse());

import { nouse } from "./static2.js"

// 結果：
// 小豬
// 我是不需要的

經檢驗確實是可以在 import 之前使用導入的綁定。

靜態執行還會導致一個問題，那就是不能動態導入模塊。

// 報錯
if (flag) {
    import { nouse } from "./static3.js"
}

// 報錯
import { "no" + "use" } from "./static3.js"

因為 import 是靜態執行的，所以在靜態(詞法)分析階段，是沒法得到表達式或者變量的值的。

但是為了解決這個問題，因為了 import() 這個函數，這個算擴展內容吧，寫太多了我怕沒人看完了，后面會有擴展閱讀鏈接。

所謂的動態關聯，其實就是一種綁定關系, 這是 ES6 非常重要的特性，一定仔細閱讀。

在 ES6 的模塊中，輸出的不是對象的拷貝，不管是引用類型還是基本類型, 都是動態關聯模塊中的值，。

// dynamic1.js
export let name = "桃翁";

export function setName(name) {
    name = name;
}

// dynamic2.js
import { name, setName } from "./dynamic1.js"

console.log(name); // 桃翁

setName("不要臉");

console.log(name); // 不要臉

奇跡般的發現在 dynamic2.js 模塊中可以修改 dynamic1.js 模塊里面的值, 并且反應到 name 綁定上（這個是重點，這個反應到了消費者模塊）, 所以我們把導入的變量叫做綁定。

在生產者模塊導出的變量與消費者模塊導入的變量會有一個綁定關系，無論前者或者后者發生改變，都會互相影響。

注意區分在一個文件或模塊中基本類型的賦值，兩者是互不影響的。

這個特性比較好理解，就是如果從一個生產者模塊中分別導入綁定，而不是一次性導入，生產者模塊不會執行多次。

// noRepeat1.js
export let name = "桃翁";

export let age = "22";

console.log("我正在執行。。。");

// noRepeat2.js
import { name } from "./noRepeat1.js";
import { age } from "./noRepeat1.js";

console.log(name);
console.log(age);

// 結果
// 我正在執行。。。
// 桃翁
// 22

雖然導入了兩次，但是 noRepeat1.js 只有執行一次。若同一個應用（注意是同一個應用不是模塊）中導入同一個模塊，則那些模塊都會使用一個模塊實例，意思就是說是一個單例。

碼字不易，寫技術文章是真的累，作者花的時間至少是讀者讀的時間的十倍。在此想到阮老師寫了那么多文章，不知道是花了多少時間，竟然還有人這么恨他，攻擊他的網站。

我在文章中給我公眾號打了很多廣告，在此抱個歉，剛運營的公眾號，需要拉點粉絲，不喜歡的注重內容就好。

原生ECMAScript模塊： 動態 import()