动态导入ECMAScript模块一文看懂
import { concat } from './concatModule'使用ES模块的方式是静态的:意味着模块之间的依赖关系在编译时就已经知道了。 |
ECMAScript(又名ES2015或ES)模块是在JavaScript中组织内聚代码块的一种方法。
ES模块系统有2个部分:
import模块 - 使用 import { func } from './myModule'
export模块- 使用 export const func = () => {}
import 模块是使用 import 语法导入依赖项的模块:
import { concat } from './concatModule'; concat('a', 'b'); // => 'ab'
而被导入的模块使用export语法从自身导出组件:
export const concat = (paramA, paramB) => paramA + paramB;
import { concat } from './concatModule'使用ES模块的方式是静态的:意味着模块之间的依赖关系在编译时就已经知道了。
虽然静态导入在大多数情况下是有效的,但有时我们想节省客户的带宽并有条件地加载模块。
为了实现这一点,我们可以用不同的方式使用 import(pathToModule) 语法对模块进行新的动态导入:作为一个函数。动态导入是ES2020开始的一个JavaScript语言特性。
1. 动态模块的导入
当import关键字用作函数而不是静态导入语法时:
const module = await import(pathToModule);
它返回一个promise ,并开始一个加载模块的异步任务。如果模块被成功加载,那么promise就会解析到模块的内容,否则,promise 就会被拒绝。
请注意,pathToModule可以是任何表达式,其值为表示导入模块路径的字符串。有效的值是普通的字符串字面意义(如./myModule)或有字符串的变量。
例如,我们在一个异步函数中加载一个模块。
async function loadMyModule() { const myModule = await import('./myModule'); // ... use myModule } loadMyModule();
有趣的是,与静态导入相反,动态导入接受以模块路径求值的表达式。
async function loadMyModule(pathToModule) { const myModule = await import(pathToModule); // ... use myModule } loadMyModule('./myModule');
现在,了解了如何加载模块后,我们来看看如何从导入的模块中提取组件。
2.导入组件
2.1 导入命名组件
考虑下面的模块:
// namedConcat.js export const concat = (paramA, paramB) => paramA + paramB;
这里导出了一个 concat 函数。
如果想动态导入namedConcat.js,并访问命名的导出concat,那么只需通解构的方式就行了:
async function loadMyModule() { const { concat } = await import('./namedConcat'); concat('b', 'c'); // => 'bc' } loadMyModule();
2.2 默认导出
如果模块是默认导出的,我们可以使用default属性来访问。
还是上面的例子,我们将defaultConcat.js里面的concat函数默认导出:
// defaultConcat.js export default (paramA, paramB) => paramA + paramB; 在动态导入模块中,可以使用default属性来访问:async function loadMyModule() { const { default: defaultImport } = await import('./defaultConcat'); defaultImport('b', 'c'); // => 'bc' } loadMyModule();
注意,default在JavaScript中是一个关键字,所以它不能用作变量名。
2.3导入混合形式
如果模块里面既有默认导出也有命名导出,同样也是使用解构的方式来访问:
async function loadMyModule() { const { default: defaultImport, namedExport1, namedExport2 } = await import('./mixedExportModule'); // ... } loadMyModule();
3.何时使用动态导入
建议在模块比较大的,或者要根据条件才导入的模块可以使用动态导入。
async function execBigModule(condition) { if (condition) { const { funcA } = await import('./bigModuleA'); funcA(); } else { const { funcB } = await import('./bigModuleB'); funcB(); } } execBigModule(true);
对于小模块(如前面例子中的namedConcat.js或defaultConcat.js),只有几十行代码,使用动态导入在点杀鸡用牛刀感觉。
总结
当调用 import(pathToModule) 作为一个函数时,其参数表示一个模块的指定符(又称路径),那么就会动态加载该模块。
在这种情况下,module = await import(pathToModule) 返回一个 promise ,该承诺解析为一个包含导入模块组件的对象。
Node.js(13.2及以上版本)和大多数现代浏览器都支持动态导入。
动态导入ECMAScript模块一文看懂相关推荐
- ad20如何导入库_一文看懂如何使用(Py)Stan进行贝叶斯推理
在PyStan中应用贝叶斯回归 鼓励您在参与本文之前检查一下此概念性背景. 设定 Stan [1]是用于贝叶斯模型拟合的计算引擎. 它依赖于哈密顿量的蒙特卡罗(HMC)[2]的变体来从各种贝叶斯模型的 ...
- dmp导入数据 oracle_一文看懂oracle12c数据库跨小版本迁移
概述 简单记录一下最近做的一个测试环境迁移,主要是从12.2.0.1 跨两个小版本迁移到19c(12.2.0.3),操作系统均为centos7,下面一起来看看吧~ 一.导出测试环境数据 1. 创建路径 ...
- 一文看懂Python collections模块的高效数据类型
原作: George Seif, 发表于medium.com, 大江狗原创翻译, 并对原文稍作修改. Python的最大优势之一是其广泛的模块和软件包.这将Python的功能扩展到许多受欢迎的领域,包 ...
- 一文看懂智慧城市,解码25万亿大市场的机遇与格局
一文看懂智慧城市,解码25万亿大市场的机遇与格局 原创京东科技2020-09-16 20:13:55 撰文 / Jarvis 编辑 / 郭佳 今年初,随着国家发展改革委员会首度圈定"新基建& ...
- python读取excelsheet-一文看懂用Python读取Excel数据
原标题:一文看懂用Python读取Excel数据 导读:现有的Excel分为两种格式:xls(Excel 97-2003)和xlsx(Excel 2007及以上). Python处理Excel文件主要 ...
- 海普天刷卡机刷卡的时候显示服务器连接失败,一文看懂智能消费机解决方案,解锁新知识...
原标题:一文看懂智能消费机解决方案,解锁新知识 文章来源:海普天一卡通 消费机的市场发展也呈现出一个快速发展的趋势.据调查报告表明,未来消费机的发展将会以25%的增长趋势发展,智能消费机的发展使得它应 ...
- 一文看懂 AI 训练集、验证集、测试集(附:分割方法+交叉验证)
2019-12-20 20:01:00 数据在人工智能技术里是非常重要的!本篇文章将详细给大家介绍3种数据集:训练集.验证集.测试集. 同时还会介绍如何更合理的讲数据划分为3种数据集.最后给大家介绍一 ...
- 一文看懂人脸识别(4个特点+4个实现步骤+5个难点+算法发展轨迹)
2020-03-09 20:01:00 人脸识别是身份识别的一种方式,目的就是要判断图片和视频中人脸的身份时什么. 本文将详细介绍人脸识别的4个特点.4个步骤.5个难点及算法的发展轨迹. 什么是人脸识 ...
- angular 字符串转换成数字_一文看懂Python列表、元组和字符串操作
好文推荐,转自CSDN,原作星辰StarDust,感觉写的比自己清晰-大江狗荐语. 序列 序列是具有索引和切片能力的集合. 列表.元组和字符串具有通过索引访问某个具体的值,或通过切片返回一段切片的能力 ...
最新文章
- Ajax学习-Ajax简介
- 命令 —— awk内置变量(NF,NR,FS,FILENAME)
- 秘鲁农业谋定出口-国际农民丰收节贸易会:期待对华准入
- 7. Reverse Integer
- 计算机文化基础主要讲了什么,计算机文化基础—讲义
- 牛!又一顶级大厂开招.NET,5年35k!
- android循环滚动textview,Android 循环上下滚动
- Android 手势检测实战 打造支持缩放平移的图片预览效果(下)
- C#_delegate - 值参数和引用参数
- winform 右下角弹出小窗口
- 编写iPhone应用程序有何不同
- Java进阶:SpringMVC数据请求全局过滤器
- paip.android环境搭建与开发事例
- java常见抛出异常
- Python制作代码雨
- 全球半导体产业60年兴衰启示录!
- CodeBlocks 20.03 开发基于FLTK 1.4.X 的应用
- GitHub代码上传失败的解决方法
- 第一篇:阿里数据中台之数据中台顶层设计
- 电脑PHP动画制作画板,涂鸦板简单实现 Html5编写属于自己的画画板