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 相关文章推荐
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
jQuery-mobile事件监听与用法详解
Nov 23 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
JavaScript实现无限轮播效果
Nov 19 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修改NetBeans默认字体的大小
2013/07/02 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
浅析jQuery中使用$所引发的问题
2016/05/29 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
js实现音频控制进度条功能
2017/04/01 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
1 行 Python 代码快速实现 FTP 服务器
2018/01/25 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python对象转换为json的方法步骤
2019/04/25 Python
使用python实现kNN分类算法
2019/10/16 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
护士思想汇报
2014/01/12 职场文书
垂直极限观后感
2015/06/08 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
PyQt5爬取12306车票信息程序的实现
2021/05/14 Python
升级 Win11 还是坚守 Win10?微软 Win11 新系统缺失功能大盘点
2022/04/05 数码科技
Python如何使用循环结构和分支结构
2022/04/13 Python