如何动态导入ECMAScript模块
作者:前端小智
简介:思否百万阅读,励志退休后,回家摆地摊的人。
来源:SegmentFault 思否社区
ECMAScript(又名ES2015或ES)模块是在JavaScript中组织内聚代码块的一种方法。
ES模块系统有2个部分:
import模块 - 使用 import { func } from './myModule' export模块- 使用 export const func = () => {}
import { concat } from './concatModule';
concat('a', 'b'); // => 'ab'
export const concat = (paramA, paramB) => paramA + paramB;
1. 动态模块的导入
当import关键字用作函数而不是静态导入语法时:
const module = await import(pathToModule);
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;
async function loadMyModule() {
const { concat } = await import('./namedConcat');
concat('b', 'c'); // => 'bc'
}
loadMyModule();
2.2 默认导出
// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;
async function loadMyModule() {
const { default: defaultImport } = await import('./defaultConcat');
defaultImport('b', 'c'); // => 'bc'
}
loadMyModule();
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);
总结
当调用 import(pathToModule) 作为一个函数时,其参数表示一个模块的指定符(又称路径),那么就会动态加载该模块。


关注公众号:拾黑(shiheibook)了解更多
赞助链接:
关注数据与安全,洞悉企业级服务市场:https://www.ijiandao.com/
四季很好,只要有你,文娱排行榜:https://www.yaopaiming.com/
让资讯触达的更精准有趣:https://www.0xu.cn/

随时掌握互联网精彩
- FilePizza 网页浏览器直接分享文件 P2P文件传输工具
- 百度地图芭比主题导航上线:3D喷气拖尾炫酷
- 专家热议低空经济:与6G相伴而生,找寻商业闭环
- 微软Build 2023:人工智能重新定义软件开发与工作的未来
- 企业级 Azure OpenAI ChatGPT 服务发布(国际预览版)
- 技经观察丨做好数据正义和算法治理,AI方能驭风飞翔
- 华为彭松:三个层面加速数智化转型,把握未来十年最大机遇
- TA 家的零售数字化方案让ROI 提升28% !
- 真实和虚拟世界彼此映射,这家公司想把LBS AR社交发扬光大
- Nreal Air抢先上手:专为观影打造的3DoF精简版Light
- 连续增持奥马电器,TCL家电要做一个“大冰箱”吗
- 【大公司创新情报】复星医药参与研发的mRNA新冠核酸疫苗已在欧美多个国家获批接种
赞助链接