ES6 模組化管理：import 與 export 的使用技巧

ES6 引入了管理 JavaScript 模組的語法。通過使用 import 和 export，我們可以將每個檔案視為獨立的模組，這樣不僅能避免檔案過於龐大，還能提高代碼的可讀性。每個系統都可以被切分成相對應的模組，這樣一來，程式碼的管理和組織就變得更加容易了。

要在瀏覽器中運行，我們需要在 HTML 中加入模組類型：

<script type="module">
 // 輸入要匯入的檔案
</script>

這樣一來，我們就可以開始進行模組化管理了！

import & export

export 可以輸出各種資料型態，包括物件、函式以及單純值等。輸出方式分為 default export 和 named export 兩種。

import 則是將其他檔案所 export 的內容匯入，而 default export 和 named export 在匯入方式上略有不同，但並無輸入數量上的限制。

以下範例會新增一個 export.js，並在其他 js 檔案用 import 輸入

# default export (預設匯出)

單一輸出名稱，預設使用 export default，每一個檔案只能有一個 export default，可以 不指定變數名稱 或 指定變數名稱

1. 不指定變數名稱

// export.js

export default {
  name: "bobee",
  age: 11,
  bark: "woof",
};

import dog from "./export.js";
console.log(dog.name); // bobee

2. 指定變數名稱

import 裡的名稱可以使用不同的名稱呼叫

【預設單筆】

const dog = {
  name: "bobee",
  age: 11,
  bark: "woof",
};
export default dog;

import goodDog from "./export.js";
console.log(goodDog.name); // bobee

【預設多筆】

const dog = {
  name: "bobee",
  age: 11,
  bark: "woof",
};

function add(a, b) {
  return a + b;
}

export default { dog, add };

import goodDog from "./export.js";
console.log(goodDog.dog.name); // bobee

# named export(具名匯出)

多個輸出名稱，需先宣告名稱，在 import 時必須使用一樣名稱才能匯出

1. 匯出每個宣告，在宣告前加上 export

export const dog = {
  name: "bobee",
  age: 11,
  bark: "woof",
};

export function add(a, b) {
  return a + b;
}

import { dog } from "./export.js";
console.log(dog.name); // bobee

2.在結尾時統一使用物件匯出

const dog = {
  name: "bobee",
  age: 11,
  bark: "woof",
};

function add(a, b) {
  return a + b;
}

export { dog, add };

import { dog } from "./export.js";
console.log(dog.name); // bobee

# import/export 全部資料 使用*

* 代表全部的意思，賦予一個名稱，就可以呼叫你要的東西囉！

const dog = {
  name: "bobee",
  age: 11,
  bark: "woof",
};

function add(a, b) {
  return a + b;
}

export { dog, add };

import * as myModule from "./export.js";
console.log(myModule.dog.name); // bobee

# import 無需匯出的檔案

若想要單純執行某支檔案程式，則不用帶任何名稱引入即可

import "/export.js";

透過使用 export 與 import，我們能夠實現程式碼的模組化，進而提升系統的維護性和管理效率。希望本文能夠為你帶來更深入的了解，歡迎一起探索程式設計的無限可能，讓我們共同進步，一起學習程式吧！😀