前言

在前端開發(fā)過程中，實(shí)現(xiàn)模塊化使用是前端三大重要思想之一，也是前端開發(fā)者必須要精通的點(diǎn)，而且在前端求職面試中也是必考知識點(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)容會在另外的文章中介紹，這里只介紹導(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í)候，建議使用大括號指定所要輸出的一組變量在文檔結(jié)尾部分，明確導(dǎo)出的接口；函數(shù)和類都要有對應(yīng)的名稱，導(dǎo)出文檔尾部會避免無對應(yīng)的名稱的情況。

2、as用法

使用export命令導(dǎo)出接口名稱的時(shí)候，需要與模塊內(nèi)部的變量有一一對應(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)出的接口會覆蓋繼承導(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"; // *號類型

export default

1、基本用法

  在一個(gè)文件或模塊中，export default僅有一個(gè)導(dǎo)出，基本用法如下所示：

• export default 中的 default 是對應(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)是對應(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 命令會提升到整個(gè)模塊的頭部，首先執(zhí)行。

2、特點(diǎn)

只讀屬性：不允許在加載模塊的腳本里面，改寫接口的引用指向，即可以改寫 import 變量類型為對象的屬性值，但不能改寫 import 變量類型為基本類型的值。

單例模式：多次重復(fù)執(zhí)行同一句 import 語句，那么只會執(zhí)行一次，而不會執(zhí)行多次。import 同一模塊，聲明不同接口引用，會聲明對應(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)知識點(diǎn)，在實(shí)際開發(fā)中，這也是在開發(fā)過程中必用的功能，尤其是對于初中級開發(fā)者來說，更應(yīng)該掌握這些情況的使用，更多相關(guān)javascript export和export default內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論