JavaScript ES 模块的使用


Posted in Javascript onNovember 12, 2020

自从 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'

动态导入

有时我们在导入文件之前并不知道文件的名称。或者我们在执行代码到一半的时候才需要导入一个文件,我们可以使用动态导入在代码中的任何位置导入模块。之所以称之为 "动态",是因为导入的路径可能是不确定的,可以是字符串变量也可以是字符串表达式,而不像静态导入那样必须是一个字符串字面量。

由于 ES 模块是异步的,所以模块不会立即可用。我们必须等待它被加载后才能对它做事情。正因为如此,动态导入会返回一个解析模块的 Promise。

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

总结

ES 导出的内容可以是值(包括变量和字面量)也可以是类和函数的声明,从导出方式上可以分为默认导出、命名导出和聚合导出。根据不同的导出方式,导入可以分为默认导入、命名导入、副作用导入和动态导入。命名导出和导入均可以使用 as 指定别名。​导出和静态导入必须在文件的最外层,动态导入可以在代码的函数中异步完成。

以上就是JavaScript ES 模块的使用的详细内容,更多关于JavaScript ES 模块的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
Sep 22 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
微信小程序 加载 app-service.js 错误解决方法
Oct 12 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
在vue中使用Echarts利用watch做动态数据渲染操作
Jul 20 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 #Javascript
vue 解决provide和inject响应的问题
Nov 12 #Javascript
vue的$http的get请求要加上params操作
Nov 12 #Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 #Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 #Javascript
vue 获取url里参数的两种方法小结
Nov 12 #Javascript
带你使用webpack快速构建web项目的方法
Nov 12 #Javascript
You might like
php 信息采集程序代码
2009/03/17 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
php base64 编码与解码实例代码
2017/03/21 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
Document对象内容集合(比较全)
2010/09/06 Javascript
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
js实现表格筛选功能
2017/01/18 Javascript
vue数据双向绑定原理解析(get & set)
2017/03/08 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
2017/06/23 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
vue组件(全局,局部,动态加载组件)
2018/09/02 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
ES6的异步终极解决方案分享
2019/07/11 Javascript
Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法
2019/09/16 Javascript
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
Python实现文件压缩和解压的示例代码
2020/08/12 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
如何在pycharm中安装第三方包
2020/10/27 Python
小学生期末自我鉴定
2014/01/19 职场文书
酒店行政人事部经理职务说明书
2014/02/26 职场文书
检讨书怎么写
2015/01/23 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
MySQL创建管理LIST分区
2022/04/13 MySQL