自從 ES 模塊被添加到規(guī)范中后，JavaScript 中的模塊就更加簡(jiǎn)單了。模塊按文件分開(kāi)，異步加載。導(dǎo)出是用 export 關(guān)鍵字定義的；值可以用 import 關(guān)鍵字導(dǎo)入。

雖然導(dǎo)入和導(dǎo)出單個(gè)值的基礎(chǔ)知識(shí)非常容易掌握和使用，但還有許多其他方法可以使用 ES 模塊來(lái)使你的導(dǎo)入和導(dǎo)出按照你需要的方式工作。在本文中，我將介紹你可以在模塊中導(dǎo)出和導(dǎo)入的所有方法。

需要記住的一點(diǎn)是，導(dǎo)出和靜態(tài)導(dǎo)入只能發(fā)生在模塊的最外層。你不能從函數(shù)、if 語(yǔ)句或任何其他塊中導(dǎo)出或靜態(tài)導(dǎo)入。另外，動(dòng)態(tài)導(dǎo)入可以在函數(shù)中完成，我們將在本文最后討論它。

導(dǎo)出

默認(rèn)導(dǎo)出

每個(gè)模塊都有一個(gè) "默認(rèn) "導(dǎo)出，它代表了模塊導(dǎo)出的主要值。可能會(huì)有更多的導(dǎo)出值，但默認(rèn)導(dǎo)出值代表模塊的定義。一個(gè)模塊中只能有一個(gè)默認(rèn)導(dǎo)出。

const fruitBasket = new FruitBasket()

export default fruitBasket

注意，在默認(rèn)導(dǎo)出之前，我必須先定義該值。如果我想，我也可以立即導(dǎo)出我的值，而不把它分配給一個(gè)變量，但這樣我就不能在導(dǎo)出的同時(shí)將其賦值給一個(gè)變量。

我們可以默認(rèn)導(dǎo)出一個(gè)函數(shù)聲明和一個(gè)類聲明，而不需要先把它分配給一個(gè)變量。

export default function addToFruitBasket(fruit) {
 // ...
}

我們甚至可以將字面值作為默認(rèn)導(dǎo)出。

export default 123

命名導(dǎo)出

任何變量聲明都可以在創(chuàng)建時(shí)導(dǎo)出，這將創(chuàng)建一個(gè) "命名導(dǎo)出"，使用變量名作為導(dǎo)出名。

export const fruitBasket = new FruitBasket()

我們還可以立即導(dǎo)出函數(shù)和類的聲明。

export function addToFruitBasket(fruit) {
 // ...
}
export class FruitBasket {
 // ...
}

如果我們想導(dǎo)出一個(gè)已經(jīng)定義好的變量，我們可以通過(guò)大括號(hào)把變量名包裝為對(duì)象來(lái)實(shí)現(xiàn)。

const fruitBasket = new FruitBasket()

export { fruitBasket }

我們甚至可以使用 as 關(guān)鍵字來(lái)重命名我們的導(dǎo)出，使之與變量名不同。如果需要，我們還可以同時(shí)導(dǎo)出其他變量。

const fruitBasket = new FruitBasket()
class Apple {}

export { fruitBasket as basketOfFruit, Apple }

聚合導(dǎo)出

我們還會(huì)經(jīng)常遇到這種情況，就是從一個(gè)模塊導(dǎo)入模塊，然后立即導(dǎo)出這些值。比如這樣：

import fruitBasket from './fruitBasket.js'

export { fruitBasket }

當(dāng)你要同時(shí)導(dǎo)入和導(dǎo)出很多東西時(shí)，這可能會(huì)變得很繁瑣。ES 模塊允許我們同時(shí)導(dǎo)入和導(dǎo)出多個(gè)值。

export * from './fruitBasket.js'

這將把 ./fruitBasket.js 中所有命名導(dǎo)出重新包裝在一起再導(dǎo)出，但它不會(huì)導(dǎo)出默認(rèn)導(dǎo)出值，因?yàn)橐粋€(gè)模塊只能有一個(gè)默認(rèn)導(dǎo)出值。如果我們要導(dǎo)入和導(dǎo)出多個(gè)具有默認(rèn)導(dǎo)出的模塊，哪個(gè)值將成為導(dǎo)出模塊的默認(rèn)導(dǎo)出值呢？

我們可以專門(mén)從其他文件中導(dǎo)出默認(rèn)模塊，或者在重新導(dǎo)出時(shí)為默認(rèn)導(dǎo)出命名。

export { default } from './fruitBasket.js'

// 或者

export { default as fruitBasket } from './fruitBasket.js'

我們也可以有選擇地從另一個(gè)模塊導(dǎo)出不同的項(xiàng)目，而不是把所有的項(xiàng)目都重新導(dǎo)出。在這種情況下，我們也使用大括號(hào)。

export { fruitBasket as basketOfFruit, Apple } from './fruitBasket.js'

最后，我們可以使用 as 關(guān)鍵字將整個(gè)模塊打包成一個(gè)單獨(dú)的命名導(dǎo)出。假設(shè)我們有以下文件：

// fruits.js
export class Apple {}
export class Banana {}

現(xiàn)在我們可以將其打包成一個(gè)單獨(dú)的導(dǎo)出對(duì)象，這個(gè)對(duì)象包含了所有命名導(dǎo)出和默認(rèn)導(dǎo)出對(duì)象。

export * as fruits from './fruits.js'
// { Apple: class Apple, Banana: class Banana }

導(dǎo)入

默認(rèn)導(dǎo)入

當(dāng)導(dǎo)入一個(gè)默認(rèn)值時(shí)，我們需要給它指定一個(gè)名字。既然是默認(rèn)值，我們給它取什么名字并不重要。

import fruitBasketList from './fruitBasket.js'

我們也可以同時(shí)導(dǎo)入所有的導(dǎo)出，包括命名導(dǎo)出和默認(rèn)導(dǎo)出。這將會(huì)把所有的導(dǎo)出放到一個(gè)對(duì)象中，而默認(rèn)導(dǎo)出將被賦予 "default "的屬性名。

import * as fruitBasket from './fruitBasket.js'
// { default: fruitBasket }

命名導(dǎo)入

我們可以通過(guò)用大括號(hào)包裝導(dǎo)出的名稱來(lái)導(dǎo)入任何命名導(dǎo)出。

import { fruitBasket, Apple } from './fruitBasket.js'

我們也可以在導(dǎo)入時(shí)使用 as 關(guān)鍵字重命名導(dǎo)入。

import {fruitBasket as basketOfFruit, Apple} from './fruitBasket.js'

我們也可以在同一個(gè)導(dǎo)入語(yǔ)句中混合命名導(dǎo)出和默認(rèn)導(dǎo)出。默認(rèn)導(dǎo)出的內(nèi)容會(huì)先列出，然后是大括號(hào)內(nèi)的命名導(dǎo)出內(nèi)容。

import fruitBasket, { Apple } from './fruitBasket.js'

副作用導(dǎo)入

有時(shí)候一個(gè)模塊并沒(méi)有導(dǎo)出值，我們只希望把該模塊導(dǎo)入進(jìn)來(lái)立即執(zhí)行。導(dǎo)入這樣的一個(gè)模塊時(shí)，不需要在文件中列出任何導(dǎo)出值。這被稱為”副作用(side-effect)“導(dǎo)入，它將直接執(zhí)行模塊中的代碼而不提供任何導(dǎo)出值。

import './fruitBasket.js'

動(dòng)態(tài)導(dǎo)入

有時(shí)我們?cè)趯?dǎo)入文件之前并不知道文件的名稱。或者我們?cè)趫?zhí)行代碼到一半的時(shí)候才需要導(dǎo)入一個(gè)文件，我們可以使用動(dòng)態(tài)導(dǎo)入在代碼中的任何位置導(dǎo)入模塊。之所以稱之為 "動(dòng)態(tài)"，是因?yàn)閷?dǎo)入的路徑可能是不確定的，可以是字符串變量也可以是字符串表達(dá)式，而不像靜態(tài)導(dǎo)入那樣必須是一個(gè)字符串字面量。

由于 ES 模塊是異步的，所以模塊不會(huì)立即可用。我們必須等待它被加載后才能對(duì)它做事情。正因?yàn)槿绱?，?dòng)態(tài)導(dǎo)入會(huì)返回一個(gè)解析模塊的 Promise。

async function createFruit(fruitName) {
 try {
  const FruitClass = await import(`./${fruitName}.js`)
 } catch {
  console.error('Error getting fruit class module:', fruitName)
 }
 return new FruitClass()
}

總結(jié)

ES 導(dǎo)出的內(nèi)容可以是值（包括變量和字面量）也可以是類和函數(shù)的聲明，從導(dǎo)出方式上可以分為默認(rèn)導(dǎo)出、命名導(dǎo)出和聚合導(dǎo)出。根據(jù)不同的導(dǎo)出方式，導(dǎo)入可以分為默認(rèn)導(dǎo)入、命名導(dǎo)入、副作用導(dǎo)入和動(dòng)態(tài)導(dǎo)入。命名導(dǎo)出和導(dǎo)入均可以使用 as 指定別名。​導(dǎo)出和靜態(tài)導(dǎo)入必須在文件的最外層，動(dòng)態(tài)導(dǎo)入可以在代碼的函數(shù)中異步完成。

以上就是JavaScript ES 模塊的使用的詳細(xì)內(nèi)容，更多關(guān)于JavaScript ES 模塊的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論