JavaScript 模塊

模塊（Modules）

JavaScript 模塊允許您將代碼分解成單獨的文件。

這會使維護代碼庫更加容易。

模塊是使用 import 語句從外部文件導入的。

模塊還依賴于 <script> 標簽中的 type="module"。

實例

<script type="module">
import message from "./message.js";
</script>

親自試一試

導出

帶有函數或變量的模塊可以存儲在任何外部文件中。

導出有兩種類型：命名導出和默認導出。

命名導出（Named Exports）

讓我們創建一個名為 person.js 的文件，并在其中填充我們要導出的內容。

您可以通過兩種方式創建命名導出。一種是逐個內聯創建，另一種是在文件底部一次性全部創建。

逐個內聯創建：

person.js

export const name = "Bill";
export const age = 19;

在文件底部一次性創建：

person.js

const name = "Bill";
const age = 19;
export {name, age};

默認導出（Default Exports）

讓我們創建另一個名為 message.js 的文件，并用其演示默認導出。

一個文件中只能有一個默認導出。

實例

message.js

const message = () => {
const name = "Bill";
const age = 19;
return name + ' is ' + age + 'years old.';
};
export default message;

導入

您可以通過兩種方式將模塊導入到文件中，具體取決于它們是命名導出還是默認導出。

命名導出是使用大括號構造的。默認導出不是。

從命名導出中導入

從文件 person.js 導入命名導出：

import { name, age } from "./person.js";

親自試一試

從默認導出導入

從文件 message.js 導入默認導出：

import message from "./message.js";

親自試一試

注意

模塊僅適用于 HTTP(s) 協議。

通過 file:// 協議打開的網頁無法使用導入/導出。