JavaScript 模組
模組
JavaScript 模組允許您將程式碼分解為單獨的檔案。
這使得維護程式碼庫變得更容易。
模組使用 import
語句從外部檔案匯入。
模組也依賴於 <script> 標籤中的 type="module"
。
匯出
包含函式或變數的模組可以儲存在任何外部檔案中。
有兩種型別的匯出:命名匯出和預設匯出。
命名匯出
讓我們建立一個名為 person.js
的檔案,並用我們想要匯出的內容填充它。
您可以透過兩種方式建立命名匯出。單獨內聯,或在底部一次性全部匯出。
單獨內聯
person.js
export const name = "Jesse";
export const age = 40;
在底部一次性全部匯出
person.js
const name = "Jesse";
const age = 40;
export {name, age};
預設匯出
讓我們建立另一個名為 message.js
的檔案,並將其用於演示預設匯出。
一個檔案只能有一個預設匯出。
示例
message.js
const message = () => {
const name = "Jesse";
const age = 40;
return name + ' is ' + age + 'years old.';
};
export default message;
匯入
您可以根據模組是命名匯出還是預設匯出,以兩種方式將模組匯入檔案。
命名匯出使用花括號構造。預設匯出則不使用。
注意
模組僅適用於 HTTP(s) 協議。
透過 file:// 協議開啟的網頁不能使用 import / export。