javascript中export 和export default的區別
前言
在前端開發過程中,實現模塊化使用是前端三大重要思想之一,也是前端開發者必須要精通的點,而且在前端求職面試中也是必考知識點。在ES6中,引入瞭模塊化理念,設計思想就是在編譯時候就能確定模塊的依賴關系,以及輸入和輸出的變量,其中就包含導出和導入兩個模塊。那麼本篇博文就來分享一下關於導出的時候export 和 export default的區別,關於導入相關的內容會在另外的文章中介紹,這裡隻介紹導出相關的內容,記錄一下,方便查閱使用。
export
1、基本用法
模塊通過export導出各種類型的變量,如字符串,數值,函數,類。基本用法如下所示:
導出的函數聲明與類聲明必須要有名稱(export default 另外考慮)。
不僅能導出聲明還能導出引用(如函數)。
export 命令可以出現在模塊的任何位置,但必需處於模塊的頂層。
註意:在使用export導出的時候,建議使用大括號指定所要輸出的一組變量在文檔結尾部分,明確導出的接口;函數和類都要有對應的名稱,導出文檔尾部會避免無對應的名稱的情況。
2、as用法
使用export命令導出接口名稱的時候,需要與模塊內部的變量有一一對應的關系;導入的變量名稱也需要和導出的接口名稱一致,但是順序可以不用一致。
不同模塊導出接口名稱重復的時候,需要使用as重新定義變量名,相當於做一個“等價轉換”的操作。
3、復合使用
在實際使用中,export 與 import 可以在同一模塊同時復合使用,復合使用的特點如下所示:
可以將導出的接口改名,包括 default。
復合使用 export 與 import 的時候,也可以導出全部,當前模塊導出的接口會覆蓋繼承導出的接口。
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"; // 大約等同於約下面兩段語句,不過上面導入導出方式的該模塊沒有導入 foo 與 bar import { foo, bar } from "methods"; export { foo, bar }; export { foo as bar } from "methods"; // 普通情況下的改名 export { foo as default } from "methods"; // 把 foo 轉導成 default export { default as foo } from "methods"; // 把 default 轉導成 foo export * from "methods"; // *號類型
export default
1、基本用法
在一個文件或模塊中,export default僅有一個導出,基本用法如下所示:
- export default 中的 default 是對應的導出接口變量。
- 模塊在通過export default 在做導出的時候,使用導入時則不需要加{ }。
- 在使用export default 向外暴露的成員的時候,可以使用任意變量來接收。
2、使用示例
var a = "My name is Jack!"; export default a; // 僅有一個導出 export default var c = "error"; // error,default 已經是對應的導出變量,不能跟著變量聲明語句 import b from "./xxx.js"; // 不需要加{}, 使用任意變量接收
區別
1、相同部分
1⃣️export 和 export default都是通過import導入的;
2⃣️export 和 export default都是用來導出的,如常量、函數、文件、模塊等等。
2、不同部分
1⃣️在一個文件或模塊中,export的導出可以有多個,但是export default僅有一個導出。也就是輸出單個變量使用export default,輸出多個變量使用export;
2⃣️模塊在通過 export 方式導出的時候,在使用導入時要加{ },而export default 在做導出的時候,使用導入時則不需要;
3⃣️使用 export default給模塊指定默認導出的時候,導入時候隻需要拿到文件名字即可;使用 export導出的時候,必須知道導出的函數或者變量等,導入的時候變量名需要和導出時的名字保持一致。
拓展:import導入
1、基本用法
基本用法如下所示:
- 模塊通過import導入各種類型的變量,如字符串,數值,函數,類。
- import 命令會提升到整個模塊的頭部,首先執行。
2、特點
隻讀屬性:不允許在加載模塊的腳本裡面,改寫接口的引用指向,即可以改寫 import 變量類型為對象的屬性值,但不能改寫 import 變量類型為基本類型的值。
單例模式:多次重復執行同一句 import 語句,那麼隻會執行一次,而不會執行多次。import 同一模塊,聲明不同接口引用,會聲明對應變量,但隻執行一次 import 。
靜態執行特性:import 是靜態執行,所以不能使用表達式和變量。
3、使用示例
示例一:
import {a} from "./aaa.js" a.foo = "hello"; // a = { foo : 'hello' }
示例二:
import { a, b } from "./xxx.js"; //導入多個變量的寫法
最後
通過上面介紹的關於前端開發中export 和 export default的區別的相關知識點,在實際開發中,這也是在開發過程中必用的功能,尤其是對於初中級開發者來說,更應該掌握這些情況的使用,更多相關javascript export和export default內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- 詳解vue組件之間相互傳值的方式
- 關於JavaScript使用export和import的兩個報錯解決
- export default 和 export 的使用方式示例詳解
- JavaScript中require和import的區別詳解
- 前端Vue中常用rules校驗規則詳解