作者:Dmitri Pavlutin
译者:前端小智
起源:dmitripavlutin
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。
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 及以上版本)和大多数古代浏览器都反对动静导入。
编辑中可能存在的 bug 没法实时晓得,预先为了解决这些 bug, 花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文:https://dmitripavlutin.com/ec…
交换
文章每周继续更新,能够微信搜寻 【大迁世界】 第一工夫浏览,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,欢送 Star。