iT邦幫忙

2

【我可以你也可以的Node.js】第八篇 - 一統江山的CommonJS

嗨各位大大~
我是Robin
經由緩慢學習Node也有一個多月的時間了,ヽ(́◕◞౪◟◕‵)ノ
在公司和以前學習階段不斷聽到CommonJs這個詞,
但是我始終沒有去研究他到底是什麼。
也許是我以前對於JS這語言很感冒
好!這都不是理由和藉口~
真相只有一個!
我就~~
如果你也不知道,
可以參考看看我觀察的感想(ノ>ω<)ノ
不懂的也可以在下方跟我討論唷~

此篇學習目標 ◑ω◐ :

  1. 什麼是CommonJS?
  2. 在Node中實際使用起來會長什麼樣子?

什麼是CommonJS?

先來看看維基百科怎麼說

CommonJS是一個專案,其目標是為JavaScript在網頁瀏覽器之外建立模組約定。建立這個專案的主要原因是當時缺乏普遍可接受形式的JavaScript指令碼模組單元,模組在與執行JavaScript指令碼的常規網頁瀏覽器所提供的不同的環境下可以重複使用。

簡單來說CommonJS就是一個模組規範

首先,拋棄你那些高階的想法。
想像一下以前JS古人的時代,
每個人在寫JS時沒有分File,
直接在html的script tag 裡面寫JS那個景象嗎?
用想的是不是感覺就非常精彩!?
我是說Debug的部分xDD

此時此刻出現了模組化的概念

而模組化這個思想要實作,各個大神都有自己的一套實作方法
而沒有一個統一的規範與標準
再來也因為Javascript 想要進攻後端版圖,

所以也衍生出來ServerJS,
之後,ServerJS 更名為 CommonJS。
而CommonJS不是一個涵式庫。
再次強調!(メ ゚皿゚)メ
上面有提到他是一個模組規範與標準 (兇屁
而也因為CommonJS在Node之中廣泛地被使用因此聲名大噪。
其實除了CommonJS還有其他的組織提供其他規範啦~
例如AMD,UMD,CMD...等等 ,這些就不贅述。

其實CommonJS對於模組的定義也是非常的簡單大致分為三個部分

  1. 模組引用
  2. 模組定義
  3. 模組標示

(上述名詞可能會因為翻譯而略有不同)

講到這你可能也快睡著了ԅ(¯﹃¯ԅ)
來實際看看在Node之中怎麼實作

在Node中實際使用起來會長什麼樣子?

模組定義

白話就是寫一個程式把他包裝成一個 module,方便reuse。
保持DRY(Don't repeat your self)

// action.js
function turnRight() {
    return "右轉"
}

function turnLeft() {
    return "左轉"
}

module.exports = {
    turnRight,
    turnLeft
}

模組引用

白話來說就是用上述定義好的模組

// main.js
const action = require('action')

console.log(`紅燈要~${action.turnRight()}`)
console.log(`紅燈要~${action.turnLeft()}`)

執行結果

模組標示

白話說就是Coding Style的概念
主要就是在說require()內的參數

  1. 必須是小駝峰的字串
  2. 必須是以. , ..開頭的絕對路徑或相對路徑
  3. 可以不必加上.js的後綴字

結語

其實CommonJS沒有想像中的那麼難懂,(●´ω`●)ゞ
雖然之後出現了AMD,UMD甚至是相對較新的ES6等等模組規範,
但是對我來說,這些都不是重點...
重點是...
我現在時常用Node卻不知道我平常用的正是CommonJS規範好的。
覺得有一點丟臉(((゚Д゚;)))

為什麼叫一統江山的CommonJS?
其實不知道欸感覺大家都在用,一個感覺~
雖然新的ES6看起來很香,
但是支援度還是稍嫌不足還是得靠Babel去轉,
講那麼多我還是會用新的啦(X
但是知道這個CommonJS感覺也不是一件壞事,
人嘛總是要溫故知新(根本不是這樣用)

補充一下
CommonJS是同步加載的
AMD是異步的,
有興趣的可以自行研究或是等我哪天有空再分享給你各位

好了~這篇就到這了

感謝各位
期待與您再次相會。

參考文獻

什麼?!我們竟然有 3 個標準? - 你有聽過 CommonJS 嗎?(Day9)
CommonJS规范
試著把切版專案升級到 gulp4.0 吧 Day06 來自 gulp 的 hello world:JavaScript 模組化方案
Day29-JS模組化!(套件結合篇)


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言