在大型應(yīng)用中，最關(guān)鍵且最具挑戰(zhàn)性的方面之一就是擁有一個良好且合理的文件結(jié)構(gòu)。在考慮通過微前端將代碼庫拆分成多個應(yīng)用之前，可以遵循一些步驟來改善項目級別的架構(gòu)，并在您考慮這一路徑時使過渡更容易。CZd28資訊網(wǎng)——每日最新資訊28at.com

我們的目標是應(yīng)用某種模塊化方法，使代碼庫更容易理解，通過為各個功能設(shè)置邊界，減少代碼耦合和副作用。CZd28資訊網(wǎng)——每日最新資訊28at.com

默認項目結(jié)構(gòu)

默認情況下，當(dāng)使用流行的前端框架之一搭建新項目時，組件結(jié)構(gòu)是扁平的，并且沒有任何層次結(jié)構(gòu)。CZd28資訊網(wǎng)——每日最新資訊28at.com

圖片CZd28資訊網(wǎng)——每日最新資訊28at.com

本示例使用的是 Vue 的默認項目結(jié)構(gòu)，但 React 對如何將文件放入文件夾也沒有意見。CZd28資訊網(wǎng)——每日最新資訊28at.com

這個例子使用了 Vue 的默認項目結(jié)構(gòu)，但 React 也沒有對如何將文件放入文件夾提出意見。CZd28資訊網(wǎng)——每日最新資訊28at.com

• assets：存儲應(yīng)用中使用的靜態(tài)資產(chǎn)，如圖像、字體和 CSS 文件。
• components：包含可重用的 Vue 組件。推薦使用扁平層次結(jié)構(gòu)。
• main.js：作為應(yīng)用的入口點，啟用 Vue 并配置插件或附加庫。
• App.vue：表示應(yīng)用的根組件，作為其他組件的容器并充當(dāng)主要模板。

我們通過實踐發(fā)現(xiàn)，對于大型項目，這種架構(gòu)很快就會失控。需要某種模塊化方法來輕松定位給定的文件，為各個功能設(shè)置邊界，并避免組件的緊密耦合。CZd28資訊網(wǎng)——每日最新資訊28at.com

將應(yīng)用分解成多個功能

將應(yīng)用分解成多個功能任何大型應(yīng)用都會被分解成多個獨立的功能。識別它們并不總是容易和直接的，但經(jīng)過一段時間和經(jīng)驗之后會變得更好。我們一起嘗試將一個流行的應(yīng)用分成多個部分作為練習(xí)。CZd28資訊網(wǎng)——每日最新資訊28at.com

圖片CZd28資訊網(wǎng)——每日最新資訊28at.com

Twitter 的主頁有很多內(nèi)容。時間線是頁面的核心，被許多功能環(huán)繞，如導(dǎo)航、推文創(chuàng)建部分、帶有多個子組件的側(cè)邊欄、懸浮消息組件等。CZd28資訊網(wǎng)——每日最新資訊28at.com

圖片CZd28資訊網(wǎng)——每日最新資訊28at.com

將構(gòu)成這些功能的所有組件放在同一個文件夾中是不可維護的，即使使用 IDE 的快速查找選項，定位其中一個組件也會非常困難。CZd28資訊網(wǎng)——每日最新資訊28at.com

更精細的項目結(jié)構(gòu)

從經(jīng)驗來看，更好和更全面的文件結(jié)構(gòu)如下所示：CZd28資訊網(wǎng)——每日最新資訊28at.com

圖片CZd28資訊網(wǎng)——每日最新資訊28at.com

• components：所有跨整個應(yīng)用使用的共享組件。
• composables：所有共享的 composables。
• config：應(yīng)用配置文件。
• features：包含所有應(yīng)用功能。我們希望將大部分應(yīng)用代碼放在這里。稍后會詳細說明。
• layouts：頁面的不同布局。
• lib：應(yīng)用中使用的不同第三方庫的配置。
• pages：應(yīng)用的頁面。
• services：共享的應(yīng)用服務(wù)和提供者。
• stores：全局狀態(tài)存儲。
• test：與測試相關(guān)的 mock、幫助程序、工具和配置。
• types：共享的 TypeScript 類型定義。
• utils：共享的實用函數(shù)。
• assets：靜態(tài)資源。

在項目根目錄下運行以下命令以創(chuàng)建不存在的文件夾。CZd28資訊網(wǎng)——每日最新資訊28at.com

mkdir -p src/{components,composables,config,features,layouts,lib,pages,services,stores,test,types,utils,assets}

需要注意的三件重要事項：CZd28資訊網(wǎng)——每日最新資訊28at.com

Pages 文件夾：頁面文件夾已經(jīng)在上下文和構(gòu)建工具（如 webpack 或 Vite）將創(chuàng)建的實際塊方面進行了一些模塊化。將所有頁面放在一個地方非常有幫助，但其中的邏輯應(yīng)保持最低限度。CZd28資訊網(wǎng)——每日最新資訊28at.com

Features 文件夾：為了更容易的維護和擴展，我們希望將大部分應(yīng)用代碼放在 features 文件夾中。每個功能文件夾應(yīng)包含特定功能的領(lǐng)域代碼。CZd28資訊網(wǎng)——每日最新資訊28at.com

共享內(nèi)容：在一個理想的世界中，我們不應(yīng)該有共享組件、composables、stores 和 services，所有內(nèi)容都應(yīng)該放在相應(yīng)的功能文件夾中。不幸的是，在實際項目中，這無法避免，但我們應(yīng)該提前計劃，并在將內(nèi)容添加到這些文件夾時格外小心。CZd28資訊網(wǎng)——每日最新資訊28at.com

Features 文件夾

正如前面提到的，我們的大部分應(yīng)用應(yīng)該放在 features 文件夾中，分為多個子目錄。CZd28資訊網(wǎng)——每日最新資訊28at.com

圖片CZd28資訊網(wǎng)——每日最新資訊28at.com

• api：所有的 fetch 邏輯都放在這里。這將 API 和 UI 解耦。
• components：特定功能的組件。
• composables：特定功能的 composables。
• stores：狀態(tài)管理代碼。多個子模塊是預(yù)期的，實際上是被鼓勵的。
• types：特定功能的 TypeScript 類型定義。
• index.ts：這是功能的入口點。它充當(dāng)功能的公共 API，并且應(yīng)該只導(dǎo)出應(yīng)該為應(yīng)用程序其他部分公開的內(nèi)容。

上述的 index.ts 文件充當(dāng)每個功能的公共 API。在從另一個領(lǐng)域?qū)雰?nèi)容時，應(yīng)該僅通過此文件進行。這可以防止循環(huán)依賴，并且還可以更輕松地找到導(dǎo)入的來源。CZd28資訊網(wǎng)——每日最新資訊28at.com

// 不好的做法  
                
本文鏈接：http://www.tebozhan.com/showinfo-26-97295-0.html一個合理的前端應(yīng)用文件結(jié)構(gòu)
                
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
                
上一篇： 互聯(lián)網(wǎng)配置中心設(shè)計和實踐，你學(xué)會了嗎？
                
下一篇： RecyclerView的緩存機制及使用策略