前端項目目錄如何組織

背景

最近看了 antd pro 發現其項目的目錄結構組織的不錯。而後再按照本身的項目經驗，對其項目的組織進行修改，如今總結下本身的想法。

正題

咱們看下 antd pro 本身生成的目錄結構

├── mock                     # 本地模擬數據
  ├── public
  │   └── favicon.ico          # Favicon
  ├── src
  │   ├── assets               # 本地靜態資源
  │   ├── common               # 應用公用配置，如導航信息
  │   ├── components           # 業務通用組件
  │   ├── e2e                  # 集成測試用例
  │   ├── layouts              # 通用佈局
  │   ├── models               # dva model
  │   ├── routes               # 業務頁面入口和經常使用模板
  │   ├── services             # 後臺接口服務
  │   ├── utils                # 工具庫
  │   ├── g2.js                # 可視化圖形配置
  │   ├── theme.js             # 主題配置
  │   ├── index.ejs            # HTML 入口模板
  │   ├── index.js             # 應用入口
  │   ├── index.less           # 全局樣式
  │   └── router.js            # 路由入口
  ├── tests                    # 測試工具
  ├── README.md
  └── package.json

區分通用組件和業務組件

因爲 antd pro 自己引用了 antd 的組件庫，因此不存在本身寫通用組件的步驟。可是有的時候咱們本身項目會有本身寫通用組件的須要。組件除了有通用組件，還會有業務組件。通用組件是粒度比較細且和業務無關的組件，譬如 Dropdown。而業務組件多是你這個項目特有的，譬如工具欄，或者某種特殊的彈框。業務組件大多數狀況是由（但不單單由）通用組件組成。業務組件是粒度比較粗的組件。因此這個時候我通常會把通用組件放在 components 目錄下，而新建一個 widgets 目錄放業務組件，這樣分的比較清楚。不過通用組件和業務組件的劃分邊界並非每次都能分的很清楚，有時是會相互轉換的，若是實在以爲很難區分，那能夠都放在 components 下。

領域對象

src／models 目錄放的是 dva model，若是你用 redux，那麼這裏大體可能對應的是 state 的概念，若是用 mobx 這裏隱約對應的是 store 的概念。在我看來這些都不是 model，只能叫作狀態（state）相關。我我的理解的 model 應該指的是領域對象也就是領域驅動設計（Domain-Driven Design）中的 domain object，相似於 java bean 的概念。因此我會把放在 models 下面的東西用一個新的目錄存放，一般叫 stores，而 models 下面會放領域對象（domain object）。拿 todo list 爲例，我會抽象出一個 TodoItem 的領域對象，其定義：

class TodoItem {
  id = -1;
  text = '';
  done = false;

  constructor( rawData ) {
    if ( rawData ) {
      Object.assign( this, rawData );
    }
  }
}

export default TodoItem;

枚舉

這個簡單，一般項目都不會少了枚舉值，這個時候我會單獨新建一個 enums 的目錄放項目所用到的全部枚舉對象。固然，若是不多的話併入 common 目錄也何嘗不可。 這個時候 src 目錄基本上會變成這樣：

├── mock                     # 本地模擬數據
  ├── public
  │   └── favicon.ico          # Favicon
  ├── src
  │   ├── assets               # 本地靜態資源
  │   ├── common               # 應用公用配置，如導航信息
  │   ├── enums                # 枚舉
  │   ├── components           # 通用組件
  │   ├── widgets              # 業務組件
  │   ├── e2e                  # 集成測試用例
  │   ├── layouts              # 通用佈局
  │   ├── stores               # 狀態相關對象（dva model）
  │   ├── models               # domain object
  │   ├── routes               # 業務頁面入口和經常使用模板
  │   ├── services             # 後臺接口服務
  │   ├── utils                # 工具庫
  │   ├── g2.js                # 可視化圖形配置
  │   ├── theme.js             # 主題配置
  │   ├── index.ejs            # HTML 入口模板
  │   ├── index.js             # 應用入口
  │   ├── index.less           # 全局樣式
  │   └── router.js            # 路由入口
  ├── tests                    # 測試工具
  ├── README.md
  └── package.json

精簡

看上目錄不少，這裏我精簡下，若是你的項目沒有複雜的佈局，沒有可視化圖形配置，沒有複雜的路由且用了 react-router4，最後沒有可配置主題那麼基本的目錄結構能夠精簡爲：

├── mock                     # 本地模擬數據
  ├── public
  │   └── favicon.ico          # Favicon
  ├── src
  │   ├── assets               # 本地靜態資源
  │   ├── common               # 應用公用配置，如導航信息
  │   ├── enums                # 枚舉
  │   ├── components           # 通用組件
  │   ├── widgets              # 業務組件
  │   ├── stores               # 狀態相關對象（dva model）
  │   ├── models               # domain object
  │   ├── routes               # 業務頁面入口和經常使用模板
  │   ├── services             # 後臺接口服務
  │   ├── utils                # 工具庫
  │   └── index.js             # 應用入口
  ├── tests                    # 測試工具
  ├── README.md
  └── package.json

優化

若是項目前期設計作的好，抽象建模工做作的到位，其實你會發現，項目目錄大體還能夠分爲兩類：UI 相關和 UI 無關的。這個時候我會把 UI 相關的放到一個 app 的目錄下，整個項目就會分紅 MV（model，view） 的層次：

├── mock                     # 本地模擬數據
  ├── public
  │   └── favicon.ico          # Favicon
  ├── src
  │   ├── app
  │   │    ├── assets               # 本地靜態資源
  │   │    ├── components           # 通用組件
  │   │    ├── widgets              # 業務組件
  │   │    ├── stores               # 狀態相關對象（dva model）
  │   │    ├── routes               # 業務頁面入口和經常使用模板
  │   │    └── index.js
  │   ├── common               # 應用公用配置，如導航信息
  │   ├── enums                # 枚舉
  │   ├── models               # domain object
  │   ├── services             # 後臺接口服務
  │   ├── utils                # 工具庫
  │   └── index.js             # 應用入口
  ├── tests                    # 測試工具
  ├── README.md
  └── package.json

這麼作的用意是當你的項目 UI 框架重構的時候能夠只動 app 目錄。從 redux 變到 mobx，也能夠從 react 變成 angular。固然這層抽象不是必須的，只是我我的偏好，若是要重構一般也會整個項目重構。

總結

以上就是我根據 antd pro 修改的，我認爲比較通用的項目目錄結構（這裏沒有提到測試相關）。