概述 歷史上，JavaScript 一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單的方法拼裝起來。其他語言都有這項功能，比如 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，但是 JavaScript 任何這方面的支持都沒有，這對開發大型的、復雜的項目形成了巨大障礙。 在 ES6 之前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用于服務器，后者用于瀏覽器。ES6 在語言標準的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規范，成為瀏覽器和服務器通用的模塊解決方案。 ES6 模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS 和 AMD 模塊，都只能在運行時確定這些東西。比如，CommonJS 模塊就是對象，輸入時必須查找對象屬性。 模塊功能主要由兩個命令構成：export和import。export命令用于規定模塊的對外接口（即導出模塊），import命令用于輸入模塊（即導入模塊）。 其中使用import命令的時候，用戶需要知道所要加載的變量名或函數名，否則無法加載，所以ES6為用戶提供了更方便的方法export default 用法 其中 export default、export、import 屬于ES6產物，module.exports和require屬于node.js產物。 node中導入模塊：var 名稱 = require('模塊標識符') node中向外暴露成員的形式：module.exports = {} export 用法1 ``` export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958; ``` 上面代碼ES6 將其視為一個模塊，里面用export命令對外部輸出了三個變量。 用法2 ``` var firstName = 'Michael'; var lastName = 'Jackson'; var year = 1958; ``` export { firstName, lastName, year }; 上面代碼在export命令后面，使用大括號指定所要輸出的一組變量。它與前一種寫法（直接放置在var語句前）是等價的，但是應該優先考慮使用這種寫法。因為這樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。 用法3 ``` export function multiply(x, y) { return x * y; } ``` //export命令除了輸出變量，還可以輸出函數或類（class） 通常情況下，export輸出的變量就是本來的名字，但是可以使用as關鍵字重命名。 ``` function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion }; ``` //上面代碼使用as關鍵字，重命名了函數v1和v2的對外接口。重命名后，v2可以用不同的名字輸出兩次。 //as的作用 => 將 xxx 重新命名為 xxx 需要特別注意的是，export命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系。 ``` // 報錯 export 1; // 報錯 var m = 1; export m; ``` //上面兩種寫法都會報錯，因為沒有提供對外的接口。第一種寫法直接輸出 1，第二種寫法通過變量m，還是直接輸出 1 也就是說用export 導出模塊的時候，如果變量或函數提前定義好了導出是必須加 {}, 如果沒有提前定義導出是必須以命名（定義的）的方式 ``` // 報錯 export 1; // 報錯 var m = 1; export m; // 報錯 function f() {} export f; // 正確 export var m = 1; // 正確 var m = 1; export {m}; // 正確 var n = 1; export {n as m}; // 正確 export function f() {}; // 正確 function f() {} export {f};　 import ``` 注意2點 1、由于import是靜態執行，所以不能使用表達式和變量，這些只有在運行時才能得到結果的語法結構。 ``` // 報錯 import { 'f' + 'oo' } from 'my_module'; // 報錯 let module = 'my_module'; import { foo } from module; // 報錯 if (x === 1) { import { foo } from 'module1'; } else { import { foo } from 'module2'; } ``` 2、模塊的整體加載 （除了指定加載某個輸出值，還可以使用整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對象上面） ``` export function area(radius) { return Math.PI * radius * radius; } export function circumference(radius) { return 2 * Math.PI * radius; } ``` import 導入上面代碼所有值方式 ``` import * as circle from './circle'; console.log('圓面積：' + circle.area(4)); console.log('圓周長：' + circle.circumference(14)); export default ``` export default命令，為模塊指定默認輸出。export default如果導出變量時必須時匿名，如果導出函數時可以時命名也可以匿名 導出變量 ``` // 正確 var a = 1; export default a; //或者 export default 1; //這樣做沒有實際意思 // 錯誤 export default var a = 1; ``` 導出函數 ``` export default function () { console.log('foo'); } //或者 export default function foo() { console.log('foo'); } // 或者 function foo() { console.log('foo'); } export default foo; ``` export default命令用于指定模塊的默認輸出。顯然，一個模塊只能有一個默認輸出，因此export default命令只能使用一次。所以，import命令后面才不用加大括號，因為只可能唯一對應export default命令。 本質上，export default就是輸出一個叫做default的變量或方法，然后系統允許你為它取任意名字。所以，下面的寫法是有效的。 所以通過以上用法可以總結export default和export區別 1、export default 向外暴露的成員，可以使用任意變量來接收 2、在一個模塊中，export default 只允許向外暴露一次 3、在一個模塊中，可以同時使用export default 和export 向外暴露成員 4、使用export向外暴露的成員，只能使用{ }的形式來接收，這種形式，叫做【按需導出】 5、export可以向外暴露多個成員，同時，如果某些成員，在import導入時，不需要，可以不在{ }中定義 6、使用export導出的成員，必須嚴格按照導出時候的名稱，來使用{ }按需接收 7、使用export導出的成員，如果想換個變量名稱接收，可以使用as來起別名 import語句和import()屬于ES6語法，而require()屬于node中的。其中import()是ES2020引入函數，支持動態加載模塊。 import命令能夠接受什么參數，import()函數就能接受什么參數，兩者區別主要是后者為動態加載。 import是靜態加載資源，編譯時放到代碼塊最頂層。 import()函數則是動態按需加載返回Promise 對象。import()函數可以用在任何地方，不僅僅是模塊，非模塊的腳本也可以使用。 import()函數它是運行時執行，也就是說，什么時候運行到這一句，就會加載指定的模塊。 import()函數與所加載的模塊沒有靜態連接關系，這點也是與import語句不相同。import()類似于 Node 的require方法，區別主要是前者是異步加載，后者是同步加載。 | | 參數 | 是否動態加載 | 與所加載的模塊是否有靜態連接關系 | | --- | --- |--- |--- | | import語句 | 引入的地址路徑 |否 |是 | | import() | 引入的地址路徑 | 是（異步加載） | 否 | | require() | 引入的地址路徑 | 是(同步加載) | 否 |