如何在瀏覽器中使用ES6模塊
格式:<script type="module" src="....."></script>
特點(diǎn):模塊作用域溯职、自動(dòng)嚴(yán)格模式
導(dǎo)出變量的五種方式
第一種方式(逐個(gè)導(dǎo)出)
//module.js
export var a=1;
export var b=2;
//main.js
import {a,b} from './module.js';
console.log(a,b)
第二種方式(先聲明,再統(tǒng)一導(dǎo)出)
//module.js
var a=1;
var b=2;
export {a,b as myB};//重命名
//main.js
import {a,myB as B} from './module.js';//重命名
console.log(a,B)
第三種方式(默認(rèn)導(dǎo)出,只能使用一次)
//module.js
export default function(){
return 'export default默認(rèn)導(dǎo)出函數(shù)折欠,引用名字隨便起吧';
}
//main.js
import tr from './module.js';
console.log(tr())
第四種方式(全模塊同步導(dǎo)入)
//module.js
export var a=1;
export var b=2;
export default function(){
return 'export default默認(rèn)導(dǎo)出函數(shù)尚骄,引用名字隨便起吧';
}
//main.js
import * as all from './module.js';
console.log(all) //tr(),a,b
第五種方式(全模塊異步導(dǎo)入,使用promise)
//module.js
export var a=1;
export var b=2;
export default function(){
return 'export default默認(rèn)導(dǎo)出函數(shù)戈钢,引用名字隨便起吧';
}
//main.js
import ('./module.js').then(function(all){
console.log(all)
});
注意:
1沿后、export default 向外暴露的成員闯参,可以使用任意變量來(lái)接收
2彪蓬、在一個(gè)模塊中寸莫,export default 只允許向外暴露一次
3、在一個(gè)模塊中档冬,可以同時(shí)使用export default 和export 向外暴露成員
4膘茎、使用export向外暴露的成員桃纯,只能使用{ }的形式來(lái)接收,這種形式披坏,叫做【按需導(dǎo)出】
5态坦、export可以向外暴露多個(gè)成員,同時(shí)棒拂,如果某些成員伞梯,在import導(dǎo)入時(shí),不需要帚屉,可以不在{ }中定義
6谜诫、使用export導(dǎo)出的成員,必須嚴(yán)格按照導(dǎo)出時(shí)候的名稱(chēng)攻旦,來(lái)使用{ }按需接收
7喻旷、使用export導(dǎo)出的成員,如果想換個(gè)變量名稱(chēng)接收牢屋,可以使用as來(lái)起別名