3.2 代碼組織決定應用架構

開發人員在構建架構之后面臨的第一個挑戰是，如何讀懂代碼結構。在接觸代碼之前，我們所要面對的就是代碼的組織方式。我們可能會做如下一些事情：

◎ 打開README了解應該閱讀哪些相關的資料。

◎ 閱讀package.json了解系統的基礎設施、使用了哪些組件庫，以及配置了哪些構建腳本。

◎ 瀏覽主目錄下的一個個文件，了解系統的一些插件的配置。

◎ 進入項目代碼中閱讀和了解。

不同框架有不同的文件組織方式，不同團隊也有不同的規范。比如使用Java或Spring框架，默認會遵循這樣的一些文件夾規范：model文件夾用于存放與模型相關的代碼，repository文件夾用于存放與數據源相關的代碼，service文件夾用于存放與服務相關的代碼等。這些代碼的組織形式實際上反映了應用的架構。

Python語言的Django框架使用的方式是基于業務的組織形式，即每個“應用”（即某一業務領域，如用戶管理）是一個單獨的文件夾，在它的目錄中擁有自己完整的相關代碼。下面是一個Django應用的代碼結構：

        .
        ├—— __init__.py
        ├—— admin.py
        ├—— apps.py
        ├—— migrations
        |   └—— __init__.py
        ├—— models.py
        ├—— tests.py
        └—— views.py

對于前端來說也是相似的。下面是Angular生成的應用（通過ng new xxx可生成）的主目錄下的結構：

        e2e                                     //E2E測試文件夾
        src                                     //源碼文件夾
        .editorconfig                           //編輯器統一格式配置文件
        .gitignore                              //Git忽略文件的配置文件
        angular.json                            //Angular配置文件
        package.json                            //軟件包相關信息的配置文件
        README.md                               //文檔
        tsconfig.json                           //TypeScript編譯配置文件
        tslint.json                             //TypeScript代碼風格配置文件

通過上面的文件名信息，我們可以快速地了解系統的一些基礎組成。這對于其他前端框架也是相似的，這些配置文件實則是定義了一系列的規范。對于不同的開發者，它們可以起到規范的作用。

在src目錄的app文件夾下，有如下一些文件：

        ├—— app.component.css
        ├—— app.component.html
        ├—— app.component.spec.ts
        ├—— app.component.ts
        ├—— app.module.ts
        └—— header
            ├—— header.component.css            //CSS樣式文件
            ├—— header.component.html           //HTML模板文件
            ├—— header.component.spec.ts        //測試文件
            └—— header.component.ts             //TypeScript代碼邏輯

面代碼中的header是通過Angular的CLI生成的。舉Angular的例子是為了說明代碼組織結構的重要性。此外，還需要注意文件名。如果這里的header組件實際上是一個用于頁面底部的組件，那么就會很尷尬。

從這里的代碼組織形式來看，它更像是基于組件的架構，而不再是類似于MVC形式的架構。對于其他前端框架比如React，如果我們通過狀態來管理應用，那么從組織構建上看，它像MVC架構。

從文件名上就可以了解這是一個組件（Component），而由于CSS、HTML、TypeScript的分離，我們又可以快速地在修改代碼時找到對應的文件。這種特性對于龐大工程的項目來說相當有幫助，但是對于簡單的業務，比如加載（Loading）組件時，使用與React、Vue相似的結構會更簡潔，即一個文件包含CSS、HTML、JavaScript代碼。

注意：這里主要針對框架默認生成的代碼組織架構，一個Vue組件也可以拆分成多個文件，一個Angular組件也可以寫成一個文件。而默認生成的，意味著這個框架是約定俗成的，在生成的時候需要加以注意。

因此，當我們定下了前端應用的架構時，我們應該按照與架構相似的方式來編寫，以免隨著代碼架構的變化而腐爛。當架構在未來發生變化的時候，我們就需要相應地更改代碼的組織方式。