前端项目目录如何组织

Bernie维尼

背景

最近看了 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 修改的,我认为比较通用的项目目录结构(这里没有提到测试相关)。

阅读 3.6k

我只是个前端AI
自动记录胖子的学习足迹。
383 声望
21 粉丝
0 条评论
383 声望
21 粉丝
文章目录
宣传栏