摘要：背景最近看了发现其项目的目录结构组织的不错。然后再按照自己的项目经验，对其项目的组织进行修改，现在总结下自己的想法。总结以上就是我根据修改的，我认为比较通用的项目目录结构这里没有提到测试相关。
背景
最近看了 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 修改的，我认为比较通用的项目目录结构（这里没有提到测试相关）。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96442.html
摘要：组件划分这种的话组件划分的比较清晰。将组件强势得分为类，这种结构上虽然非常清晰，但是在项目开发的过程中你不得不频繁地将组件在跟之间移来移去，降低了开发体验。 缘由 在开发项目的过程中，大家多多少少会对自己项目的目录结构产生疑惑，如何合理地划分模块以及如何合理的命名，这些如果在项目前期的时候没有好好规范好的话，那么后面新进来的人便会按照自己的逻辑又重新在划分自己的目录，这样日复一日项目体...
摘要：原作者唐斌腾讯什么原名是一个简单易用的前端模板预编译工具。本文作者为来自腾讯团队的唐斌，他在本文中为我们分析了传统前端模板内嵌的弊端，如开发调试效率低下自动化构建复杂度比较高等特点，并针对目前现状给出了较好的解决方案。 原作者: 唐斌（腾讯）| TmodJS什么 TmodJS（原名atc）是一个简单易用的前端模板预编译工具。它通过预编译技术让前端模板突破浏览器限制，实现后端模板一样的同...
摘要：项目前端工程化的探索不通过层实现非网页开发的前后端分离。做过这样项目的各位攻城狮应该都知道有多痛苦吧。仔细想来，其实只是想要模板和静态资源，我们可以直接在目录下写，当然也可以开一个前端工程来写，最后把模板和静态资源到工程的相应目录下。 Django项目前端工程化的探索 不通过node层实现非SPA网页开发的前后端分离。 技术栈：webpack + jade + es6 + scss +...
摘要：项目前端工程化的探索不通过层实现非网页开发的前后端分离。做过这样项目的各位攻城狮应该都知道有多痛苦吧。仔细想来，其实只是想要模板和静态资源，我们可以直接在目录下写，当然也可以开一个前端工程来写，最后把模板和静态资源到工程的相应目录下。 Django项目前端工程化的探索 不通过node层实现非SPA网页开发的前后端分离。 技术栈：webpack + jade + es6 + scss +...
摘要：项目前端工程化的探索不通过层实现非网页开发的前后端分离。做过这样项目的各位攻城狮应该都知道有多痛苦吧。仔细想来，其实只是想要模板和静态资源，我们可以直接在目录下写，当然也可以开一个前端工程来写，最后把模板和静态资源到工程的相应目录下。 Django项目前端工程化的探索 不通过node层实现非SPA网页开发的前后端分离。 技术栈：webpack + jade + es6 + scss +...
阅读 2978·2021-11-12 10:36
阅读 4552·2021-09-22 10:57
阅读 1526·2021-09-22 10:53
阅读 2545·2019-08-30 15:55
阅读 3476·2019-08-29 17:00
阅读 3332·2019-08-29 16:36
阅读 2430·2019-08-29 13:46
阅读 1324·2019-08-26 11:45
