---
# System prepended metadata

title: 在 JavaScript 使用 Module（模組、模塊）
tags: [JavaScript, Module]

---

# 在 JavaScript 使用 Module（模組、模塊）
###### tags: `Module` `JavaScript`

## Module 模組概念
他的概念有點像是一個 **功能**，可以給別人、自己使用
把一個大東西切成一小塊一小塊，每個小東西都是一個 Module，別人可以使用你的 Module，你也可以使用別人的 Module

舉個例子：
製作一個金融系統，裡面的功能有登入、金流、會員管理、權限管理...


* **（方法 1）全部功能寫在一個程式內**：

如果全部放在一起，未來要維護、更新會非常困難。（放在一起會讓這些功能互相依賴性太強）
![](https://i.imgur.com/DQa07v2.png)

---
* **（方法 2）個別寫好功能，最後再將所有功能跟主程式串接**

我們把裡面每個功能個別拆出來做成一個 Module，最後再用一個主程式把所有 Module 串起來，易於維護、更新
![](https://i.imgur.com/xbTiN0d.png)

## 以上兩種差別，在於他有沒有將功能切割開來，這種情況我們會選擇 「方法 2」


## 如何在 JavaScript 使用 Module

* **簡單講流程：**
**1. 先製作出一個 Module 並且輸出**
**2. 再到新檔案引入製作好的 module 就能夠在新檔案使用 module 內的功能**

## ▲ 製作 Module 並輸出
* **創建 myModule.js 檔案，寫完功能，輸出 module**
```javascript
function double(n){
    return n * 2
}

//將 double 這個函式，輸入到 module 內
module.exports = double
```
* **module.exports：** 在 JavaScript 內，就是輸出 module（功能）

## ▼ 將 Module 引入
* **我們要在新檔案使用 myModule.js 這個 Module，並且使用 Module 內的功能**

```javascript
var double = require('./myModule')
//這邊的 double 只是將 Module 命名而已，所以改成其他名字也可以

console.log(double)// 印出 function：double，會印出 Module 內的功能
console.log(double(3))//印出 6 ，執行了 Module 內 double 這個函式
```
* **var double = require('./myModule')**：引入檔名為 myModule 的 module 到 double 變數（double 就會變成一個 Module，可以使用裡面的功能）
* **require('./myModule')**：格式固定要 **" "** 包起來，**./** 後面加上檔案名稱
* **require 主要功能就是引入 Module**

## Moudule 兩種輸出方法

1. module.exports
```javascript
function double(n){
    return n * 2
}

module.exports = {
    double : double,
    triple : function(n){
          return n*3
}
```
2. exports.
```javascript
function double(n){
    return n * 2
}


exports.double = double 
exports.triple =function(n){
    return n*3
}
/*寫法就是 exports. 後加上名稱
這樣同樣可以達到 輸出*/
```
#### 引入 Moudule 來使用
```javascript
var myModule = require('./myModule')

console.log(myModule.double(2),myModule.triple(2))//印出 4 跟 6
```

### 這兩個差別在哪？
使用 1. 可以加入任何東西，ex：放陣列也可以 [1,2,3]，引入時就會得到 [1,2,3]

使用 2. 引入時就絕對會是一個 **"物件"**
**※ 通常都會寫成第一種方法、但第二種也滿常用的**






# 最後總結：為甚麼要使用 module？
因為很常會在很多地方用到相同功能，為了不要每次都重新寫，所以我們使用 module
==module 也易於維護、更新==

* 舉例：驗證 EMAIL

在不同程式上都要使用到 **"驗證 EMAIL"** 這個功能
只要將寫好的 **"驗證 EMAIL"** 放到 **module**，在需要的程式裡面 **"引入"** 就可以了

* 維護、更新 **"驗證 EMAIL"** 

要修改 **"驗證 EMAIL"** 也很方便改一次就好，不用到每個程式內一一修改

---

## **"模組化"優點：**
1. 多個功能可以放在一個類似物件裡面，需要裡面某個功能時選取就可以
2. 易於維護、修正（只需修改 module 檔案內的內容，其他有使用到此 module 的檔案，內容也會更新成修改後的內容）





# 此章節 主要就三個東西
**輸出 module**

* module.exports
* exports.

**引入 module**

* require 





