JavaScript 的模組
本文說明了 JavaScript 中的模組。
YouTube Video
JavaScript 的模組
JavaScript 的模組是一種組織程式碼並將其分割為可重複使用的組件的方法。通過使用模組，可以提高程式碼的可讀性和維護性，並且相同的功能可以在其他專案中重複使用。在這裡我們將解釋各種模組系統，從模組的概念到具體的使用範例。
JavaScript 模組的概念
JavaScript 最初並沒有模組化系統。然而，隨著應用程式規模的增大，模組化變得越來越重要，可以將程式碼劃分為更小的單元以便重複使用。模組是一段具有特定功能的程式碼，可以獨立於其他程式碼進行管理，從而允許將其劃分為多個檔案。
模組的主要類型
JavaScript 中有幾種模組系統。最常見的是 ES 模組（ESM）和 CommonJS。
-
ES Modules 是在 ECMAScript 2015（ES6）引入的模組系統，使用
import和export關鍵字來定義模組。此系統廣泛用於用戶端（瀏覽器）和伺服器端（Node.js）。 -
CommonJS 是一種主要用於 Node.js 的模組系統。模組使用
require和module.exports來匯入和匯出檔案。
ES 模組（ESM）的詳細資料
ES 模組是 JavaScript 的標準模組系統，允許模組之間簡便地交換功能。在瀏覽器和 Node.js 中，此系統用於定義與匯入模組。
export 和 import
export 是一個關鍵字，用於將模組中的功能向外部公開。import 用於匯入其他模組中定義的功能。
範例：模組匯出
可以如下方式在 ES Modules 中導出模組。
1// math.mjs
2export function add(a, b) {
3 return a + b;
4}
5export function subtract(a, b) {
6 return a - b;
7}在這個 math.mjs 模組中，導出了 add 和 subtract 函式。這些函數可以從其他模組中匯入。
這裡，.mjs 是一個明確表示ES Modules 格式 JavaScript 檔案的副檔名。在 Node.js 中，檔案的副檔名會決定是 CommonJS 還是 ES Modules。但是，如果在 package.json 中指定了 type: "module"，則副檔名為 .js 的檔案預設會被視為 ES Modules。
範例：模組匯入
可以如下方式在 ES Modules 中導入模組。
1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3
通過使用 import，可以輕鬆地利用在其他檔案中定義的函數。
預設匯出和具名匯出
模組有兩種匯出方法。一種是 具名匯出，另一種是 預設匯出。
- 具名匯出 用於從模組中匯出多個函數或變數。可以多次匯出，匯入時可以通過指定名稱接收它們。
1// utils.mjs
2export function sum(a, b) {
3 return a + b;
4}
5export function multiply(a, b) {
6 return a * b;
7}1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6)); // 10
5console.log(multiply(3, 5)); // 15
- 預設匯出 用於從模組中匯出單個函數或類別。匯入時可以用任何名稱接收。
1// greet.mjs
2export default function greet() {
3 return "Hello, World!";
4}1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"
每個模組只能有一個預設匯出，但具名匯出可以同時匯出多個元素。
用於客戶端（瀏覽器）時的範例。
範例：模組匯出
可以如下方式在 ES Modules 中導出模組。
1// utils.js
2export function sum(a, b) {
3 return a + b;
4}
5export function multiply(a, b) {
6 return a * b;
7}在這個 utils.js 模組中，導出了 sum 和 multiply 函式。
範例：模組匯入
可以如下方式在客戶端導入模組。
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>ES Modules Sample in HTML</title>
6</head>
7<body>
8 <h1>ES Modules Sample</h1>
9 <div id="result"></div>
10
11 <script type="module">
12 import { sum, multiply } from './utils.js';
13
14 const result = `
15 <p>sum(3, 5) = ${sum(3, 5)}</p>
16 <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17 `;
18
19 document.getElementById('result').innerHTML = result;
20 console.log(sum(3, 5)); // 8
21 console.log(multiply(10, 7)); // 70
22 </script>
23</body>
24</html>- 通過將
<script>標籤的type屬性設為module，可以在 HTML 中使用如import和export的 ES 模組語法。 import陳述式會加載外部的utils.js並顯示結果。
CommonJS 詳細說明
CommonJS 是一種主要用於 Node.js 的模組系統。模組通過 module.exports 和 require 進行匯出和匯入。
require 和 module.exports
在 CommonJS 中，使用 module.exports 匯出模組。此外，使用 require 來使用其他檔案的模組。
範例：模組匯出
可以如下方式在 CommonJS 中導出模組。
1// math.js
2module.exports = {
3 add: function(a, b) {
4 return a + b;
5 },
6 subtract: function(a, b) {
7 return a - b;
8 }
9};範例：模組匯入
可以如下方式在 CommonJS 中導入模組。
1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7)); // 11
5console.log(math.subtract(9, 2)); // 7
在 Node.js 中，默認使用 CommonJS 作為模組系統，但也支援 ES 模組。
動態匯入
在 JavaScript 中，可以使用 import() 動態匯入模組。此方法採用非同步處理，在需要時載入模組。
可依下列方式執行動態導入。
1async function loadModule() {
2 const math = await import('./math.js');
3 console.log(math.add(5, 3)); // 8
4}
5
6loadModule();動態匯入是提升應用程式性能的一種方式。因為可以按需載入模組，而不是在初次載入時載入所有模組，所以能提高頁面顯示速度。
模組的優勢
-
程式碼重複利用性
- 模組化的程式碼可以在其他專案中重複使用。通過創建具有通用功能的模組並在多個應用程式中使用，可以顯著提高開發效率。
-
維護性提升
- 將程式碼拆分成模組後，可以更容易地修改特定功能或部分。將代碼管理成小單元，使得發現和修復錯誤更加容易。
-
避免命名空間衝突
- 在全域範圍定義太多變數和函式會造成命名衝突，但模組化可以防止這種情況並保持程式碼庫的整潔。
-
依賴管理
- 使用模組可以讓你明確地管理應用程式的依賴關係。可以清楚地看到哪個模組依賴於其他模組，讓代碼結構更易於理解。
總結
JavaScript 的模組系統是一種強大的方式，用於組織代碼並將其分解為可重用的元件。通過理解 ES 模組和 CommonJS 之間的差異，並根據項目選擇適合的模組系統，可以提升代碼的可讀性和可維護性。此外，通過使用動態導入，可以優化應用程式的性能。
讓我們利用模組系統來構建更具擴展性和效率的 JavaScript 應用程式。
您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。