對於從老版本js過來的人來說，模組的概念可以說是邁入新前端開發的第一道坎；畢竟歷史上，JavaScript 一直沒有模組（module）體系；

模組功能主要由兩個命令構成：export和import粗礦理解一下，字面意思，一個匯入，一個匯出；

export

兩種寫法，例子來源--阮一峰老師的ES6標準入門第三版（這是一個開源書籍，放心去看，也有紙質版可以購買）

1. 直接在定義的時候匯出：

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;
 

2. 在指令碼檔案尾部匯出（推薦這種，很明朗）：

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName, lastName, year };

• export default 命令

使用這個命令匯出後，其他模組載入該模組時，import命令可以為該匿名函式指定任意名字。

// export-default.js
export default function () {
  console.log('foo');
}
/*檔案分割線*/

// import-default.js
import customName from './export-default';
customName(); // 'foo'
 

import

使用export命令定義了模組的對外介面以後，其他 JS 檔案就可以通過import命令載入這個模組。

• 匯入的幾種方式

1. 按需匯入

// main.js

import { area, circumference } from './circle';

console.log('圓面積：' + area(4));
console.log('圓周長：' + circumference(14));

2. 整體載入

import * as circle from './circle';

console.log('圓面積：' + circle.area(4));
console.log('圓周長：' + circle.circumference(14));
 

ps: 上面介紹了一些概念，用以自己知識更新時做個流程梳理，至少在閱讀別人的原始碼時不至於第一行就被勸退……前端的發展，對於還停留在只是偶爾用傳統（html+css+js）來構建測試頁面的我衝擊還是蠻大的，關於模組還有很多細節和知識點，詳情資訊可檢視阮一峰老師的ES6標準入門第三版或按需搜尋來深入理解；