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

随时掌握互联网精彩
- Edge浏览器睡眠标签页立功:一年节省7万亿MB流量
- 尽力了,今天只找到两款没用的软件
- 澳元兑换人民币汇率2024年1月6日
- 港币对人民币汇率2023年6月16日
- 国产OLED关键材料取得新进展
- WinWin高端访谈|建设非洲“光纤铁路”,MTN GlobalConnect怎样做到?
- 1-5月规上互联网企业完成业务收入5850亿元 同比增长1.8%
- RNG重赛始末
- 微软可持续发展承诺最新进展:为实现“2030目标”奠定坚实基础
- 欧洲多家电信公司称美国科技巨头应分摊通信网络开发费用
- 苹果想做6G时代的“高通”?
- 华为商城全面下架荣耀系产品;牵头行对快手的市场估值超4000亿元;三星掌门人李在镕获刑2年半,当庭被捕【Do说】
赞助链接