[TOC] # 31. 模塊系統和包管理器 JavaScript沒有模塊的內置支持，但社區創造了令人印象深刻的解決方法。為了管理模塊，您可以使用所謂的包管理器，它負責處理發現、安裝、依賴管理和更多。 ## 31．1 模塊系統 JavaScript模塊中兩個最重要的標準（不幸的是不兼容的）是： ### CommonJS模塊（CJS） 本標準主導的體現是`Node.js`模塊（`Node.js`模塊有幾個超越CJS的特點）。其特點包括： * 緊湊的語法 * 專為同步加載設計 * 主要使用：服務端。 ### 異步模塊定義（AMD） 本標準的最流行的實現是[`RequireJS`](http://requirejs.org/)。其特點包括： * 稍微復雜的語法，使AMD沒有`eval()`或靜態編譯步驟的工作 * 專為異步加載設計 * 主要使用：瀏覽器端 ## 31．2 包管理器 當涉及到軟件包管理器，**NPM**（Node Packaged Modules）是Node.js規范選擇。對于瀏覽器來說，以下兩個項很受歡迎（與其他相比）： * `Bower`是一個支持AMD和CJS的 Web包管理器。 * `Browserify`是一個工具，可以讓你使用類似于 node 的 `require()` 的方式來組織瀏覽器端的 Javascript 代碼，通過預編譯讓前端 Javascript 可以直接使用 Node NPM 安裝的一些庫。 ## 31．3 簡單粗暴的模塊實現 對于正常的web開發,，你應該使用一個模塊系統，如`requirejs`或`Browserify`。然而，有時候你只想簡單暴力一些把它放在一起。下面簡單的模塊模式可以幫助： ```js var moduleName = function () { function privateFunction () { ... } function publicFunction(...) { privateFunction(); otherModule.doSomething(); // implicit import } return { // exports publicFunction: publicFunction }; }(); ``` 上述是一個模塊，存儲在全局變量的`moduleName`。它做以下： * 隱式的導入依賴（模塊`othermodule`） * 有一個私有的函數，`privateFunction` * 輸出`publicFunction` 若要在網頁上使用該模塊，只需通過`<script >`標記加載其文件及其依賴項的文件： ```js <script src="modules/otherModule.js"></script> <script src="modules/moduleName.js"></script> <script type="text/javascript"> moduleName.publicFunction(...); </script> ``` 如果在加載一個模塊時，其他模塊沒有被訪問（這是`moduleName`的情況下），此時模塊加載的順序并不重要。 以下是我的意見和建議： * 我使用這個模塊模式了一段時間，直到我發現我沒有發明它，它有一個正式的名字。Christian Heilmann推廣普及它，叫它"[揭示模塊模式](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript)"。 * 如果您使用此模式，保持簡單。可以隨意用模塊名稱污染全局范圍，但請嘗試找到唯一名稱。它只是為了極客（黑客），所以沒有必要多么好看華麗（嵌套命名空間，模塊分割多個文件，等等）。