JavaScript 匯出類
Anika Tabassum Era
2023年1月30日
2022年5月10日
JavaScript 匯出/匯入語句適用於 JavaScript 模組的內容在另一個模組中重用的情況。
可以有許多方法來執行任務,從單個模組到模組的細節傳輸以及從子模組到父模組的聚合。
JavaScript 中 export
語句的型別
JavaScript 中的 export
/import
語句有兩種型別。一種是命名
匯出,另一種是預設
匯出。
通常,在 Default
類別中匯出時,我們不使用花括號來包裝基元或物件。但是在 Named
匯出的情況下,我們使用花括號來包裝多個物件或原語。
Default
僅處理從模組匯出的一項,而 Named
可以取零或多於一。
我們將需要一個檔案或模組來跟進示例。我們將它們命名為 test.js
和 New.js
。
但是為了與 ES6 相容,我們需要將模組重新命名為 test.mjs
和 New.mjs
。有多種方法可以執行此轉換,但這很容易。
在這裡,我們將看到一個具有 Default
類別的例項和另一個具有 Named
類別的例項。讓我們跳到下一節。
JavaScript 中 Default
匯出的示例
在此示例中,我們將在 test.mjs
中啟動一個類 User
,我們將匯出該類。User
類只有最喜歡的水果的名稱。
接下來,在宣告類的建構函式之後,讓我們進入 New.mjs
模組並匯入該類。我們還將通過設定一些值來觸發匯出的模組工作。
讓我們檢查一下這個例子。
// test.mjs
export default class User{
constructor(fruit){
this.fruit = fruit;
}
}
// New.mjs
import User from './test.mjs';
var x = new User('Mango');
console.log(x);
輸出:
JavaScript 中 Named
匯出的示例
我們將為此例項採用一個帶有虛擬數學的函式和一個變數。因此,我們將在要匯出的每個資料之前宣告 export
語句。
稍後,在我們的父模組 New.mjs
中,我們將根據選擇匯入和修改值。此執行緒中提供了正式的宣告性解釋。
程式碼片段:
// test.mjs
export function square(x){
return x * x;
}
export var y = Math.PI * 5;
// New.mjs
import {square, y} from './test.mjs';
var x = 2;
console.log(square(x));
console.log(y);
輸出:
Author: Anika Tabassum Era