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

我們的目標(biāo)是應(yīng)用某種模塊化方法，使代碼庫更容易理解，通過為各個(gè)功能設(shè)置邊界，減少代碼耦合和副作用。

默認(rèn)項(xiàng)目結(jié)構(gòu)

默認(rèn)情況下，當(dāng)使用流行的前端框架之一搭建新項(xiàng)目時(shí)，組件結(jié)構(gòu)是扁平的，并且沒有任何層次結(jié)構(gòu)。

圖片

本示例使用的是 Vue 的默認(rèn)項(xiàng)目結(jié)構(gòu)，但 React 對如何將文件放入文件夾也沒有意見。

這個(gè)例子使用了 Vue 的默認(rèn)項(xiàng)目結(jié)構(gòu)，但 React 也沒有對如何將文件放入文件夾提出意見。

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

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

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

將應(yīng)用分解成多個(gè)功能任何大型應(yīng)用都會(huì)被分解成多個(gè)獨(dú)立的功能。識(shí)別它們并不總是容易和直接的，但經(jīng)過一段時(shí)間和經(jīng)驗(yàn)之后會(huì)變得更好。我們一起嘗試將一個(gè)流行的應(yīng)用分成多個(gè)部分作為練習(xí)。

圖片

Twitter 的主頁有很多內(nèi)容。時(shí)間線是頁面的核心，被許多功能環(huán)繞，如導(dǎo)航、推文創(chuàng)建部分、帶有多個(gè)子組件的側(cè)邊欄、懸浮消息組件等。

圖片

將構(gòu)成這些功能的所有組件放在同一個(gè)文件夾中是不可維護(hù)的，即使使用 IDE 的快速查找選項(xiàng)，定位其中一個(gè)組件也會(huì)非常困難。

更精細(xì)的項(xiàng)目結(jié)構(gòu)

從經(jīng)驗(yàn)來看，更好和更全面的文件結(jié)構(gòu)如下所示：

圖片

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

在項(xiàng)目根目錄下運(yùn)行以下命令以創(chuàng)建不存在的文件夾。

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

需要注意的三件重要事項(xiàng)：

Pages 文件夾：頁面文件夾已經(jīng)在上下文和構(gòu)建工具（如 webpack 或 Vite）將創(chuàng)建的實(shí)際塊方面進(jìn)行了一些模塊化。將所有頁面放在一個(gè)地方非常有幫助，但其中的邏輯應(yīng)保持最低限度。

Features 文件夾：為了更容易的維護(hù)和擴(kuò)展，我們希望將大部分應(yīng)用代碼放在 features 文件夾中。每個(gè)功能文件夾應(yīng)包含特定功能的領(lǐng)域代碼。

共享內(nèi)容：在一個(gè)理想的世界中，我們不應(yīng)該有共享組件、composables、stores 和 services，所有內(nèi)容都應(yīng)該放在相應(yīng)的功能文件夾中。不幸的是，在實(shí)際項(xiàng)目中，這無法避免，但我們應(yīng)該提前計(jì)劃，并在將內(nèi)容添加到這些文件夾時(shí)格外小心。

Features 文件夾

正如前面提到的，我們的大部分應(yīng)用應(yīng)該放在 features 文件夾中，分為多個(gè)子目錄。

圖片

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

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

// 不好的做法 ?? ?? ??
import { UserProfile } from '@/features/profile/components/UserProfile.vue'

// 好的做法 ? ? ?
import { UserProfile } from '@/features/profile'

我們可以使用 no-restricted-imports ESLint 規(guī)則來強(qiáng)制執(zhí)行此模式。

rules: {
    'no-restricted-imports': [
      'error',
      {
        patterns: ['@/features/*/*'],
      },
    ],
    'import/no-cycle': 'error',
    ...
}

結(jié)論

以功能為導(dǎo)向的架構(gòu)是一種有效且經(jīng)過實(shí)戰(zhàn)驗(yàn)證的結(jié)構(gòu)復(fù)雜項(xiàng)目的方法。它允許我們將代碼解耦成獨(dú)立的模塊，并隨著應(yīng)用的復(fù)雜性增加而擴(kuò)展。這將通過提高代碼庫的可預(yù)測性、減少調(diào)試時(shí)間并使上手變得更容易，從而改善開發(fā)體驗(yàn)。