建站
咨詢
售后
建站咨詢
新聞中心
import { concat } from ‘./concatModule’使用ES模塊的方式是靜態(tài)的：意味著模塊之間的依賴關(guān)系在編譯時就已經(jīng)知道了。
目前成都創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站運營、企業(yè)網(wǎng)站設(shè)計、封丘網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
ECMAScript(又名ES2015或ES)模塊是在JavaScript中組織內(nèi)聚代碼塊的一種方法。
ES模塊系統(tǒng)有2個部分：
import模塊 – 使用 import { func } from ‘./myModule’ export模塊- 使用 export const func = () => {} import 模塊是使用 import 語法導(dǎo)入依賴項的模塊:
import { concat } from './concatModule';
concat('a', 'b'); // => 'ab'
而被導(dǎo)入的模塊使用export語法從自身導(dǎo)出組件:
export const concat = (paramA, paramB) => paramA + paramB;
import { concat } from ‘./concatModule’使用ES模塊的方式是靜態(tài)的：意味著模塊之間的依賴關(guān)系在編譯時就已經(jīng)知道了。
雖然靜態(tài)導(dǎo)入在大多數(shù)情況下是有效的，但有時我們想節(jié)省客戶的帶寬并有條件地加載模塊。
為了實現(xiàn)這一點，我們可以用不同的方式使用 import(pathToModule) 語法對模塊進行新的動態(tài)導(dǎo)入：作為一個函數(shù)。動態(tài)導(dǎo)入是ES2020開始的一個JavaScript語言特性。
1. 動態(tài)模塊的導(dǎo)入
當(dāng)import關(guān)鍵字用作函數(shù)而不是靜態(tài)導(dǎo)入語法時:
const module = await import(pathToModule);
它返回一個promise ，并開始一個加載模塊的異步任務(wù)。如果模塊被成功加載，那么promise就會解析到模塊的內(nèi)容，否則，promise 就會被拒絕。
請注意，pathToModule可以是任何表達(dá)式，其值為表示導(dǎo)入模塊路徑的字符串。有效的值是普通的字符串字面意義(如./myModule)或有字符串的變量。
例如，我們在一個異步函數(shù)中加載一個模塊。
async function loadMyModule() {
const myModule = await import('./myModule');
// ... use myModule
}
loadMyModule();
有趣的是，與靜態(tài)導(dǎo)入相反，動態(tài)導(dǎo)入接受以模塊路徑求值的表達(dá)式。
async function loadMyModule(pathToModule) {
const myModule = await import(pathToModule);
// ... use myModule
}
loadMyModule('./myModule');
現(xiàn)在，了解了如何加載模塊后，我們來看看如何從導(dǎo)入的模塊中提取組件。
2.導(dǎo)入組件
2.1 導(dǎo)入命名組件
考慮下面的模塊：
// namedConcat.js
export const concat = (paramA, paramB) => paramA + paramB;
這里導(dǎo)出了一個 concat 函數(shù)。
如果想動態(tài)導(dǎo)入namedConcat.js，并訪問命名的導(dǎo)出concat，那么只需通解構(gòu)的方式就行了：
async function loadMyModule() {
const { concat } = await import('./namedConcat');
concat('b', 'c'); // => 'bc'
}
loadMyModule();
2.2 默認(rèn)導(dǎo)出
如果模塊是默認(rèn)導(dǎo)出的，我們可以使用default屬性來訪問。
還是上面的例子，我們將defaultConcat.js里面的concat函數(shù)默認(rèn)導(dǎo)出:
// defaultConcat.js
export default (paramA, paramB) => paramA + paramB;
在動態(tài)導(dǎo)入模塊中,可以使用default屬性來訪問:
async function loadMyModule() {
const { default: defaultImport } = await import('./defaultConcat');
defaultImport('b', 'c'); // => 'bc'
}
loadMyModule();
注意，default在JavaScript中是一個關(guān)鍵字，所以它不能用作變量名。
2.3導(dǎo)入混合形式
如果模塊里面既有默認(rèn)導(dǎo)出也有命名導(dǎo)出，同樣也是使用解構(gòu)的方式來訪問：
async function loadMyModule() {
const {
default: defaultImport,
namedExport1,
namedExport2
} = await import('./mixedExportModule');
// ...
}
loadMyModule();
3.何時使用動態(tài)導(dǎo)入
建議在模塊比較大的，或者要根據(jù)條件才導(dǎo)入的模塊可以使用動態(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);
對于小模塊(如前面例子中的namedConcat.js或defaultConcat.js)，只有幾十行代碼，使用動態(tài)導(dǎo)入在點殺雞用牛刀感覺。
總結(jié)
當(dāng)調(diào)用 import(pathToModule) 作為一個函數(shù)時，其參數(shù)表示一個模塊的指定符(又稱路徑)，那么就會動態(tài)加載該模塊。
在這種情況下，module = await import(pathToModule) 返回一個 promise ，該承諾解析為一個包含導(dǎo)入模塊組件的對象。
Node.js(13.2及以上版本)和大多數(shù)現(xiàn)代瀏覽器都支持動態(tài)導(dǎo)入。
網(wǎng)站欄目：快速上手動態(tài)導(dǎo)入ECMAScript模塊
當(dāng)前路徑：http://www.dlmjj.cn/article/dpoiseg.html
