學習目標:了解什麼是 module,如何自己做一個 module 並輸出、引入
關於學習筆記,主要源自於以下學習資源:
- [JS102] 升級你的 JavaScript 技能:ES6 + npm + Jest
- Node.js 新手入門1:Node Module System 模組化系統
- Day3 — Node.js Modules 介紹及載入
- Node.js 的 module.exports 和 require
- webpack 新手教學之淺談模組化與 snowpack
module 模組化
將大功能切分成小模組,避免程式間相互影響以及後續 Ddbug 與重用在其他專案上,舉例來說,如果有一個網站需要「會員管理」、「金流」、「權限管理」等功能,就會將這些功能切分成好幾個檔案,最後再用一個主程式(也是一個 module ,通常檔名會是 app.js)將功能串起來,這就是模組化的概念。
module 相關操作
這邊要特別特別提醒,這是 node.js 提供的方法,所以只能在 node.js 上使用,在瀏覽器是無法運行的!
[補充說明] CommonJS其實模組化的機制並不在 JavaScript 的規範裡,而是一套叫做 「CommonJS」的模組化標準,那「CommonJS」是怎麼來的呢?就是 JavaScript 開發社群自己訂定的標準,而 Node.js 就是採用的此標準,所以才能運行,這就是為什麼瀏覽器無法運行的原因,因為這並不在 JavaScript 的規範裡!
如何自己做一個 module 並輸出:module.exports、require
— — — 情境1.
有一個 double.js 的檔案,這個檔案裡有一個 double 函式會回傳值*2,我們要如果將這個函式作為一個 module 輸出,並在 app.js 檔案引入這個 module。
module.exports
- 輸出 module
- 語法:
module.exports = 任何資料型別
- 範例:
function double(n) { return n * 2}module.exports = double;
require()
- 引入模組
- 是載入一個檔案,回傳它要回傳的東西。
- 注意!是在主程式引入。
- 語法:
let module = require('./fileName');
- 範例:在
app.js
引入double
這個 module
let double = require('./double');console.log(double(3));
— — — 情境2.
現在 calc.js 的檔案內有兩個函式 double 及 triple,兩個都需要在主程式(app.js)中使用,該如何修改輸出及引入呢?。
我們在 requrie 解釋中有提到是載入一個檔案,回傳它要回傳的東西。如果這個檔案是個 object 就會回傳 object;如果是 funciton 就會回傳 function;如果是 string 就會為傳 string…等等。
所以我們把輸出「函式」變成輸出一個「物件」,就可以達成目的了!
calc.js
function double(n) { return n * 2;}module.exports = { double: double, triple: function(n) { return n * 3; }};
app.js
let calc = require('./calc');console.log('double:', calc.double(3));console.log('triple:', calc.triple(3));
node.js 提供的 module
除了自己寫 module ,也可以找別人已經寫好的 module 來用,node.js 也提供了許多 module 給開發者使用,直接去官網就可以找到。
引入 node.js 提供的 module
我們可以試著引入 node.js 提供的 module,以 OS 作為範例,透過這個 module 可以拿到一些跟作業系統(Operating System)有關的資料
- 引入語法:
let os = require('os')
[補充說明]不是說 require 是載入檔案嗎?怎麼只有一個名字?因為我們是引入 node.js 本身提供的 module,自然就沒有所謂的檔案路徑,假設我們今天是引入自己寫的模組,就會變成輸入檔案路徑。
舉例:let myModule = require(‘./myModule’);
使用 node.js 提供的 module
我們可以先 log 出 os
這個變數看一下,會發現他是一個物件,所以我們可以使用 .
來取得物件裡的東西,我在裡面挑了一個 uptime()
作為範例
uptime()
- 回傳系統正常運行時間#以秒為單位
- 範例:
let os = require('os');console.log(os.uptime(),'秒');
將 npm 下載的函式庫使用 require 引入
還記得[第二週]不再與 Node.js、npm 擦肩而過 我們學會了如何在 npm 下載函式庫,而 npm 幫我們建立了 node_modules 的資料夾,我們可以直接用 require 去引入函式庫
引入 left-pad 函式庫
let leftPad = require('left-pad'); // 不用加 ./的原因是 node.js 會很聰明的去 node_modules 底下找console.log(leftPad(123, 10, '0'));
重點整理
- 模組化(module)的意思是將功能拆分成小模組,這樣的好處是程式間比較不會相互影響(變數、函式等),更能方便管理及 debug。
- module.exports:用此種方式輸出的 module 可以是任何類型的資料型態(object、function….)。
- require:用於引入 module,通常會放入變數做使用。
- 除了自己寫的 module,也可以引入別人的 modelue 像是 node.js 或 npm
以上有任何錯誤的地方歡迎指正,感謝。