JavaScript ES 模块:现代化前端编程必备技能

自从 ES 模块被添加到规范中后,JavaScript 中的模块就更加简单了。模块按文件分开,异步加载。导出是用 export 关键字定义的;值可以用 import 关键字导入。

虽然导入和导出单个值的基础知识非常容易掌握和使用,但还有许多其他方法可以使用 ES 模块来使你的导入和导出按照你需要的方式工作。在本文中,我将介绍你可以在模块中导出和导入的所有方法。

需要记住的一点是,导出和静态导入只能发生在模块的最外层。你不能从函数、if 语句或任何其他块中导出或静态导入。另外,动态导入可以在函数中完成,我们将在本文最后讨论它。

导出 默认导出

每个模块都有一个 "默认 "导出,它代表了模块导出的主要值。可能会有更多的导出值,但默认导出值代表模块的定义。一个模块中只能有一个默认导出。

const fruitBasket = new FruitBasket() export default fruitBasket

注意,在默认导出之前,我必须先定义该值。如果我想,我也可以立即导出我的值,而不把它分配给一个变量,但这样我就不能在导出的同时将其赋值给一个变量。

我们可以默认导出一个函数声明和一个类声明,而不需要先把它分配给一个变量。

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

我们甚至可以将字面值作为默认导出。

export default 123 命名导出

任何变量声明都可以在创建时导出,这将创建一个 "命名导出",使用变量名作为导出名。

export const fruitBasket = new FruitBasket()

我们还可以立即导出函数和类的声明。

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

如果我们想导出一个已经定义好的变量,我们可以通过大括号把变量名包装为对象来实现。

const fruitBasket = new FruitBasket() export { fruitBasket }

我们甚至可以使用 as 关键字来重命名我们的导出,使之与变量名不同。如果需要,我们还可以同时导出其他变量。

const fruitBasket = new FruitBasket() class Apple {} export { fruitBasket as basketOfFruit, Apple } 聚合导出

我们还会经常遇到这种情况,就是从一个模块导入模块,然后立即导出这些值。比如这样:

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

当你要同时导入和导出很多东西时,这可能会变得很繁琐。ES 模块允许我们同时导入和导出多个值。

export * from './fruitBasket.js'

这将把 ./fruitBasket.js 中所有命名导出重新包装在一起再导出,但它不会导出默认导出值,因为一个模块只能有一个默认导出值。如果我们要导入和导出多个具有默认导出的模块,哪个值将成为导出模块的默认导出值呢?

我们可以专门从其他文件中导出默认模块,或者在重新导出时为默认导出命名。

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

我们也可以有选择地从另一个模块导出不同的项目,而不是把所有的项目都重新导出。在这种情况下,我们也使用大括号。

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

最后,我们可以使用 as 关键字将整个模块打包成一个单独的命名导出。假设我们有以下文件:

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

现在我们可以将其打包成一个单独的导出对象,这个对象包含了所有命名导出和默认导出对象。

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

当导入一个默认值时,我们需要给它指定一个名字。既然是默认值,我们给它取什么名字并不重要。

import fruitBasketList from './fruitBasket.js'

我们也可以同时导入所有的导出,包括命名导出和默认导出。这将会把所有的导出放到一个对象中,而默认导出将被赋予 "default "的属性名。

import * as fruitBasket from './fruitBasket.js' // { default: fruitBasket } 命名导入

我们可以通过用大括号包装导出的名称来导入任何命名导出。

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

我们也可以在导入时使用 as 关键字重命名导入。

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

我们也可以在同一个导入语句中混合命名导出和默认导出。默认导出的内容会先列出,然后是大括号内的命名导出内容。

import fruitBasket, { Apple } from './fruitBasket.js' 副作用导入

有时候一个模块并没有导出值,我们只希望把该模块导入进来立即执行。导入这样的一个模块时,不需要在文件中列出任何导出值。这被称为”副作用(side-effect)“导入,它将直接执行模块中的代码而不提供任何导出值。

import './fruitBasket.js' 动态导入

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpswyd.html