1.export 命令
export命令用戶規(guī)定模塊的對(duì)外接口
一個(gè)模塊就是一個(gè)獨(dú)立的文件,該文件內(nèi)部的所有變量,外部無法獲取,如果希望外部能夠讀取內(nèi)部的某個(gè)變量,就必須使用export關(guān)鍵字輸出該變量
用法1
使用export命令輸出變量沸移。
export var firstName = 'Michael';
export var lastName = 'Jackson';
用法2
在export命令后面策肝，使用大括號(hào)指定所要輸出的一組變量
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
注意:export命令規(guī)定的是對(duì)外的接口吸奴，必須與模塊內(nèi)部的變量建立一一對(duì)應(yīng)關(guān)系共虑。
// 報(bào)錯(cuò)
export 1;
// 報(bào)錯(cuò)
var m = 1;
export m;
正確寫法:
// 寫法一
export var m = 1;
// 寫法二
var m = 1;
export {m};
// 寫法三
var n = 1;
export {n as m};
2.import命令
import命令用于輸入其他模塊提供的功能,使用export命令定義了模塊的對(duì)外接口以后,其他js文件就可以通過import命令加載這個(gè)模塊
1.import命令接受一對(duì)大括號(hào),里面指定要從其他模塊導(dǎo)入的變量名,大括號(hào)里面的變量名,必須與被導(dǎo)入模塊對(duì)應(yīng)接口的名稱相同
// main.js
import {firstName, lastName, year} from './profile.js';
2.如果想為輸入的變量重新取一個(gè)名字愧怜，import命令要使用as關(guān)鍵字，將輸入的變量重命名
import { lastName as surname } from './profile.js';
3.import命令輸入的變量都是只讀的,因?yàn)樗谋举|(zhì)是出入家口,不遜在加載模塊的腳本里面,改寫接口
import {a} from './xxx.js'
a = {}; // Syntax Error : 'a' is read-only;
3.export default
1.Export default命令為模塊指定默認(rèn)輸出,使用import命令的時(shí)候妈拌，用戶需要知道所要加載的變量名或函數(shù)名拥坛，否則無法加載,但是用export default就不需要
2.使用export default默認(rèn)輸出
// export-default.js
export default function () {
console.log('foo');
}
上面代碼是一個(gè)模塊文件export-default.js，它的默認(rèn)輸出是一個(gè)函數(shù),其他模塊加載該模塊時(shí)尘分，import命令可以為該匿名函數(shù)指定任意名字猜惋。
// import-default.js
import customName from './export-default';
customName(); // 'foo'
上面代碼的import命令，可以用任意名稱指向export-default.js輸出的方法培愁，這時(shí)就不需要知道原模塊輸出的函數(shù)名著摔。需要注意的是，這時(shí)import命令后面定续，不使用大括號(hào)谍咆。
4.比較一下默認(rèn)輸出(export default)和正常輸出(export)。
第一組 默認(rèn)輸出
export default function crc32() { // 輸出
// ...
}
import crc32 from 'crc32'; // 輸入
第二組 正常輸出
export function crc32() { // 輸出
// ...
};
import {crc32} from 'crc32'; // 輸入
*上面代碼的兩組寫法私股，第一組是使用export default時(shí)摹察，對(duì)應(yīng)的import語句不需要使用大括號(hào)；第二組是不使用export default時(shí)倡鲸，對(duì)應(yīng)的import語句需要使用大括號(hào)供嚎。
*export default命令用于指定模塊的默認(rèn)輸出。顯然，一個(gè)模塊只能有一個(gè)默認(rèn)輸出克滴，因此export default命令只能使用一次逼争。所以，import命令后面才不用加大括號(hào)偿曙，因?yàn)橹豢赡芪ㄒ粚?duì)應(yīng)export default命令氮凝。
