Day13 JavaScript 模組(Modules)

模組系統的概念大致上分兩種寫法，CommonJS 和 ESM 其引入方式的差異分別是 require 和 import，今天會著重在 ESM 的寫法。

模組的概念其實在 React 框架已經不知不覺地被頻繁的使用了，像是最常見的 hook–useState 就是在引入模組的時候才做使用的，又或是元件的寫法也是由模組系統做延伸。

模組基本上可以分為兩種匯出方式命名匯出(Named Exports)和預設匯出(Default Exports)，其對應的匯入方式也有所差別

命名匯出(Named Exports)

命名匯出使用關鍵詞 ==export==+==要輸出東西的名稱==，好處是在於同一個檔案能使用很多個匯出

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

export function subtract(a, b) {
  return a - b;
}

其對應的匯入方式如下，import 模組，然後從哪裡 from

import {add, subtract} from "./math";

console.log(add(5, 3)); // 輸出: 8
console.log(subtract(10, 4)); // 輸出: 6

預設匯出(Default Exports)

1.預設匯出使用關鍵詞 ==export default==，特別注意同一個檔案只能有一個預設匯出

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

其對應的匯入方式如下，與上述雷同差別在於針對單一輸出的模組所以可以不用大括弧{}

import add from "./math";

console.log(add(5, 3)); // 輸出: 8

總結

以下簡單整理一個表格，我自己會認為不太需要花時間去記憶，因為用久自然就熟了，而且現在套件的幫助下其實也比較不太會在這方面出差錯。