如何动态导入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/

随时掌握互联网精彩
- UpSnap是一个基于Web的局域网唤醒应用
- 李佳琦被质疑“二选一”?回应来了
- burpsuite安装详细教程
- 适合女生的折叠屏手机来了,四款宝藏机型任你挑
- 微软Edge 105升级致浏览器罢工?官方解决方法来了
- 不知不觉每日优鲜竟在外面投资了 10 来个项目,有的还「整挺好」
- 中国电信柯瑞文:推进更大范围共建共享,实现5G农村一张网
- 今日份精彩,你收不收?!
- 赛力斯SF5凭什么成了华为的“亲儿子”?
- 苹果付费订阅用户超7亿;消息称哈啰出行计划撤回赴美上市申请;华为免去苏菁智能驾驶产品部部长职务|Do早报
- Airbnb一季度净亏损11.7亿美元;谷歌将为“星链”提供服务;阿里2021财年商品交易额达8.119万亿元 | Do早报
- 在线教育会是知识付费的救星吗?
赞助链接