JavaScript 模組

什麼是模組？

在 JavaScript 中，模組是包含 JavaScript 程式碼或指令碼的單個檔案。與其將整個應用程式的程式碼新增到單個檔案中，不如將程式碼分解併為具有相同功能的程式碼建立單獨的檔案。

簡而言之，模組包含執行特定任務的程式碼。它可以包含變數、函式、類等。

當應用程式規模增長時，程式碼行數也會增長。即使是即時應用程式也包含數百萬行程式碼。現在，想象一下，如果開發人員只有一個包含數百萬行程式碼的單個檔案。他們能夠正確管理它嗎？簡單的答案是不行。這時，使用模組就派上用場了。

語法

使用者可以遵循以下語法來匯出和匯入模組。

export function func_name(parameters) {
// function code
}

import {func_name} from filename

在上述語法中，export 關鍵字用於從模組匯出函式，import 關鍵字用於從模組匯入函式。

示例

檔名：mul.js

在下面的程式碼中，我們在 'mul.js' 檔案中定義了 'mul()' 函式，該函式接受兩個整數作為引數並返回它們的乘積。此外，我們在 'function' 關鍵字之前使用了 'export' 關鍵字來從模組匯出該函式。

//  exporting mul() function
export function mul(a, b) {
    return a * b;
}

檔名：test.html

<html>
   <body>
   <div> JavaScript - Modules </div>
   <div id = "output"> </div>
   <script type="module">
      import { mul } from './mul.js';
      document.getElementById('output').innerHTML = 
		"The multiplication of 2 and 3 is " + mul(2, 3);
   </script>
</body>
</html>

輸出

JavaScript - Modules
The multiplication of 2 and 3 is 6

在上面的程式碼中，我們已在 HTML 檔案中匯入了模組。但是，我們也可以在另一個 JavaScript 檔案中匯入模組。

從單個模組匯出多個物件

您還可以從單個模組匯出多個變數、函式等。讓我們透過下面的示例來了解它。

示例

檔名：math.js

在下面的程式碼中，我們匯出了 mul() 和 sum() 函式。此外，我們還匯出了包含 PI 值的變數。簡而言之，我們從單個模組匯出多個物件。

// exporting mul() function
export function mul(a, b) {
    return a * b;
}
// exporting sum() function
export function sum(a, b) {
    return a + b;
}
// export value of PI
export let PI = Math.PI;

檔名：test.html

在下面的程式碼中，我們從單個模組匯入多個物件並使用它們執行數學運算。

<html>
   <body>
   <div> Exporting Multiple Objects from a Single Module </div>
   <div id = "output"> </div>
   <script type="module">
      import { mul, sum, PI } from './math.js';
      document.getElementById('output').innerHTML = 
		"The multiplication of 2 and 3 is " + mul(2, 3 + 
      "<br> The addition of 2 and 3 is " + sum(2, 3) + 
      "<br> The value of PI is " + PI;
   </script>
</body>
</html>

輸出

Exporting Multiple Objects from a Single Module
The multiplication of 2 and 3 is 6
The addition of 2 and 3 is 5
The value of PI is 3.141592653589793

預設匯出

您可以使用 'default' 關鍵字在模組中定義預設匯出。之後，每當您嘗試匯入模組中未定義的物件時，它都會返回預設匯出的物件。預設匯出有助於避免匯入錯誤。

語法

使用者可以遵循以下語法在模組中使用預設匯出。

export default function func_name(params) {
// function body
}
import random_name from filename;

在上述語法中，'default' 關鍵字用於在 export 關鍵字之後預設匯出 'func_name' 函式。

示例

檔名：test.js

在下面的程式碼中，我們預設匯出 'v1' 變數，並且我們還匯出 'v2' 變數。

const v1 = "Version 1";
// default export
export default v1;
// other modules
export const v2 = "Version 2";

檔名：test.html

在下述程式碼中，我們從 test.js 檔案匯入了 'v3' 和 'v2'。由於 'v3' 未在 test.js 檔案中匯出，因此它匯入的是預設物件 'v1'。

<html>
<body>
   <div> Default Export </div>
   <div id = "output"> </div>
   <script type="module">
      // V3 is not defined in the module, so it returns V1.
      import v3, { v2 } from './test.js';

      document.getElementById('output').innerHTML = 
		"The value of v3 is : " + v3 + "<br>" +
      "The value of v2 is : " + v2;
   </script>
</body>
</html>

輸出

Default Export
The value of v3 is : Version 1
"The value of v2 is : Version 2

重新命名匯入和匯出

有時，程式碼檔案和模組檔案包含相同名稱的物件。在這種情況下，如果開發者在程式碼檔案中匯入模組，可能會引發衝突和錯誤。為了解決這個問題，我們可以在匯出或匯入時更改模組的名稱。

重新命名匯出的語法

使用者可以按照以下語法重新命名匯出。

export {
    func1 as N1,
    func2 as N2
};
// import in the code file
import { N1, N2 } from './module.js';

在上述語法中，我們在從模組匯出時將 func1 的名稱更改為 N1，將 func2 的名稱更改為 N2。我們使用 'as' 關鍵字來更改函式的名稱。

重新命名匯入的語法

使用者可以按照以下語法重新命名匯入。

export {
    func1,
    func2
};
// import in the code file
import { func1 as N1, func1 as N2 } from './module.js';

在上述語法中，我們在匯入時更改函式名稱。

列印頁面