如何動態(tài)導(dǎo)入ECMAScript模塊
作者：前端小智
簡介：思否百萬閱讀，勵志退休后，回家擺地攤的人。
來源：SegmentFault 思否社區(qū)
ECMAScript(又名ES2015或ES)模塊是在JavaScript中組織內(nèi)聚代碼塊的一種方法。
ES模塊系統(tǒng)有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. 動態(tài)模塊的導(dǎo)入
當(dāng)import關(guān)鍵字用作函數(shù)而不是靜態(tài)導(dǎo)入語法時:
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.導(dǎo)入組件
2.1 導(dǎo)入命名組件
// namedConcat.js
export const concat = (paramA, paramB) => paramA + paramB;
async function loadMyModule() {
const { concat } = await import('./namedConcat');
concat('b', 'c'); // => 'bc'
}
loadMyModule();
2.2 默認(rèn)導(dǎo)出
// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;
async function loadMyModule() {
const { default: defaultImport } = await import('./defaultConcat');
defaultImport('b', 'c'); // => 'bc'
}
loadMyModule();
2.3導(dǎo)入混合形式
async function loadMyModule() {
const {
default: defaultImport,
namedExport1,
namedExport2
} = await import('./mixedExportModule');
// ...
}
loadMyModule();
3.何時使用動態(tài)導(dǎo)入
async function execBigModule(condition) {
if (condition) {
const { funcA } = await import('./bigModuleA');
funcA();
} else {
const { funcB } = await import('./bigModuleB');
funcB();
}
}
execBigModule(true);
總結(jié)
當(dāng)調(diào)用 import(pathToModule) 作為一個函數(shù)時，其參數(shù)表示一個模塊的指定符（又稱路徑），那么就會動態(tài)加載該模塊。
評論
圖片
表情