JavaScript - 動態匯入

動態匯入

當應用程式程式碼增長幷包含數千行時，將程式碼拆分為模組非常重要。模組允許開發人員分解複雜的程式碼，並透過匯入在不同的檔案中使用它們。

在 JavaScript 模組章節中，您學習瞭如何從模組匯入和匯出物件，但它是靜態匯入，因為我們在程式碼頂部載入它們。有時，我們需要在需要時匯入模組，而不是靜態匯入它們，以提高 Web 應用程式的效能。它也稱為動態匯入。

用於動態匯入的 import() 表示式

當您需要動態匯入模組時，可以使用import()表示式，它會返回一個 Promise。我們可以使用 import() 表示式在程式碼中的任何位置動態匯入模組。

語法

使用者可以按照以下語法使用 import() 表示式動態匯入模組。

import(moduleName).then(module => {
        // Use the module here.
    });

在上面的語法中，我們使用 then() 方法與 import() 表示式一起解析 Promise。

引數

moduleName - 它以模組名稱或路徑作為引數，我們需要動態載入它。

返回值

它返回一個 Promise。

動態匯入示例

示例 1

檔名：test.js

在下面的程式碼中，我們匯出了包含整數值的 'val1' 變數。

export const val1 = 11;

檔名：test.html

在下面的程式碼中，我們使用了 if-else 語句。我們在 if() 塊中匯入模組並使用其物件。

這樣，我們可以使用 import() 表示式動態匯入模組。

<html>
<body>
   <div>Example 1 - dynamic import in JavaScript</div>
   <div id = "output"> </div>
   <script type="module">
      let output = document.getElementById('output');
      let val = 2;
      if (val < 5) {
         // Importing the module
         import('./test.js').then(module => {
            output.innerHTML = "The imported value is " + module.val1;
         });
      }
      else {
         output.innerHTML = "Value is greater than 5";
      }
   </script>
</body>
</html>

輸出

Example 1 - dynamic import in JavaScript
The imported value is 11

示例 2

檔名：test.js

在下面的程式碼中，我們定義了 add() 函式，它返回兩個數字的和。

export function add(a, b) {
    return a + b;
}

檔名：test.html

在下面的程式碼中，我們向按鈕添加了 'click' 事件監聽器。當用戶單擊按鈕時，它會載入 'test.js' 模組。在這裡，我們使用 async/await 處理 import() 表示式返回的 Promise。

之後，我們使用模組的 add() 函式對兩個數字求和，使用者可以在輸出中觀察求和結果。

<html>
   <body>
   <div>Example 2 - dynamic imports in JavaScript</h2>
   <div id = "output"> </div>
   <button id = "button"> Click me </button>
   <script type="module">
      let output = document.getElementById('output');
      let btn = document.getElementById('button');
      //When the button is clicked, load the module
      btn.addEventListener('click', async () => {
         let module = await import('./test.js');
         let result = module.add(2, 3);
         output.innerHTML = "The sum of 2 and 3 is " + result;
      });
   </script>
</body>
</html>

輸出

Example 2 - dynamic imports in JavaScript
The sum of 2 and 3 is 5

這樣，開發人員可以在函式、if-else 塊等中根據需要動態匯入模組，而不是在程式碼頂部匯入它們。

列印頁面