1. export與模塊導出
export
語法聲明用于導出函數(shù)乐纸、對象粘我、指定文件(或模塊)的原始值墓卦。export
有兩種模塊導出方式:
- 命名式導出(名稱導出),導出每個模塊可以多個
- 定義式導出(默認導出)照瘾,默認導出每個模塊僅一個馅闽。
export
可能會有以下幾種形式的導出語法:
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // 也可以是 var
export let name1 = …, name2 = …, …, nameN; // 也可以是 var, const
export default expression;
export default function (…) { … } // 也可以是 class, function*
export default function name1(…) { … } // 也可以是 class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
-
name1… nameN
—— 導出的“標識符”。導出后夭织,可以通過這個“標識符”在另一個模塊中使用import引用 -
default
—— 設置模塊的默認導出吭露。設置后import
不通過“標識符”而直接引用默認導入 -
*
—— 繼承模塊并導出繼承模塊所有的方法和屬性 -
as
—— 重命名導出“標識符” -
from
—— 從已經(jīng)存在的模塊、腳本文件…導出
命名式導出
模塊可以通過export
前綴關(guān)鍵詞聲明導出對象尊惰,導出對象可以是多個讲竿。這些導出對象用名稱進行區(qū)分,稱之為命名式導出弄屡。
export { myFunction }; // 導出一個已定義的函數(shù)
export const foo = Math.sqrt(2); // 導出一個常量
var name = '菜鳥教程';
var domain = 'http://www.runoob.com/';
export {name, domain};
模塊導出時题禀,我們可以使用as關(guān)鍵字對導出成員進行重命名:
var name = '菜鳥教程';
var domain = 'http://www.runoob.com/';
export {name as siteName, domain};
使用示例:
// "my-module.js" 模塊
export function cube(x) {
return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { foo };
在另一個模塊(腳本文件)中,我們可以像下面這樣引用:
import { cube, foo } from 'my-module';
console.log(cube(3)); // 27
console.log(foo); // 4.555806215962888
注意:在import
引用時膀捷,也要使用相同的名稱來引用相應的值
定義式導出
默認導出也被稱做定義式導出迈嘹。默認導出每個導出只有一個單一值,這個輸出可以是一個函數(shù)全庸、類或其它類型的值秀仲,這樣在模塊import
導入時也會很容易引用。
export default function() {}; // 可以導出一個函數(shù)
export default class(){}; // 也可以出一個類
用法示例:
// "my-module.js"模塊
export default function (x) {
return x * x * x;
}
在另一個模塊(腳本文件)中壶笼,我們可以像下面這樣引用神僵,相對名稱導出來說使用更為簡單:
// 引用 "my-module.js"模塊
import cube from 'my-module';
console.log(cube(3)); // 27
命名式導出與默認導出
默認導出可以理解為另一種形式的命名導出,默認導出可以認為是使用了default名稱的命名導出覆劈。
下面兩種導出方式是等價的:
const D = 123;
export default D;
export { D as default };
注意:export default
和 export
輸出時候保礼,使用import
的區(qū)別
-
export default
對應的import
語句不需要使用大括號,而export
對應的import
需要大括號 -
export default
對應的import
不需要知道加載的模塊里的變量名责语。而export
對應的import
必須和export
的變量一樣炮障。
2. import
import
語法聲明用于從已導出的模塊、腳本中導入函數(shù)坤候、對象胁赢、指定文件(或模塊)的原始值。import
模塊導入與export
模塊導出功能相對應白筹,也存在兩種模塊導入方式:命名式導入(名稱導入)和定義式導入(默認導入)智末。
import
可能會有以下幾種形式的導入語法:
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
-
name
—— 從將要導入模塊中收到的導出值的名稱 -
member, memberN
—— 從導出模塊,導入指定名稱的多個成員 -
defaultMember
—— 從導出模塊遍蟋,導入默認導出成員 -
alias, aliasN
—— 別名吹害,對指定導入成員進行的重命名 -
module-name
—— 要導入的模塊。是一個文件名 -
as
—— 重命名導入成員名稱(“標識符”) -
from
—— 從已經(jīng)存在的模塊虚青、腳本文件等導入
用法示例:
// --file.js--
function getJSON(url, callback) {
let xhr = new XMLHttpRequest();
xhr.onload = function () {
callback(this.responseText)
};
xhr.open("GET", url, true);
xhr.send();
}
export function getUsefulContents(url, callback) {
getJSON(url, data => callback(JSON.parse(data)));
}
// --main.js--
import { getUsefulContents } from "file";
getUsefulContents("http://itbilu.com", data => {
doSomethingUseful(data);
});
在一個文件或模塊中它呀,export、import可以有多個,export default僅有一個
參考資料: