javascript如何動態(tài)導入ECMAScript模塊

小編給大家分享一下javascript如何動態(tài)導入ECMAScript模塊，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

專注于為中小企業(yè)提供成都網站設計、成都做網站、外貿網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)文峰免費做網站提供優(yōu)質的服務。我們立足成都，凝聚了一批互聯(lián)網行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網站建設實現規(guī)模擴充和轉變。

ECMAScript(又名ES2015或ES)模塊是在JavaScript中組織內聚代碼塊的一種方法。

ES模塊系統(tǒng)有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模塊的方式是靜態(tài)的：意味著模塊之間的依賴關系在編譯時就已經知道了。

雖然靜態(tài)導入在大多數情況下是有效的，但有時我們想節(jié)省客戶的帶寬并有條件地加載模塊。

為了實現這一點，我們可以用不同的方式使用 import(pathToModule) 語法對模塊進行新的動態(tài)導入：作為一個函數。動態(tài)導入是ES2020開始的一個JavaScript語言特性。

1. 動態(tài)模塊的導入

當import關鍵字用作函數而不是靜態(tài)導入語法時:

const module = await import(pathToModule);

它返回一個promise ，并開始一個加載模塊的異步任務。如果模塊被成功加載，那么promise就會解析到模塊的內容，否則，promise 就會被拒絕。

請注意，pathToModule可以是任何表達式，其值為表示導入模塊路徑的字符串。有效的值是普通的字符串字面意義（如./myModule）或有字符串的變量。

例如，我們在一個異步函數中加載一個模塊。

async function loadMyModule() {
  const myModule = await import('./myModule');
  // ... use myModule
}

loadMyModule();

有趣的是，與靜態(tài)導入相反，動態(tài)導入接受以模塊路徑求值的表達式

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 函數。

如果想動態(tài)導入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;

在動態(tài)導入模塊中,可以使用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.何時使用動態(tài)導入

建議在模塊比較大的，或者要根據條件才導入的模塊可以使用動態(tài)導入。

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)導入在點殺雞用牛刀感覺。

看完了這篇文章，相信你對“javascript如何動態(tài)導入ECMAScript模塊”有了一定的了解，如果想了解更多相關知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

標題名稱：javascript如何動態(tài)導入ECMAScript模塊
網站路徑：http://muchs.cn/article40/igeeho.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供虛擬主機、網站策劃、商城網站、軟件開發(fā)、定制開發(fā)、ChatGPT

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

外貿網站制作