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

随时掌握互联网精彩
- 谷歌修复已存在23年的浏览器历史窃取漏洞 Chrome即将发布更新封堵该漏洞
- 拿下三个全国第一的小城,造了一个科技艺术节
- 日元对人民币汇率2023年6月13日
- Serge Alpaca模型聊天界面
- 阿根廷等南美四国将联合申办2030年世界杯;Opera浏览器计划接入chatGPT功能 | 大公司情报
- 马斯克计划未来数月裁掉推特75%员工;律师调查GitHub Copilot版权侵犯问题;Firefox 106 发布|极客头条
- 直播预告 | Homebrew 作者 Max Howell:如何打造杰出的开发者工具
- 广东海边现龙吸水奇观 水柱窜云霄
- 中国信科集团获评国资委“科技创新突出贡献企业”
- 一季度新消费融资全梳理:这四个趋势很重要
- 从媒体到出版,微软智能语音技术如何激发内容生产力?
- 茅台无偿划转股票,白酒价格将被监管,白酒股或许会走弱
赞助链接