第 31 章。模組系統與套件管理員
目錄
購買書籍
(廣告,請勿封鎖。)

第 31 章。模組系統與套件管理員

JavaScript 沒有內建的模組支援,但社群已經創造出令人印象深刻的解決方法。若要管理模組,您可以使用所謂的套件管理員,它處理發現、安裝、相依性管理等。

模組系統

JavaScript 模組最重要的兩個(而且不幸地不相容)標準是:

CommonJS 模組 (CJS)

此標準的主要化身是Node.js 模組(Node.js 模組有幾個超越 CJS 的功能)。其特性包括

  • 簡潔的語法
  • 設計用於同步載入
  • 主要用途:伺服器
非同步模組定義 (AMD)

此標準最受歡迎的實作是RequireJS。其特性包括

  • 語法稍微複雜,讓 AMD 能在沒有eval()或靜態編譯步驟的情況下運作
  • 設計用於非同步載入
  • 主要用途:瀏覽器

套件管理員

套件管理員方面,npm(Node 封裝模組)是 Node.js 的標準選擇。對於瀏覽器,有兩個選項很受歡迎(還有其他選項):

快速簡陋的模組

對於一般的 Web開發,您應該使用模組系統,例如 RequireJS 或 Browserify。但是,有時您只想快速組裝一個 hack。這時,下列簡單的模組模式可以提供協助:

var moduleName = function () {
    function privateFunction () { ... }
    function publicFunction(...) {
        privateFunction();
        otherModule.doSomething();  // implicit import
    }
    return { // exports
        publicFunction: publicFunction
    };
}();

前述是一個儲存在全域變數 moduleName 中的模組。它執行下列動作

  • 隱式匯入相依性(模組 otherModule
  • 有一個私有函式 privateFunction
  • 匯出 publicFunction

若要在網頁上使用模組,只需透過 <script> 標籤載入其檔案及其相依性的檔案

<script src="modules/otherModule.js"></script>
<script src="modules/moduleName.js"></script>
<script type="text/javascript">
    moduleName.publicFunction(...);
</script>

如果在載入模組時未存取其他模組(moduleName 的情況即為如此),則載入模組的順序並不重要。

以下是我的評論和建議

  • 我使用此模組模式一段時間,直到我發現自己並未發明它,而且它有一個正式的名稱。Christian Heilmann 推廣它,並稱之為 “揭示模組模式”
  • 如果您使用此模式,請保持簡單。請隨時使用模組名稱污染全域範圍,但請嘗試找出獨特的名稱。它僅供駭客使用,因此不需要花俏(巢狀命名空間、跨多個檔案分割的模組等)。
下一篇:32. 更多工具