大型前端項目結構設計

時間 2020-02-01

標籤大型前端項目結構設計简体版

原文原文鏈接

將模塊化的思想進行到底

這個結構也是咱們項目目前正在使用的，應對兩三百個頁面的web項目是沒有任何問題的，在擴展性，多人合做方面是很是優秀的。廢話很少說，先上結構，再說爲何要這麼作。前端

├── service                         # 後端接口管理
│   ├── index.js                    # 接口管理出入口
│   └── ...                         # 具體的不一樣業務/服務接口文件【S-1】
├── assets                          # 項目依賴資源管理
│   └── imgs                        # 圖片資源
│   ├── style                       # 樣式資源
│   └── js                          # 依賴的第三方sdk之類的js資源
├── components                      # 項目組件目錄
│   ├── public                      # 公共組件/基礎組件（好比基礎的按鈕/輸入框等）
│   │   ├── index.js                # 基礎組件的註冊文件【可選】
│   │   ├── README.md               # 組件使用說明文檔【可選】
│   │   └── ...                     # 組件
│   └── ....                        # 基礎性的業務組件（有詳細說明）【C-1】
├── pages                           
│   ├── modules                     # 具體業務所歸屬的文件夾（能夠用業務名稱做爲文件夾名字）
│   │   ├── components              # 業務所用到的組件
│   │   ├── views                   # 業務的全部頁面
│   │   ├── utils                   # 業務的工具集
│   │   ├──	static                  # 業務所用到的靜態資源
│   │   ├── service                 # 業務的後端接口管理
│   │   ├── store                   # 業務所用到的狀態庫（本結構基於Vue，這裏是業務的Vuex）
│   │   └── index.js                # 業務的惟一出口（包含路由與狀態庫）
│   └── ....                        # 其餘業務【P-1】
├── config                          # 項目的基礎配置
│   ├── index.js                    # 配置文件的出入口
│   └── ...                         # 具體的配置文件【C-2】
├── router                          # 項目的路由管理
│   ├── index.js                    # 路由出口
│   └── ...                         # 與路由有關的其餘文件【R-1】
├── store                           # 項目狀態庫的管理
│   ├── index.js                    # 項目狀態庫的出入口
│   └── ...                         # 具體的基礎模塊【S-2】
├── utils                           # 項目所用的工具集（封裝的請求，表單的驗證函數，時間格式化.....的工具）
│   ├── index.js                    # 工具的入口
│   └── ...                         # 具體的各個工具（請求封裝、正則、驗證......）【U-1】
├── main.js                          
├── App.vue
複製代碼

首先，這個結構是基於Vue來設計的，設計思路來源於小程序分包加載機制。示例的結構主要爲src 目錄下。vue

雖然給出的結構是基於Vue，可是其餘像小程序，React等也是可使用的，核心思想都是將具體的一個一個的業務做爲一個獨立模塊的，而後將一個一個的模塊組成一整個項目。nginx

接下來對標註的序號作下說明web

S-1：小程序
- s-1部分的接口管理，主要用來存放項目的基礎接口，例如數據埋點等，不影響具體業務功能使用的接口後端
- 若是這類的接口數量很是大，能夠根據不一樣的類型劃分或者根據所屬的服務劃分(咱們的項目後端是微服務架構，前端接口根據服務劃分的)爲多個文件，而後將其導出；再在index.js中將不一樣類型的接口文件導入後作總體導出。瀏覽器
- 若是這類接口數量並不大，則能夠直接在index.js中進行管理導出。bash
- 若是說再可預見的範圍內這類接口不會變多，甚至能夠徹底不要service 文件夾，將index.js 命名爲service.js 放在根目錄（src）下架構
C-1：框架
- 基礎性的業務組件能夠爲整個項目共有的惟一的登陸註冊所用的組件，也能夠爲整個項目共有的header或者導航等組件
- 若是你選擇將這些基礎性的組件，好比登陸註冊業務的組件放在業務的模塊中；在components 中僅存放公共/基礎組件，那能夠直接將public 中的文件放在components 下,去掉pubilc 文件夾
P-1：
- modules 爲每個具體的業務，擁有獨立的路由，獨立的狀態庫，獨立的工具庫... modules 的目的就是將一個業務做爲一個總體封閉起來，只留一個對外的出口index.js ，如此，當公司有一個同類型的項目出現一樣的業務，能夠很是方便的進行遷移。
- static 存放靜態資源，utils 存放工具集，若是你的業務靜態資源只有很少的一些圖片，工具集只有一兩個文件，徹底能夠將兩個文件夾保留一個便可。
- store 是業務的狀態庫，基於 Vuex 的 module 設計，內部能夠根據須要再自行劃分,但終都須要進行導出。
- index.js 是業務惟一的對外出口，凡是須要供外部使用的（業務頁面的路由，業務的狀態庫）文件，到須要導入至index.js 後再來作總體導出。
C-2：
- config 是一個可選的配置，主要用來存放項目相關的配置。
- 若是說你的項目是要提供給不一樣的客戶來使用，每一個客戶都有本身特殊的需求，好比系統的logo須要使用客戶特定的logo，系統的title須要使用客戶提供的內容，甚至客戶說我須要ACE三個業務，不要BDF三個功能，咱們均可以給不一樣的客戶寫入不一樣的配置，在根據不一樣的配置來打包生成不一樣功能的系統具體內容能夠看個人另外一篇文章：vue不一樣環境打包命令配置中的場景二
R-1：
- 路由這裏沒什麼須要特殊說明的，就是將各業務暴露的路由導入便可。
- 若是其餘與路由相關的文件，甚至能夠直接將路由文件移至src 下，刪除router 文件夾
S-2：
- store 中放的是基礎的、不影響業務使用的、無耦合數據，以及store 對外提供的出口文件
- index.js 及將各業務對外暴露的store導入進來，處理以後再作總體導出。
U-1：
- utils 下也就是基礎性的工具集，例如封裝的請求等

結構的功能說明也就這些。

爲何要這麼設計呢，最大的緣由仍是解耦和提升複用性，於我所在公司而言，咱們有多個類似的管理系統，可能有部分業務在這個系統上有，其餘系統上產品說也要上這個功能，那根據這個結構，我就能夠直接將對應的功能模塊複製到另外一個系統中去，而後將業務暴露的出口接入到另外一個系統中，直接就能夠完成功能的遷移。