JavaScript export語句

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

此語句用來規定模組對外的介面。

預設狀態下，模組之間是互相獨立的，如果希望其他模組能夠獲取當前模組的變數、函式或者類，就需要使用export語句類進行相關的定義。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
export let name1, name2, …, nameN; // also var

引數解析:

（1）.nameN:要輸出的變數、函式或者類名。

程式碼例項:

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

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
export { name1, name2, …, nameN };

引數解析:

（1）.nameN: 要輸出的變數、函式或者類名。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
var webName = "螞蟻部落";
function func() {
  //code
}
export { webName, func}

和語法結構一相比，推薦使用此方法，可以將要輸出的內容放在模組底部，一目瞭然。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
export { name1 as alias1, name2 as alias2, …, nameN as aliasN };

引數解析:

（1）.nameN:要輸出的變數、函式或者類名。

（2）.aliasN:要輸出的nameN變數、函式或者類的別名。

如果想為輸出的內容重新命名，可以使用as關鍵字。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
function v1() {
  //code
}
function v2() { 
  //code
}
export {
  v1 as streamV1,
  v2 as streamV2,
};

上面的程式碼分別將輸出函式v1和v2重新命名為streamV1和streamV2。

語法結構四:

[JavaScript] 純文字檢視 複製程式碼
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

這裡就不多介紹了，具體可以參閱export default用法一章節。

語法結構五:

[JavaScript] 純文字檢視 複製程式碼
export * from module;

這裡就不多介紹了，具體可以參閱js模組載入星號的作用一章節。

語法結構六:

[JavaScript] 純文字檢視 複製程式碼
export { name1, name2, …, nameN } from module;

引數解析:

（1）.nameN:要輸出的變數、函式或者類名。

（2）.module:模組名稱。

表示從module模組先輸入指定內容，然後再規定相應內容由當前模組輸出。

程式碼例項:

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

也可以對nameN命名別名，程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
export { webName as wN, func as fc} from "antzone";