[TOC] ***** ## 1 模塊意義 1. 模塊將大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。 2. 模塊加載方案之前，最主要的有CommonJS和AMD兩種。前者用于服務器，后者用于瀏覽器。 3. ES6在語言規格的層面上，實現了模塊功能，實現得相當簡單，完全可以取代現有的CommonJS和AMD規范，成為瀏覽器和服務器通用的模塊解決方法 4. CommonJs和AMD模塊則是在運行時確定，生成模塊對象，輸入時必須查找對象屬性，這種加載稱為運行時加載，完全沒有靜態化。 5. ES6的模塊盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。ES6模塊不是對象，通過export命令顯式指定輸出的代碼，輸入采用靜態命令的形式。這種加載稱為編譯時加載。 ## 2 模塊的簡單使用 1. 模塊功能主要由兩個命令構成 export和import，export命令用于規定模塊的對外接口，import命令用于輸入其他模塊提供的功能 ## 3 export命令 1. 模塊通常實現為獨立的文件。內部的所有變量，外部無法獲取，可以使用export命名導出該變量。第一種寫法就是聲明式導出。 ~~~ 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}; ~~~ 3. 除了輸出變量，還可以輸出函數或類 ~~~ export function multiply (x, y) { return x * y; }; ~~~ ~~~ function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion }; ~~~ 4. export命令規定的對外的接口，必須與模塊內部的變量建立一一對應關系。 ~~~ // 報錯 export 1; // 報錯 var m = 1; export m; ~~~ ~~~ // 寫法一 export var m = 1; // 寫法二 var m = 1; export {m}; // 寫法三 var n = 1; export {n as m}; ~~~ ~~~ // 報錯 function f() {} export f; // 正確 export function f() {}; // 正確 function f() {} export {f}; ~~~ 5. export語句輸出的接口，與對應的值是動態綁定關系，可以通過該接口，取到模塊內部實時的值 ~~~ export var foo = 'bar'; setTimeout(() => foo = 'baz', 500); ~~~ 6. ES6模塊與CommonJS規范完全不同。CommmonJS模塊輸出的是值的緩存，不存在動態更新。ES6模塊的import與export命名只可以用在模塊頂層，處于塊級作用內，就會報錯。 ## 4 import命令 1. 使用export命令導出的即可，使用其他JS文件可以通過import命令加載這個模塊文件 ~~~ // main.js import {firstName, lastName, year} from './profile'; function setName(element) { element.textContent = firstName + ' ' + lastName; } ~~~ 2. import 命令用于加載profile.js文件，從中輸出變量。import命令接受一個對象，里面指定從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊對外接口的名稱相同 3. 可以使用as關鍵字，將輸入變量重新命名 ~~~ import { lastName as surname } from './profile'; ~~~ 4. import命令具有提升效果，會提升到整個模塊的頭部，首先執行 ~~~ foo(); import { foo } from 'my_module'; ;不會報錯,import導入早于foo的調用 ~~~ 5. import語句會執行先加載的模塊，因此可以使用下面的寫法，僅僅執行lodash模塊，不輸入任何值 ~~~ import 'lodash'; ~~~ ## 5 模塊的整體加載 1. 可以使用星號(*)指定一個對象，所有輸出值都加載再者對象上面 ~~~ // circle.js export function area(radius) { return Math.PI * radius * radius; } export function circumference(radius) { return 2 * Math.PI * radius; } // main.js import { area, circumference } from './circle'; console.log('圓面積：' + area(4)); console.log('圓周長：' + circumference(14)); // 或者 import * as circle from './circle'; console.log('圓面積：' + circle.area(4)); console.log('圓周長：' + circle.circumference(14)); ~~~ ## 6 export default命令 1. 使用import命令，用戶需要知道加載的變量名或函數命令，否則無法加載。為了提供方便，可以直接輸出匿名函數，在導入時指定名稱 ~~~ // export-default.js export default function () { console.log('foo'); } // import-default.js import customName from './export-default'; customName(); // 'foo' ~~~ 2. 可以使用任意名稱指向export-default.js輸出的方法，就不需要知道原模塊輸出的函數名。需要注意的是，import命令后面，不可以使用大括號，也可以使用在非匿名函數前 ~~~ // export-default.js export default function foo() { console.log('foo'); } // 或者寫成 function foo() { console.log('foo'); } export default foo; ~~~ 3. 對比默認輸出和正常輸出 ~~~ // 輸出 export default function crc32() { // ... } // 輸入 import crc32 from 'crc32'; // 輸出 export function crc32() { // ... }; // 輸入 import {crc32} from 'crc32'; ~~~ 第一組使用export default時，對應import語句不需要使用大括號， export default命令用于指定模塊的默認輸出。一個模塊只能有一個默認輸出，因此export default命令只能使用一次。所以import命名后面不用加大括號，只能導出一個方法。 第二組不使用export default時，對應import語句需要使用大括號 4. 本質上export default輸出一個叫做default的變量或方法，允許任意命名。其后不能跟變量聲明語句 ~~~ // modules.js function add(x, y) { return x * y; }; export {add as default}; // 等同于 // export default add; // app.js import { default as xxx } from 'modules'; // 等同于 // import xxx from 'modules'; // 正確 export var a = 1; // 正確 var a = 1; export default a; // 錯誤 export default var a = 1; ~~~ 5. 如果要輸出默認的值，只需要在export default輸出指定值，也可以用來輸出類 ~~~ export default 42; // MyClass.js export default class { ... } // main.js import MyClass from 'MyClass' let o = new MyClass(); ~~~ ## 6 模塊的繼承 ## 7 模塊的循環加載 ## 8 參考 [ES6語法-Module](http://es6.ruanyifeng.com/#docs/module)