export default用法

更多關於模組載入內容可以參閱ES2015 Module模組一章節。

在使用import命令的時候，我們通常需要明確的知道要載入的變數名或者函式名。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
import {webName, age, url} from "antzone";

上面的程式碼可以從antzone模組中分別載入名為webName、age和url內容。

當然我們也可以載入的時候自定義載入內容的名稱，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
import {webName as wn, age as a, url as u} from "antzone";

有一種方式可以讓我們無需明確知道名稱就可以載入指定模組中的內容，那就是將要輸出內容設定為預設輸出。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
export default function () {
  //code
}

上面程式碼將匿名函式設定為預設輸出；在接收模組，我們可以給此預設匿名函式自定義任意名稱:

[JavaScript] 純文字檢視 複製程式碼
import func from 'antzone';
func();

上面的程式碼為載入的預設匿名函式重名為func。

當然函式也可以是具名的，預設輸出的內容也可以是變數、類甚至是一個值。

預設輸出在一個模組中只有一個，所以export default命令在同一個模組中只能使用一次。

import命令在載入預設輸出內容的時候不需使用中括號，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
import webName from "antzone";

上面的程式碼是從模組antzone載入預設變數或者函式等，並重新命名為"webName"。

如果模組antzone中沒有定義預設輸出內容，那麼上面的程式碼就會報錯。

如果想在載入預設輸出內容的同時，也要載入其他內容，可以採用如下方式:

[JavaScript] 純文字檢視 複製程式碼
import webName, {age, url} from "antzone";

實質上，我們可以認為default是一個變數或者函式等要輸出內容的別名，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
function func(x, y) {
  //code
}
export {func as default};
// 等同於
export default func;

上面是輸出模組的程式碼，下面再看一下載入模組程式碼:

[JavaScript] 純文字檢視 複製程式碼
import { default as ant } from "antzone";
// 等同於
import ant from "antzone";

在語法上，export命令後面不能直接跟一個值或者一個變數，但是export default後面可以直接跟著一個值或者變數，因為它是將這個值或者變數的值賦值給變數default，然後輸出，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
var webName = "螞蟻部落";
export default webName;

正因為如此，export default命令後面不能跟著變數宣告語句，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
export default var webName = "螞蟻部落";

後面跟著一個變數宣告語句，所以程式碼是錯誤的。