使用 ES2015 模塊，您可以將應(yīng)用程序代碼分成可重用的、封裝的、專注于單一任務(wù)的模塊。

這很好，但是如何構(gòu)造模塊呢?一個模塊應(yīng)該有多少個函數(shù)和類?

這篇文章介紹了有關(guān)如何更好地組織 JavaScript 模塊的4種優(yōu)秀實踐。

1.優(yōu)先使用命名導出

當我開始使用 JavaScript 模塊時，我使用默認的語法來導出模塊定義的單個塊，不管是類還是函數(shù)。

例如，這是一個將模塊 Greeter 導出為默認值的模塊程序：

隨著時間的推移，我注意到了重構(gòu)默認導出的類(或函數(shù))的困難。在重命名原始類時，使用者模塊中的類名沒有改變。

更糟糕的是，編輯器沒有提供有關(guān)要導入的類名的自動完成建議。

我的結(jié)論是，默認的導出并沒有帶來明顯的好處。然后我轉(zhuǎn)向了命名導出。

讓我們將 Greeter 命名為出口，然后看看好處：

使用命名導出，編輯器可以更好地進行重命名：每次更改原始類名時，所有使用者模塊也會更改類名。

自動完成功能還會建議導入的類：

所以，這是我的建議：

"支持命名模塊導出，以受益于重命名重構(gòu)和代碼自動完成功能。"

2.導入期間不進行繁重的計算工作

模塊級別范圍定義了函數(shù)、類、對象和變量。該模塊可以導出其中一些組件，就像這樣。

模塊級范圍不應(yīng)該進行繁重的計算，比如解析 JSON、發(fā)出 HTTP 請求、讀取本地存儲等等。

例如，下面的模塊配置解析來自全局變量 bigJsonString 的配置：

這是一個問題，因為bigJsonString的解析是在模塊級范圍內(nèi)完成的。bigJsonString的解析實際上是在導入配置模塊時發(fā)生的：

在更高的級別上，模塊級范圍的作用是定義模塊組件、導入依賴項和導出公共組件：這是依賴項解析過程。它應(yīng)該與運行時分離：解析JSON、發(fā)出請求、處理事件。

讓我們重構(gòu)配置模塊來執(zhí)行延遲解析：

因為 data 屬性被定義為一個 getter，所以只有在使用者訪問 configuration.data 時才解析bigJsonString。

消費者更清楚什么時候進行大的操作，使用者可能決定在瀏覽器空閑時執(zhí)行該操作。或者，使用者可能會導入模塊，但是出于某種原因不使用它。

這為更深層的性能優(yōu)化提供了機會：減少交互時間，很大程度地減少主線程工作。

導入時，模塊不應(yīng)該執(zhí)行任何繁重的工作。相反，使用者應(yīng)該決定何時執(zhí)行運行時操作。

3.盡可能的使用高內(nèi)聚模塊

內(nèi)聚性描述了模塊內(nèi)部各個組件在一起的程度。

高內(nèi)聚模塊的函數(shù)、類或變量是密切相關(guān)的，他們專注于單個任務(wù)。

formatDate 模塊具有很高的內(nèi)聚性，因為它的功能密切相關(guān)，并且側(cè)重于日期格式化：

formatDate()、ensureDateInstance() 和 MONTHS 彼此密切相關(guān)。刪除 MONTHS 或ensureDateInstance() 會破壞 formatDate()：這是高內(nèi)聚的標志。

4.避免較長的相對路徑

我發(fā)現(xiàn)很難理解一個模塊的路徑包含一個，甚至更多的父文件夾：

而有一個父選擇器 ../ 通常不是問題，擁有 2 個或更多通常很難掌握。

這就是為什么我建議避免使用父文件夾，而使用絕對路徑：

盡管有時寫入絕對路徑的時間更長，但是使用絕對路徑可以使導入的模塊的位置清晰明了。

為了減少冗長的絕對路徑，可以引入新的根目錄。例如，這可以使用 babel-plugin-module-resolver實現(xiàn)。

使用絕對路徑而不是較長的相對路徑。

5.結(jié)論

JavaScript 模塊非常適合將您的應(yīng)用程序邏輯拆分為多個獨立的小塊。

通過使用命名的導出而不是默認的導出，可以在導入命名組件時更輕松地重命名重構(gòu)和編輯器自動完成幫助。

使用 import {myFunc} from 'myModule' 的唯一目的就是導入 myFunc 組件，僅此而已。myModule的模塊級范圍應(yīng)該只定義包含少量內(nèi)容的類、函數(shù)或變量。

一個組件應(yīng)該有多少個函數(shù)或類，這些組件應(yīng)該如何與每個組件相關(guān)聯(lián)?支持高內(nèi)聚的模塊：它的組件應(yīng)該緊密相關(guān)并執(zhí)行一個共同的任務(wù)。

包含許多父文件夾 ../ 的長相對路徑很難理解，將它們重構(gòu)為絕對路徑。