建站
咨詢
售后
建站咨詢
新聞中心
使用 ES2015 模塊，您可以將應(yīng)用程序代碼分成可重用的、封裝的、專注于單一任務(wù)的模塊。
我們提供的服務(wù)有：成都網(wǎng)站設(shè)計、網(wǎng)站制作、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、猇亭ssl等。為數(shù)千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的猇亭網(wǎng)站制作公司
這很好，但是如何構(gòu)造模塊呢?一個模塊應(yīng)該有多少個函數(shù)和類?
這篇文章介紹了有關(guān)如何更好地組織 JavaScript 模塊的4種優(yōu)秀實(shí)踐。
[[316765]]
1.優(yōu)先使用命名導(dǎo)出
當(dāng)我開始使用 JavaScript 模塊時，我使用默認(rèn)的語法來導(dǎo)出模塊定義的單個塊，不管是類還是函數(shù)。
例如，這是一個將模塊 Greeter 導(dǎo)出為默認(rèn)值的模塊程序：
隨著時間的推移，我注意到了重構(gòu)默認(rèn)導(dǎo)出的類(或函數(shù))的困難。在重命名原始類時，使用者模塊中的類名沒有改變。
更糟糕的是，編輯器沒有提供有關(guān)要導(dǎo)入的類名的自動完成建議。
我的結(jié)論是，默認(rèn)的導(dǎo)出并沒有帶來明顯的好處。然后我轉(zhuǎn)向了命名導(dǎo)出。
讓我們將 Greeter 命名為出口，然后看看好處：
使用命名導(dǎo)出，編輯器可以更好地進(jìn)行重命名：每次更改原始類名時，所有使用者模塊也會更改類名。
自動完成功能還會建議導(dǎo)入的類：
所以，這是我的建議：
"支持命名模塊導(dǎo)出，以受益于重命名重構(gòu)和代碼自動完成功能。"
2.導(dǎo)入期間不進(jìn)行繁重的計算工作
模塊級別范圍定義了函數(shù)、類、對象和變量。該模塊可以導(dǎo)出其中一些組件，就像這樣。
模塊級范圍不應(yīng)該進(jìn)行繁重的計算，比如解析 JSON、發(fā)出 HTTP 請求、讀取本地存儲等等。
例如，下面的模塊配置解析來自全局變量 bigJsonString 的配置：
這是一個問題，因?yàn)閎igJsonString的解析是在模塊級范圍內(nèi)完成的。bigJsonString的解析實(shí)際上是在導(dǎo)入配置模塊時發(fā)生的：
在更高的級別上，模塊級范圍的作用是定義模塊組件、導(dǎo)入依賴項(xiàng)和導(dǎo)出公共組件：這是依賴項(xiàng)解析過程。它應(yīng)該與運(yùn)行時分離：解析JSON、發(fā)出請求、處理事件。
讓我們重構(gòu)配置模塊來執(zhí)行延遲解析：
因?yàn)?data 屬性被定義為一個 getter，所以只有在使用者訪問 configuration.data 時才解析bigJsonString。
消費(fèi)者更清楚什么時候進(jìn)行大的操作，使用者可能決定在瀏覽器空閑時執(zhí)行該操作。或者，使用者可能會導(dǎo)入模塊，但是出于某種原因不使用它。
這為更深層的性能優(yōu)化提供了機(jī)會：減少交互時間，很大程度地減少主線程工作。
導(dǎo)入時，模塊不應(yīng)該執(zhí)行任何繁重的工作。相反，使用者應(yīng)該決定何時執(zhí)行運(yùn)行時操作。
3.盡可能的使用高內(nèi)聚模塊
內(nèi)聚性描述了模塊內(nèi)部各個組件在一起的程度。
高內(nèi)聚模塊的函數(shù)、類或變量是密切相關(guān)的，他們專注于單個任務(wù)。
formatDate 模塊具有很高的內(nèi)聚性，因?yàn)樗墓δ苊芮邢嚓P(guān)，并且側(cè)重于日期格式化：
formatDate()、ensureDateInstance() 和 MONTHS 彼此密切相關(guān)。刪除 MONTHS 或ensureDateInstance() 會破壞 formatDate()：這是高內(nèi)聚的標(biāo)志。
4.避免較長的相對路徑
我發(fā)現(xiàn)很難理解一個模塊的路徑包含一個，甚至更多的父文件夾：
而有一個父選擇器 ../ 通常不是問題，擁有 2 個或更多通常很難掌握。
這就是為什么我建議避免使用父文件夾，而使用絕對路徑：
盡管有時寫入絕對路徑的時間更長，但是使用絕對路徑可以使導(dǎo)入的模塊的位置清晰明了。
為了減少冗長的絕對路徑，可以引入新的根目錄。例如，這可以使用 babel-plugin-module-resolver實(shí)現(xiàn)。
使用絕對路徑而不是較長的相對路徑。
5.結(jié)論
JavaScript 模塊非常適合將您的應(yīng)用程序邏輯拆分為多個獨(dú)立的小塊。
通過使用命名的導(dǎo)出而不是默認(rèn)的導(dǎo)出，可以在導(dǎo)入命名組件時更輕松地重命名重構(gòu)和編輯器自動完成幫助。
使用 import {myFunc} from 'myModule' 的唯一目的就是導(dǎo)入 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)為絕對路徑。
當(dāng)前文章：四個優(yōu)秀實(shí)踐，引導(dǎo)你寫出高質(zhì)量JavaScript模塊
URL分享：http://www.5511xx.com/article/cccieeg.html
