今天嘗試考古在 CommonJS 出現前的 JavaScript 模組化歷史，從模組模式的由來，再聊到以前為了能達到非同步載入多個模組，並避免載入模組時產生過多 request 的問題，因而出現的 LABjs、YUI loader、YUI combo 等這些工具。

(Photo by Jr Korpa)

前言

昨天參考這個投影片，提到 JavaScript 早期為了模組化所發展出的各種方法，而其中緊接著就跳到了 2009 年的 LABjs、YUI loader 等 script loader 工具，單憑投影片沒辦法瞭解這中間的脈絡是什麼，時間軸上也有點模糊。

大多文章會直接介紹 CommonJS、AMD、CMD、UMD、ESM，關於在這之前的歷史比較少提及，因此做了一番考古後找到良葛格這篇文章中有提到一篇文章 —— JavaScript Module Pattern: In-Depth，最後在交叉比對各種資料後，在 CommonJS 被提出前，可以大概整理出以下這樣的時間軸。

上古時代 (2006 年前)

雖然昨天有針對程式碼去說明，這邊多補充一些歷史：

• Douglas Crockford 在 2001 年有發表過文章提出 JavaScript 公私有變數的概念，而模組模式從一些以前文章考古起來似乎是由他所提出
  • Douglas Crockford 為 JSON 之父
  • 在他 2008 年出版的《JavaScript: The Good Parts》有提及模組模式
• 2004 發佈的 Dojo Toolkit 目前是查到最早引入模組化概念的 JavaScript 框架，其中用到了 dojo.require() 來做模組載入，在之後則與 AMD 這個模組化標準去對齊
• 2006 年 Eric Miraglia 曾在 YUI 部落格中首次詳細描述模組模式
  • YUI (Yahoo! UI Library) 為一套 2006 年在 Ajax 概念被提出後，Yahoo! 所發佈一套方便操作 Ajax、DOM 等功能的多功能函式庫
  • 後續因為已不合時代且維護不易， Yahoo 在 2014 年宣告終止維護
• 在 2007 年的這篇 Show love to the Module Pattern 其中有提到模組模式由 Douglas 提出，而後由 Eric Miraglia 的解說去發揚光大

石器時代 (2006-2009)

此時討論的大多關於擴充之前的模組模式，以及關注如何在複雜應用中做到非同步載入模組 (script loader)：

• LABjs：2009 發佈，第一個流行的 script loader
• YUI3 loader：前面提到的 YUI，在 2009 年的 YUIConf 中，由團隊工程主管 Eric Miraglia 介紹 YUI3 的新功能，其中也完善了 script loader 的功能，從寫法上來看可以看見後續 AMD 等標準的影子
• YUI Combo：YUI 函式庫中為了解決模組載入時，造成太多 request 而生的工具，能夠將相關模組在同一個 request 中做合併載入
• 在上面提到的這篇 2010 的文章中作者也試著整理與提出其他關於原本模組模式的延伸，有興趣了解範例可以在見原文：
  • 增強模式 (Augmentation)：簡單說就是可以去擴充原本模組中的新屬性
  • 鬆散增強模式 (Loose Augmentation)：允許做到非同步載入，也就是可以同時載入互不相依賴的多個模組，此時也提到了可用用上 LAB.js 這個工具來達成此效果
  • 緊密增強模式 (Tight Augmentation)：主要用於安全地擴充模組
  • 繼承模式 (Cloning and Inheritance)：繼承模組並覆寫新模組中的方法
  • 跨檔案共享私有屬性 (Cross-File Private State)：利用幾個擴充屬性來管理是否能讀取私有變數
  • 子模組 (Sub-modules)：在主模組下再去擴充子層模組，其實概念就類似 children component

小結

今天這篇的內容可以當歷史故事看看就好，純粹是一個興趣使然下突然燃起考古魂想了解一下在 CommonJS 出現前，前人如何為了模組化這件事努力，只要記得兩件事：

• 嘗試各種模組模式，為後續百家爭鳴的模組化標準奠定基礎
• 嘗試解決能非同步載入多個模組，並避免載入模組時產生過多 request 的問題，因而出現了 LABjs、YUI loader、YUI combo 等這些工具

後記

原本今天想寫到 ESM，但果然是太高估自己的考古能力了，明天終於可以開始進到比較熟悉的各種模組化標準了，希望可以一篇講到大一統的 ESM 後，就可以迎來介紹新工具的篇章了！