ES6 模塊的加載實現 import和export

ES6的Class只是面向對象編程的語法糖，升級了ES5的構造函數的原型鏈繼承的寫法，並沒有解決模塊化問題。Module功能就是為了解決這個問題而提出的。

歷史上，JavaScript一直沒有模塊（module）體系，無法將一個大程序拆分成互相依賴的小文件，再用簡單方法拼裝起來。其他語言都有這項功能，比如Ruby的require、Python的import，甚至就連CSS都有@import 但是JavaScript任何這方面的支持都沒有，這對開發大型的、復雜的項目形成了巨大障礙。

在ES6之前，社區制定了一些模塊加載方案，最主要的有CommonJS和AMD兩種。前者用於服務器，后者用於瀏覽器。ES6在語言規格的層面上，實現了模塊功能，而且實現得相當簡單，完全可以取代現有的CommonJS和AMD規范，成為瀏覽器和服務器通用的模塊解決方案。

ES6模塊的設計思想，是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運行時確定這些東西。比如，CommonJS模塊就是對象，輸入時必須查找對象屬性。

// CommonJS模塊 let { stat, exists, readFile } = require('fs'); // 等同於 
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;

上面代碼的實質是整體加載fs模塊（即加載fs的所有方法），生成一個對象（_fs），然后再從這個對象上面讀取3個方法。這種加載稱為“運行時加載”，因為只有運行時才能得到這個對象，導致完全沒辦法在編譯時做“靜態優化”。

ES6模塊不是對象，而是通過export命令指式指定輸出的代碼，輸入時也采用靜態命令的形式。

// ES6模塊 import { stat, exists, readFile } from 'fs';

上面代碼的實質是從fs模塊加載3個方法，其他方法不加載。這種加載稱為“編譯時加載”，即ES6可以在編譯時就完成模塊加載，效率要比CommonJS模塊的加載方式高。當然，這也導致了沒法引用ES6模塊本身，因為它不是對象。

由於ES6模塊是編譯時加載，使得靜態分析成為可能。有了它，就能進一步拓寬JavaScript的語法，比如引入宏（macro）和類型檢驗（type system）這些只能靠靜態分析實現的功能。

除了靜態加載帶來的各種好處，ES6模塊還有以下好處。

• 不再需要UMD模塊格式了，將來服務器和瀏覽器都會支持ES6模塊格式。目前，通過各種工具庫，其實已經做到了這一點。
• 將來瀏覽器的新API就能用模塊格式提供，不再必要做成全局變量或者navigator對象的屬性。
• 不再需要對象作為命名空間（比如Math對象），未來這些功能可以通過模塊提供。

瀏覽器使用ES6模塊的語法如下。

<script type="module" src="foo.js"></script>

上面代碼在網頁中插入一個模塊foo.js，由於type屬性設為module，所以瀏覽器知道這是一個ES6模塊。

Node的默認模塊格式是CommonJS，目前還沒決定怎么支持ES6模塊。所以，只能通過Babel這樣的轉碼器，在Node里面使用ES6模塊。

嚴格模式

ES6的模塊自動采用嚴格模式，不管你有沒有在模塊頭部加上"use strict";。

嚴格模式主要有以下限制：

• 變量必須聲明后再使用
• 函數的參數不能有同名屬性，否則報錯
• 不能使用with語句
• 不能對只讀屬性賦值，否則報錯
• 不能使用前綴0表示八進制數，否則報錯
• 不能刪除不可刪除的屬性，否則報錯
• 不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop]
• eval不會在它的外層作用域引入變量
• eval和arguments不能被重新賦值
• arguments不會自動反映函數參數的變化
• 不能使用arguments.callee
• 不能使用arguments.caller
• 禁止this指向全局對象
• 不能使用fn.caller和fn.arguments獲取函數調用的堆棧
• 增加了保留字（比如protected、static和interface）

上面這些限制，模塊都必須遵守。由於嚴格模式是ES5引入的，不屬於ES6模塊所以請參閱相關ES5書籍，本書不再詳細介紹了。

export命令

模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其他模塊提供的功能。

一個模塊就是一個獨立的文件。該文件內部的所有變量，外部無法獲取。如果你希望外部能夠讀取模塊內部的某個變量，就必須使用export關鍵字輸出該變量。下面是一個JS文件，里面使用export命令輸出變量。

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

上面代碼是profile.js文件，保存了用戶信息。ES6將其視為一個模塊，里面用export命令對外部輸出了三個變量。

export的方法，除了像上面一樣，還有另外一種。

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

上面代碼在export命令后面，使用大括號指定所要輸出的一組變量。它與前一種寫法（直接放置在var語句前）是等價的，但是應該優先考慮使用這種寫法。因為這樣就可以在腳本尾部，一眼看清楚輸出了哪些變量。

export命令除了輸出變量，還可以輸出函數或類（class）。

export function multiply(x, y) { return x * y; };

上面代碼對外輸出一個函數multiply。

通常情況下，export輸出的變量就是本來的名字，但是可以使用as關鍵字重命名。

function v1() { ... } 
function v2() { ... }
export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion };

上面代碼使用as關鍵字，重命名了函數v1和v2的對外接口。重命名后，v2可以用不同的名字輸出兩次。

需要特別注意的是，export命令規定的是對外的接口，必須與模塊內部的變量建立一一對應關系。

// 報錯 export 1; 
// 報錯 var m = 1; 
export m;

上面兩種寫法都會報錯，因為沒有提供對外的接口。第一種寫法直接輸出1，第二種寫法通過變量m，還是直接輸出1。1只是一個值，不是接口。正確的寫法是下面這樣。

// 寫法一 export var m = 1; 
// 寫法二 var m = 1; export {m};
// 寫法三 var n = 1; export {n as m};

上面三種寫法都是正確的，規定了以外的接口m。其他腳本可以通過這個接口，取到值1。它們的實質是，在接口名與模塊內部變量之間，建立了一一對應的關系。

同樣的，function和class的輸出，也必須遵守這樣的寫法。

// 報錯 function f() {} export f; 
// 正確 export function f() {}; 
// 正確 function f() {} export {f};

另外，export語句輸出的接口，與其對應的值是動態綁定關系，即通過該接口，可以取到模塊內部實時的值。

export var foo = 'bar'; setTimeout(() => foo = 'baz', 500);

上面代碼輸出變量foo，值為bar，500毫秒之后變成baz。

這一點與CommonJS規范完全不同。CommonJS模塊輸出的是值的緩存，不存在動態更新，詳見下文《ES6模塊加載的實質》一節。

最后，export命令可以出現在模塊的任何位置，只要處於模塊頂層就可以。如果處於塊級作用域內，就會報錯，下一節的import命令也是如此。這是因為處於條件代碼塊之中，就沒法做靜態優化了，違背了ES6模塊的設計初衷。

function foo() { export default 'bar' // SyntaxError } 
foo()

上面代碼中，export語句放在函數之中，結果報錯。

import命令

使用export命令定義了模塊的對外接口以后，其他JS文件就可以通過import命令加載這個模塊（文件）。

// main.js import {firstName, lastName, year} from './profile'; 
function setName(element) { element.textContent = firstName + ' ' + lastName; }

上面代碼的import命令，就用於加載profile.js文件，並從中輸入變量。import命令接受一個對象（用大括號表示），里面指定要從其他模塊導入的變量名。大括號里面的變量名，必須與被導入模塊（profile.js）對外接口的名稱相同。

如果想為輸入的變量重新取一個名字，import命令要使用as關鍵字，將輸入的變量重命名。

import { lastName as surname } from './profile';

注意，import命令具有提升效果，變量提升到整個模塊的頭部，首先執行。

foo(); import { foo } from 'my_module';

上面的代碼不會報錯，因為import的執行早於foo的調用。

如果在一個模塊之中，先輸入后輸出同一個模塊，import語句可以與export語句寫在一起。

export { es6 as default } from './someModule'; 
// 等同於 import { es6 } from './someModule'; 
export default es6;

上面代碼中，export和import語句可以結合在一起，寫成一行。但是從可讀性考慮，不建議采用這種寫法而應該采用標准寫法。

另外，ES7有一個提案，簡化先輸入后輸出的寫法，拿掉輸出時的大括號。

// 提案的寫法 export v from 'mod';
// 現行的寫法 export {v} from 'mod';

import語句會執行所加載的模塊，因此可以有下面的寫法。

import 'lodash';

上面代碼僅僅執行lodash模塊，但是不輸入任何值。

模塊的整體加載

除了指定加載某個輸出值，還可以使用整體加載，即用星號（*）指定一個對象，所有輸出值都加載在這個對象上面。

下面是一個circle.js文件，它輸出兩個方法area和circumference。

// 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));

export default命令

從前面的例子可以看出，使用import命令的時候，用戶需要知道所要加載的變量名或函數名，否則無法加載。但是，用戶肯定希望快速上手，未必願意閱讀文檔，去了解模塊有哪些屬性和方法。

為了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令，為模塊指定默認輸出。

// export-default.js export default function () { console.log('foo'); }

上面代碼是一個模塊文件export-default.js，它的默認輸出是一個函數。

其他模塊加載該模塊時，import命令可以為該匿名函數指定任意名字。

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

上面代碼的import命令，可以用任意名稱指向export-default.js輸出的方法，這時就不需要知道原模塊輸出的函數名。需要注意的是，這時import命令后面，不使用大括號。

export default命令用在非匿名函數前，也是可以的。

// export-default.js export default function foo() { console.log('foo'); }
// 或者寫成 function foo() { console.log('foo'); } export default foo;

上面代碼中，foo函數的函數名foo，在模塊外部是無效的。加載的時候，視同匿名函數加載。

下面比較一下默認輸出和正常輸出。

// 輸出 export default function crc32() { // ... } 
// 輸��� import crc32 from 'crc32'; 
// 輸出 export function crc32() { // ... }; 
// 輸入 import {crc32} from 'crc32';

上面代碼的兩組寫法，第一組是使用export default時，對應的import語句不需要使用大括號；第二組是不使用export default時，對應的import語句需要使用大括號。

export default命令用於指定模塊的默認輸出。顯然，一個模塊只能有一個默認輸出，因此export deault命令只能使用一次。所以，import命令后面才不用加大括號，因為只可能對應一個方法。

本質上，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 default命令其實只是輸出一個叫做default的變量，所以它后面不能跟變量聲明語句。

// 正確 export var a = 1;
// 正確 var a = 1; export default a; 
// 錯誤 export default var a = 1;

上面代碼中，export default a的含義是將變量a的值賦給變量default。所以，最后一種寫法會報錯。

有了export default命令，輸入模塊時就非常直觀了，以輸入jQuery模塊為例。

import $ from 'jquery';

如果想在一條import語句中，同時輸入默認方法和其他變量，可以寫成下面這樣。

import customName, { otherMethod } from './export-default';

如果要輸出默認的值，只需將值跟在export default之后即可。

export default 42;

export default也可以用來輸出類。

// MyClass.js export default class { ... } 
// main.js import MyClass from 'MyClass'; 
let o = new MyClass();

模塊的繼承

模塊之間也可以繼承。

假設有一個circleplus模塊，繼承了circle模塊。

// circleplus.js export * from 'circle'; 
export var e = 2.71828182846; 
export default function(x) { return Math.exp(x); }