ES6模塊主要有兩個(gè)功能:export和import
export用于對(duì)外輸出本模塊(一個(gè)文件可以理解為一個(gè)模塊)變量的接口
import用于在一個(gè)模塊中加載另一個(gè)含有export接口的模塊呻顽。
也就是說(shuō)使用export命令定義了模塊的對(duì)外接口以后,其他JS文件就可以通過(guò)import命令加載這個(gè)模塊(文件)丹墨。這幾個(gè)都是ES6的語(yǔ)法廊遍。
export和import(一個(gè)導(dǎo)出一個(gè)導(dǎo)入)
一個(gè)a.js文件有如下代碼:
export var name="李四";
在其它文件里引用如下:
import { name } from "/.a.js" //路徑根據(jù)你的實(shí)際情況填寫
export default {
data () {
return { }
},
created:function(){
alert(name)//可以彈出來(lái)“李四”
}
}
上面的例子是導(dǎo)出單個(gè)變量的寫法,如果是導(dǎo)出多個(gè)變量就應(yīng)該按照下邊的方法贩挣,用大括號(hào)包裹著需要導(dǎo)出的變量:
var name1="李四";
var name2="張三";
export { name1 ,name2 }
在其他文件里引用如下:
import { name1 , name2 } from "/.a.js" //路徑根據(jù)你的實(shí)際情況填寫
export default {
data () {
return { }
},
created:function(){
alert(name1)//可以彈出來(lái)“李四”
alert(name2)//可以彈出來(lái)“張三”
}
}
如果導(dǎo)出的是個(gè)函數(shù)呢喉前,那應(yīng)該怎么用呢,其實(shí)一樣,如下
function add(x,y){
alert(x*y)
// 想一想如果這里是個(gè)返回值比如: return x-y王财,下邊的函數(shù)怎么引用
}
export { add }
在其他文件里引用如下:
import { add } from "/.a.js" //路徑根據(jù)你的實(shí)際情況填寫
export default {
data () {
return { }
},
created:function(){
add(4,6) //彈出來(lái)24
}
}
export與export default
看完上面這幾個(gè)例子卵迂,想必你一定了解了如何使用export,import,如果還是不懂可以自己動(dòng)手試一試绒净。上面講的是export和import见咒,但是export跟export default 有什么區(qū)別呢?如下:
1挂疆、export與export default均可用于導(dǎo)出常量改览、函數(shù)、文件缤言、模塊等
2宝当、你可以在其它文件或模塊中通過(guò)import+(常量 | 函數(shù) | 文件 | 模塊)名的方式,將其導(dǎo)入胆萧,以便能夠?qū)ζ溥M(jìn)行使用
3庆揩、在一個(gè)文件或模塊中,export鸳碧、import可以有多個(gè)盾鳞,export default僅有一個(gè)
4、通過(guò)export方式導(dǎo)出瞻离,在導(dǎo)入時(shí)要加{ }腾仅,export default則不需要
這樣來(lái)說(shuō)其實(shí)很多時(shí)候export與export default可以實(shí)現(xiàn)同樣的目的,只是用法有些區(qū)別套利。注意第四條推励,通過(guò)export方式導(dǎo)出,在導(dǎo)入時(shí)要加{ }肉迫,export default則不需要验辞。使用export default命令,為模塊指定默認(rèn)輸出喊衫,這樣就不需要知道所要加載模塊的變量名跌造。
var name="李四";
export { name }
//import { name } from "/.a.js"
可以寫成:
var name="李四";
export default name
//import name from "/.a.js" 這里name不需要大括號(hào)
再看第3條,在一個(gè)文件或模塊中,export壳贪、import可以有多個(gè)陵珍,export default僅有一個(gè),也就是說(shuō)如下代碼:
var name1="李四";
var name2="張三";
export { name1 ,name2 }
也可以寫成如下违施,也是可以的互纯,import跟他類似。
var name1="李四";
var name2="張三";
export name1;
export name2;