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僅有一個
參考資料：
