資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究JavaScript 中的匯出與匯入
在這篇文章中，我們將學習如何在 JavaScript 中使用匯入和匯出，以及如何使用它們將程式碼分解成不同的模組以更好地組織程式碼。
為了促進程式設計中的模組化開發，使我們可以將程式碼組織成可重用的模組，JavaScript 提供了匯出和匯入。為了實現程式碼的共享和可重用性，我們可以使用不同型別的匯出和匯入。
匯出允許我們將函式、變數、物件或任何值提供給模組外部使用。透過將元件標記為匯出，我們可以將它們暴露出來，以便在應用程式程式碼庫的其他部分使用。
匯入用於將其他模組中匯出的元件引入當前模組。它們允許我們訪問和使用在外部模組中定義的程式碼功能。
讓我們看一些例子來更好地理解這個概念：
示例 1 - 使用命名匯出和匯入
在這個例子中，要從模組匯入命名匯出，我們將：
使用 import 關鍵字，後跟我們要匯入的元件名稱。
從 module.js 模組匯入 add 和 subtract 函式以及 PI 常量，並在 main.js 模組中使用它們。
檔名 - index.html
<html> <head> <title>Exports & Imports in JavaScript</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Exports & Imports in JavaScript</h1> </body> </html>
檔名 - main.js
// main.js module
import { add, subtract, PI } from './module.js';
console.log(add(5, 3)); // Output: 8
console.log(subtract(10, 4)); // Output: 6
console.log(PI); // Output: 3.14159
檔名 - module.js
// module.js module
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
export const PI = 3.14159
輸出
結果將如下面的圖片所示。
示例 2 - 使用預設匯出和匯入
在這個例子中，要從模組匯入預設匯出，我們將：
使用 import 關鍵字，後跟我們選擇的名稱來為預設匯出賦值。
從 module.js 模組匯入預設匯出，並將其命名為 sayHello。然後，我們將在 main.js 模組中使用匯入的函式。
檔名 - index.html
<html> <head> <title>Exports & Imports in JavaScript</title> <script type="module" src="module.js"></script> <script type="module" src="main.js"></script> </head> <body> <h1>Exports & Imports in JavaScript</h1> </body> </html>
檔名 - main.js
// main.js module
import sayHello from './module.js';
sayHello("John"); // Output: Hello, John!
檔名 - module.js
// module.js module
export default function sayHello(name) {
console.log("Hello, " + name + "!");
}
輸出
結果將如下面的圖片所示。
結論
匯出和匯入是 JavaScript 中的重要特性，它們允許模組化開發和程式碼封裝，從而提高程式碼的可重用性和可維護性。命名匯出允許選擇性地暴露多個元件，而預設匯出簡化了主要元件的使用。我們學習瞭如何使用不同的方法在 JavaScript 中進行匯出和匯入，並透過一些例子進行了說明。
268 次瀏覽
