# 在 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