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

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

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

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

當(dāng)我開(kāi)始使用 JavaScript 模塊時(shí)，我使用默認(rèn)的語(yǔ)法來(lái)導(dǎo)出模塊定義的單個(gè)塊，不管是類(lèi)還是函數(shù)。

例如，這是一個(gè)將模塊 Greeter 導(dǎo)出為默認(rèn)值的模塊程序：

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

更糟糕的是，編輯器沒(méi)有提供有關(guān)要導(dǎo)入的類(lèi)名的自動(dòng)完成建議。

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

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

使用命名導(dǎo)出，編輯器可以更好地進(jìn)行重命名：每次更改原始類(lèi)名時(shí)，所有使用者模塊也會(huì)更改類(lèi)名。

自動(dòng)完成功能還會(huì)建議導(dǎo)入的類(lèi)：

所以，這是我的建議：

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

2.導(dǎo)入期間不進(jìn)行繁重的計(jì)算工作

模塊級(jí)別范圍定義了函數(shù)、類(lèi)、對(duì)象和變量。該模塊可以導(dǎo)出其中一些組件，就像這樣。

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

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

這是一個(gè)問(wèn)題，因?yàn)閎igJsonString的解析是在模塊級(jí)范圍內(nèi)完成的。bigJsonString的解析實(shí)際上是在導(dǎo)入配置模塊時(shí)發(fā)生的：

在更高的級(jí)別上，模塊級(jí)范圍的作用是定義模塊組件、導(dǎo)入依賴(lài)項(xiàng)和導(dǎo)出公共組件：這是依賴(lài)項(xiàng)解析過(guò)程。它應(yīng)該與運(yùn)行時(shí)分離：解析JSON、發(fā)出請(qǐng)求、處理事件。

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

因?yàn)?data 屬性被定義為一個(gè) getter，所以只有在使用者訪(fǎng)問(wèn) configuration.data 時(shí)才解析bigJsonString。

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

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

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

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

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

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

formatDate 模塊具有很高的內(nèi)聚性，因?yàn)樗墓δ苊芮邢嚓P(guān)，并且側(cè)重于日期格式化：

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

4.避免較長(zhǎng)的相對(duì)路徑

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

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

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

盡管有時(shí)寫(xiě)入絕對(duì)路徑的時(shí)間更長(zhǎng)，但是使用絕對(duì)路徑可以使導(dǎo)入的模塊的位置清晰明了。

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

使用絕對(duì)路徑而不是較長(zhǎng)的相對(duì)路徑。

5.結(jié)論

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

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

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

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

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