資訊專欄INFORMATION COLUMN
摘要：背景最近看了發(fā)現(xiàn)其項目的目錄結(jié)構(gòu)組織的不錯。然后再按照自己的項目經(jīng)驗，對其項目的組織進行修改，現(xiàn)在總結(jié)下自己的想法。總結(jié)以上就是我根據(jù)修改的，我認(rèn)為比較通用的項目目錄結(jié)構(gòu)這里沒有提到測試相關(guān)。
背景
最近看了 antd pro 發(fā)現(xiàn)其項目的目錄結(jié)構(gòu)組織的不錯。然后再按照自己的項目經(jīng)驗，對其項目的組織進行修改，現(xiàn)在總結(jié)下自己的想法。
正題我們看下 antd pro 自己生成的目錄結(jié)構(gòu)
├── mock # 本地模擬數(shù)據(jù) ├── public │ └── favicon.ico # Favicon ├── src │ ├── assets # 本地靜態(tài)資源 │ ├── common # 應(yīng)用公用配置，如導(dǎo)航信息 │ ├── components # 業(yè)務(wù)通用組件 │ ├── e2e # 集成測試用例 │ ├── layouts # 通用布局 │ ├── models # dva model │ ├── routes # 業(yè)務(wù)頁面入口和常用模板 │ ├── services # 后臺接口服務(wù) │ ├── utils # 工具庫 │ ├── g2.js # 可視化圖形配置 │ ├── theme.js # 主題配置 │ ├── index.ejs # HTML 入口模板 │ ├── index.js # 應(yīng)用入口 │ ├── index.less # 全局樣式 │ └── router.js # 路由入口 ├── tests # 測試工具 ├── README.md └── package.json區(qū)分通用組件和業(yè)務(wù)組件
由于 antd pro 本身引用了 antd 的組件庫，所以不存在自己寫通用組件的步驟。但是有的時候我們自己項目會有自己寫通用組件的需要。組件除了有通用組件，還會有業(yè)務(wù)組件。通用組件是粒度比較細(xì)且和業(yè)務(wù)無關(guān)的組件，譬如 Dropdown。而業(yè)務(wù)組件可能是你這個項目特有的，譬如工具欄，或者某種特殊的彈框。業(yè)務(wù)組件大多數(shù)情況是由（但不僅僅由）通用組件組成。業(yè)務(wù)組件是粒度比較粗的組件。所以這個時候我一般會把通用組件放在 components 目錄下，而新建一個 widgets 目錄放業(yè)務(wù)組件，這樣分的比較清楚。不過通用組件和業(yè)務(wù)組件的劃分邊界并不是每次都能分的很清楚，有時是會相互轉(zhuǎn)換的，如果實在覺得很難區(qū)分，那可以都放在 components 下。
領(lǐng)域?qū)ο?/b>src／models 目錄放的是 dva model，如果你用 redux，那么這里大致可能對應(yīng)的是 state 的概念，如果用 mobx 這里隱約對應(yīng)的是 store 的概念。在我看來這些都不是 model，只能叫做狀態(tài)（state）相關(guān)。我個人理解的 model 應(yīng)該指的是領(lǐng)域?qū)ο笠簿褪穷I(lǐng)域驅(qū)動設(shè)計（Domain-Driven Design）中的 domain object，類似于 java bean 的概念。所以我會把放在 models 下面的東西用一個新的目錄存放，通常叫 stores，而 models 下面會放領(lǐng)域?qū)ο螅╠omain object）。拿 todo list 為例，我會抽象出一個 TodoItem 的領(lǐng)域?qū)ο?，其定義：
class TodoItem {
id = -1;
text = "";
done = false;
constructor( rawData ) {
if ( rawData ) {
Object.assign( this, rawData );
}
}
}
export default TodoItem;
枚舉
這個簡單，通常項目都不會少了枚舉值，這個時候我會多帶帶新建一個 enums 的目錄放項目所用到的所有枚舉對象。當(dāng)然，如果很少的話并入 common 目錄也未嘗不可。 這個時候 src 目錄基本上會變成這樣：
├── mock # 本地模擬數(shù)據(jù) ├── public │ └── favicon.ico # Favicon ├── src │ ├── assets # 本地靜態(tài)資源 │ ├── common # 應(yīng)用公用配置，如導(dǎo)航信息 │ ├── enums # 枚舉 │ ├── components # 通用組件 │ ├── widgets # 業(yè)務(wù)組件 │ ├── e2e # 集成測試用例 │ ├── layouts # 通用布局 │ ├── stores # 狀態(tài)相關(guān)對象（dva model） │ ├── models # domain object │ ├── routes # 業(yè)務(wù)頁面入口和常用模板 │ ├── services # 后臺接口服務(wù) │ ├── utils # 工具庫 │ ├── g2.js # 可視化圖形配置 │ ├── theme.js # 主題配置 │ ├── index.ejs # HTML 入口模板 │ ├── index.js # 應(yīng)用入口 │ ├── index.less # 全局樣式 │ └── router.js # 路由入口 ├── tests # 測試工具 ├── README.md └── package.json精簡
看上目錄很多，這里我精簡下，如果你的項目沒有復(fù)雜的布局，沒有可視化圖形配置，沒有復(fù)雜的路由且用了 react-router4，最后沒有可配置主題那么基本的目錄結(jié)構(gòu)可以精簡為：
├── mock # 本地模擬數(shù)據(jù) ├── public │ └── favicon.ico # Favicon ├── src │ ├── assets # 本地靜態(tài)資源 │ ├── common # 應(yīng)用公用配置，如導(dǎo)航信息 │ ├── enums # 枚舉 │ ├── components # 通用組件 │ ├── widgets # 業(yè)務(wù)組件 │ ├── stores # 狀態(tài)相關(guān)對象（dva model） │ ├── models # domain object │ ├── routes # 業(yè)務(wù)頁面入口和常用模板 │ ├── services # 后臺接口服務(wù) │ ├── utils # 工具庫 │ └── index.js # 應(yīng)用入口 ├── tests # 測試工具 ├── README.md └── package.json優(yōu)化
如果項目前期設(shè)計做的好，抽象建模工作做的到位，其實你會發(fā)現(xiàn)，項目目錄大致還可以分為兩類：UI 相關(guān)和 UI 無關(guān)的。這個時候我會把 UI 相關(guān)的放到一個 app 的目錄下，整個項目就會分成 MV（model，view） 的層次：
├── mock # 本地模擬數(shù)據(jù) ├── public │ └── favicon.ico # Favicon ├── src │ ├── app │ │ ├── assets # 本地靜態(tài)資源 │ │ ├── components # 通用組件 │ │ ├── widgets # 業(yè)務(wù)組件 │ │ ├── stores # 狀態(tài)相關(guān)對象（dva model） │ │ ├── routes # 業(yè)務(wù)頁面入口和常用模板 │ │ └── index.js │ ├── common # 應(yīng)用公用配置，如導(dǎo)航信息 │ ├── enums # 枚舉 │ ├── models # domain object │ ├── services # 后臺接口服務(wù) │ ├── utils # 工具庫 │ └── index.js # 應(yīng)用入口 ├── tests # 測試工具 ├── README.md └── package.json
這么做的用意是當(dāng)你的項目 UI 框架重構(gòu)的時候可以只動 app 目錄。從 redux 變到 mobx，也可以從 react 變成 angular。當(dāng)然這層抽象不是必須的，只是我個人偏好，如果要重構(gòu)通常也會整個項目重構(gòu)。
總結(jié)以上就是我根據(jù) antd pro 修改的，我認(rèn)為比較通用的項目目錄結(jié)構(gòu)（這里沒有提到測試相關(guān)）。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96442.html
摘要：組件劃分這種的話組件劃分的比較清晰。將組件強勢得分為類，這種結(jié)構(gòu)上雖然非常清晰，但是在項目開發(fā)的過程中你不得不頻繁地將組件在跟之間移來移去，降低了開發(fā)體驗。 緣由 在開發(fā)項目的過程中，大家多多少少會對自己項目的目錄結(jié)構(gòu)產(chǎn)生疑惑，如何合理地劃分模塊以及如何合理的命名，這些如果在項目前期的時候沒有好好規(guī)范好的話，那么后面新進來的人便會按照自己的邏輯又重新在劃分自己的目錄，這樣日復(fù)一日項目體...
摘要：原作者唐斌騰訊什么原名是一個簡單易用的前端模板預(yù)編譯工具。本文作者為來自騰訊團隊的唐斌，他在本文中為我們分析了傳統(tǒng)前端模板內(nèi)嵌的弊端，如開發(fā)調(diào)試效率低下自動化構(gòu)建復(fù)雜度比較高等特點，并針對目前現(xiàn)狀給出了較好的解決方案。 原作者: 唐斌（騰訊）| TmodJS什么 TmodJS（原名atc）是一個簡單易用的前端模板預(yù)編譯工具。它通過預(yù)編譯技術(shù)讓前端模板突破瀏覽器限制，實現(xiàn)后端模板一樣的同...
摘要：項目前端工程化的探索不通過層實現(xiàn)非網(wǎng)頁開發(fā)的前后端分離。做過這樣項目的各位攻城獅應(yīng)該都知道有多痛苦吧。仔細(xì)想來，其實只是想要模板和靜態(tài)資源，我們可以直接在目錄下寫，當(dāng)然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源到工程的相應(yīng)目錄下。 Django項目前端工程化的探索 不通過node層實現(xiàn)非SPA網(wǎng)頁開發(fā)的前后端分離。 技術(shù)棧：webpack + jade + es6 + scss +...
摘要：項目前端工程化的探索不通過層實現(xiàn)非網(wǎng)頁開發(fā)的前后端分離。做過這樣項目的各位攻城獅應(yīng)該都知道有多痛苦吧。仔細(xì)想來，其實只是想要模板和靜態(tài)資源，我們可以直接在目錄下寫，當(dāng)然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源到工程的相應(yīng)目錄下。 Django項目前端工程化的探索 不通過node層實現(xiàn)非SPA網(wǎng)頁開發(fā)的前后端分離。 技術(shù)棧：webpack + jade + es6 + scss +...
摘要：項目前端工程化的探索不通過層實現(xiàn)非網(wǎng)頁開發(fā)的前后端分離。做過這樣項目的各位攻城獅應(yīng)該都知道有多痛苦吧。仔細(xì)想來，其實只是想要模板和靜態(tài)資源，我們可以直接在目錄下寫，當(dāng)然也可以開一個前端工程來寫，最后把模板和靜態(tài)資源到工程的相應(yīng)目錄下。 Django項目前端工程化的探索 不通過node層實現(xiàn)非SPA網(wǎng)頁開發(fā)的前后端分離。 技術(shù)棧：webpack + jade + es6 + scss +...
閱讀 3059·2021-11-12 10:36
閱讀 4841·2021-09-22 10:57
閱讀 1617·2021-09-22 10:53
閱讀 2725·2019-08-30 15:55
閱讀 3521·2019-08-29 17:00
閱讀 3377·2019-08-29 16:36
閱讀 2493·2019-08-29 13:46
閱讀 1373·2019-08-26 11:45
