javascript中export?和export?default的區(qū)別
前言
在前端開發(fā)過程中,實(shí)現(xiàn)模塊化使用是前端三大重要思想之一,也是前端開發(fā)者必須要精通的點(diǎn),而且在前端求職面試中也是必考知識(shí)點(diǎn)。在ES6中,引入了模塊化理念,設(shè)計(jì)思想就是在編譯時(shí)候就能確定模塊的依賴關(guān)系,以及輸入和輸出的變量,其中就包含導(dǎo)出和導(dǎo)入兩個(gè)模塊。那么本篇博文就來分享一下關(guān)于導(dǎo)出的時(shí)候export 和 export default的區(qū)別,關(guān)于導(dǎo)入相關(guān)的內(nèi)容會(huì)在另外的文章中介紹,這里只介紹導(dǎo)出相關(guān)的內(nèi)容,記錄一下,方便查閱使用。
export
1、基本用法
模塊通過export導(dǎo)出各種類型的變量,如字符串,數(shù)值,函數(shù),類?;居梅ㄈ缦滤荆?/p>
導(dǎo)出的函數(shù)聲明與類聲明必須要有名稱(export default 另外考慮)。
不僅能導(dǎo)出聲明還能導(dǎo)出引用(如函數(shù))。
export 命令可以出現(xiàn)在模塊的任何位置,但必需處于模塊的頂層。
注意:在使用export導(dǎo)出的時(shí)候,建議使用大括號(hào)指定所要輸出的一組變量在文檔結(jié)尾部分,明確導(dǎo)出的接口;函數(shù)和類都要有對(duì)應(yīng)的名稱,導(dǎo)出文檔尾部會(huì)避免無對(duì)應(yīng)的名稱的情況。
2、as用法
使用export命令導(dǎo)出接口名稱的時(shí)候,需要與模塊內(nèi)部的變量有一一對(duì)應(yīng)的關(guān)系;導(dǎo)入的變量名稱也需要和導(dǎo)出的接口名稱一致,但是順序可以不用一致。
不同模塊導(dǎo)出接口名稱重復(fù)的時(shí)候,需要使用as重新定義變量名,相當(dāng)于做一個(gè)“等價(jià)轉(zhuǎn)換”的操作。
3、復(fù)合使用
在實(shí)際使用中,export 與 import 可以在同一模塊同時(shí)復(fù)合使用,復(fù)合使用的特點(diǎn)如下所示:
可以將導(dǎo)出的接口改名,包括 default。
復(fù)合使用 export 與 import 的時(shí)候,也可以導(dǎo)出全部,當(dāng)前模塊導(dǎo)出的接口會(huì)覆蓋繼承導(dǎo)出的接口。
4、使用示例
示例一:
/*-----export [dome.js]-----*/ let name = "Jack"; let age =30; let fun = function(){ return "My name is" + name + "! I'm '" + age + "years old." } let mClass = class mClass { static aaa = "Hello!"; } export { name, age, fun, mClass }
示例二:
/*-----export [demo1.js]-----*/ let name = "Jack"; export { name as exportName } /*-----export [demo2.js]-----*/ let name2 = "Jack"; export { name2 } /*-----export [demo3.js]-----*/ let name3 = "Jack"; export { name3 }
示例三:
export { foo, bar } from "methods"; // 大約等同于約下面兩段語句,不過上面導(dǎo)入導(dǎo)出方式的該模塊沒有導(dǎo)入 foo 與 bar import { foo, bar } from "methods"; export { foo, bar }; export { foo as bar } from "methods"; // 普通情況下的改名 export { foo as default } from "methods"; // 把 foo 轉(zhuǎn)導(dǎo)成 default export { default as foo } from "methods"; // 把 default 轉(zhuǎn)導(dǎo)成 foo export * from "methods"; // *號(hào)類型
export default
1、基本用法
在一個(gè)文件或模塊中,export default僅有一個(gè)導(dǎo)出,基本用法如下所示:
- export default 中的 default 是對(duì)應(yīng)的導(dǎo)出接口變量。
- 模塊在通過export default 在做導(dǎo)出的時(shí)候,使用導(dǎo)入時(shí)則不需要加{ }。
- 在使用export default 向外暴露的成員的時(shí)候,可以使用任意變量來接收。
2、使用示例
var a = "My name is Jack!"; export default a; // 僅有一個(gè)導(dǎo)出 export default var c = "error"; // error,default 已經(jīng)是對(duì)應(yīng)的導(dǎo)出變量,不能跟著變量聲明語句 import b from "./xxx.js"; // 不需要加{}, 使用任意變量接收
區(qū)別
1、相同部分
1??export 和 export default都是通過import導(dǎo)入的;
2??export 和 export default都是用來導(dǎo)出的,如常量、函數(shù)、文件、模塊等等。
2、不同部分
1??在一個(gè)文件或模塊中,export的導(dǎo)出可以有多個(gè),但是export default僅有一個(gè)導(dǎo)出。也就是輸出單個(gè)變量使用export default,輸出多個(gè)變量使用export;
2??模塊在通過 export 方式導(dǎo)出的時(shí)候,在使用導(dǎo)入時(shí)要加{ },而export default 在做導(dǎo)出的時(shí)候,使用導(dǎo)入時(shí)則不需要;
3??使用 export default給模塊指定默認(rèn)導(dǎo)出的時(shí)候,導(dǎo)入時(shí)候只需要拿到文件名字即可;使用 export導(dǎo)出的時(shí)候,必須知道導(dǎo)出的函數(shù)或者變量等,導(dǎo)入的時(shí)候變量名需要和導(dǎo)出時(shí)的名字保持一致。
拓展:import導(dǎo)入
1、基本用法
基本用法如下所示:
- 模塊通過import導(dǎo)入各種類型的變量,如字符串,數(shù)值,函數(shù),類。
- import 命令會(huì)提升到整個(gè)模塊的頭部,首先執(zhí)行。
2、特點(diǎn)
只讀屬性:不允許在加載模塊的腳本里面,改寫接口的引用指向,即可以改寫 import 變量類型為對(duì)象的屬性值,但不能改寫 import 變量類型為基本類型的值。
單例模式:多次重復(fù)執(zhí)行同一句 import 語句,那么只會(huì)執(zhí)行一次,而不會(huì)執(zhí)行多次。import 同一模塊,聲明不同接口引用,會(huì)聲明對(duì)應(yīng)變量,但只執(zhí)行一次 import 。
靜態(tài)執(zhí)行特性:import 是靜態(tài)執(zhí)行,所以不能使用表達(dá)式和變量。
3、使用示例
示例一:
import {a} from "./aaa.js" a.foo = "hello"; // a = { foo : 'hello' }
示例二:
import { a, b } from "./xxx.js"; //導(dǎo)入多個(gè)變量的寫法
最后
通過上面介紹的關(guān)于前端開發(fā)中export 和 export default的區(qū)別的相關(guān)知識(shí)點(diǎn),在實(shí)際開發(fā)中,這也是在開發(fā)過程中必用的功能,尤其是對(duì)于初中級(jí)開發(fā)者來說,更應(yīng)該掌握這些情況的使用,更多相關(guān)javascript export和export default內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)很浪漫的氣泡冒出特效
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)很浪漫的氣泡冒出特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-11-11JavaScript實(shí)現(xiàn)拼圖式滑塊驗(yàn)證功能
滑塊驗(yàn)證碼是在網(wǎng)站、APP等應(yīng)用中常見的一種驗(yàn)證方式,通過按照一定規(guī)則滑動(dòng)滑塊到指定位置完成驗(yàn)證,才可以進(jìn)行下一步操作,本文給大家分享基于JavaScript實(shí)現(xiàn)拼圖式滑塊驗(yàn)證功能,感興趣的朋友一起看看吧2022-06-06JavaScript中的E-mail 地址格式驗(yàn)證
本文給大家分享JavaScript中的E-mail 地址格式驗(yàn)證,項(xiàng)目要求輸入的數(shù)據(jù)必須包含@符號(hào)和點(diǎn)號(hào)。代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2018-03-03基于JavaScript實(shí)現(xiàn)微信搶紅包功能
本文通過實(shí)例代碼給大家介紹了基于JavaScript實(shí)現(xiàn)微信搶紅包功能,金額隨機(jī),額度在0.01和(剩余平均值*2)之間,具體的實(shí)例代碼大家參考下本文2017-07-07原生javascript實(shí)現(xiàn)圖片輪播切換效果
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)圖片輪播切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07