前端项目目录层级优化

[yanyue404]

前言

好的项目目录结构与具体的文件级分层，有利于项目全生命周期的开发与维护工作。

目录结构

小程序项目

中小型项目

• 结构按功能模块划分
• 主业务模按类 BEM 的命名法则拼接，调试或编辑 Ctrl + p 进行快速定位（约4个分类，我在这里设计的 pages 内的文件夹与其内主页面名保持一致）。

├───api
├───assets
├───component
├───filter
├───libs
├───mock
├───pages
│   ├───activity_detail // - 活动详情
│   │        ├─── activity_detail.wxml  页面的 wxml 文件
│   ├───authorizationLogin // - 授权登录
│   ├───index // 首页
│   ├───index_inviteFriend // 邀请好友
│   ├───index_leaveAMessage //- 留言
│   ├───index_lifeService // - 生活服务
│   ├───index_openPlus // - 开通plus会员
│   ├───index_plus // - plus会员
│   ├───index_search // - 搜索
│   ├───logs
│   ├───my // 我的
│   ├───my_addShoppingAddress // - 添加收货地址
│   ├───my_coupon // - 我的积分
│   ├───my_editShoppingAddress // - 编辑收货地址
│   ├───my_evaluation // - 评价
│   ├───my_integral // - 我的积分
│   ├───my_invite // - 我的邀请
│   ├───my_memberInfo // - 会员信息
│   ├───my_order // - 我的订单
│   ├───my_orderDetail // 订单详情
│   ├───my_shoppingAddress // - 收货地址
│   ├───selectAddress // - 选择地址
│   ├───shoppingCart // 购物车
│   ├───shoppingCart_confirm // - 确认订单
│   ├───shoppingCart_coupon // - 优惠券
│   ├───shoppingCart_paySuccess // - 支付成功
│   ├───shoppingCart_productList // - 商品列表
│   ├───sort // 分类
│   └───sort_detail // - 商品详情
├───style
└───utils

大型项目

• 结构按功能模块划分
• 主业务模按类 模块类型建文件夹区别划分 （8个分类）

├───components // 业务组件
├───layouts // 布局组件
├───pages
│   ├───address
│   │   ├───address_edit
│   │   ├───address_search // TODO:地址搜索
│   │   └───address_select
│   ├───authorization // 授权登录
│   │   └───selectShop
│   ├───classification // 分类
│   │   ├───classification_detail // 商品详情
│   │   └───groupRule
│   ├───home
│   │   ├───bannerDetail
│   │   ├───groupBuy // 超值拼团 更多
│   │   ├───limitedBuy // 限量抢购 更多
│   │   ├───logistics // 进果-水果物流配送
│   │   └───searchResult
│   ├───index
│   ├───shopping
│   │   ├───confirmationGroup // 确认拼团
│   │   ├───confirmcartOrder // 确认订单
│   │   ├───payOrderSuccess
│   │   └───productList
│   ├───sir
│   │   ├───sir_apply // 申请楼长
│   │   ├───sir_underReview // 待审核
│   │   ├───sir_apply_review // 审核未通过(二次审核)
│   │   ├───sir_customer // 客户管理
│   │   ├───sir_customerDetail
│   │   ├───sir_customerGroupOrderLists // 客户订单管理
│   │   ├───sir_customerGroupOrderLists_detail
│   │   ├───sir_customerOrderLists // 团购订单管理
│   │   ├───sir_customerOrderLists_detail
│   │   ├───sir_fund // 资金明细
│   │   ├───sir_fund_already
│   │   ├───sir_fund_detail
│   │   ├───sir_fund_expected
│   │   ├───sir_manage
│   │   ├───sir_promoCode // 推广二维码
│   │   ├───sir_promotionData
│   │   └───sir_withdraw // 提现
│   └───userCenter
│       ├───myCoupon // 我的优惠券
│       ├───myCoupon_select
│       ├───myRegiment  // 我的拼团
│       ├───myRegiment_detail // - 详情
│       ├───orderLists // 普通订单列表
│       ├───orderLists_detail // - 详情
│       ├───userInfo
│       └───userInfo_changeMobile

单页面应用

• 结构按功能模块划分
• 主业务模复杂，需要侧重页面内的组件以及全局可用的公共组件划分，考虑公用及个性化的均衡。

src 源代码目录下

|-- views/ 所有页面目录
    |-- page1/ page1 页面的工作空间
        |-- index.js 入口文件
        |-- data/ 本地 json 数据模拟
        |-- images/ 图片文件目录
        |-- components/ 组件目录（如果基于 react, vue 等组件化框架）
        |-- ...

    |-- module1/ 子目录
        |-- page2/ page2 页面的工作空间（内部结构跟 page1 类似）

    |-- ...

|-- assets/ 公共图片目录
|-- styles/ 公共样式目录
|-- api/ 全局 api 目录
|-- mock/ 公共 使用 json-server 模拟 api 文件目录
|-- libs/ SDK 集成相关目录
|-- components/ 公共业务组件目录
|-- layouts/ 公共布局组件目录
|-- router/ 路由状态管理目录
|-- store/ 全局数据流管理目录
|-- utils/ 公共工具方法目录
|-- ...

文件级分层

API

api 请求如果用单文件进行维护，当接口众多，以及多人开发就会显得比较乱，同时，如果使用过多的层级进行拆分，比如下面的这种，就会显得十分笨重，我建议可以使用单文件入口 + 模块单文件 的形式分层。

过多的层级

api
│
├── contentManage
│   ├── activity.js
│   ├── banner.js
│   ├── class.js
│   ├── homeMenu.js
│   ├── news.js
│   └── notice.js
├── system
│   ├── cfg.js
│   ├── dept.js
│   ├── dict.js
│   ├── log.js
│   ├── loginLog.js
│   ├── menu.js
│   ├── notice.js
│   ├── role.js
│   ├── task.js
│   └── user.js

不分层，单文件

import { get, post, put, Delete, uploadFile } from '@/utils/http'
const api = new Object();

//获客查询公司产品
api.getCompanyProduct = (p) => get('/cms-api/api/cms/product/company', p);

//上传文件服务器 base64
api.upLoadBase64File = (p) => post('/api-file/base64/upload', p);

// ...  还有更多，涉及模块 有 5个

export default api;

分层 + 单模块 重构

// 还可导入 http 请求类型  put, Delete
import { get, post, uploadFile } from '@/utils/http';
import * as HOME from './home';
import * as WX from './wx';
import * as STUDY from './study';
import * as MINE from './mine';
import * as PRODUCY from './product';
import * as AUTH from './auth';
const api = new Object();

const API_CONTAINER = {
  ...HOME,
  ...WX,
  ...STUDY,
  ...MINE,
  ...PRODUCY,
  ...AUTH,
};

Object.keys(API_CONTAINER).forEach((key) => {
  api[key] = API_CONTAINER[key];
});

//上传文件
api.uploadFile = (p) => uploadFile(p);

//上传文件服务器 base64
api.upLoadBase64File = (p) => post('/api-file/base64/upload', p);

//数据字典
api.getList = (p) => get('/api-sys/api/dict/getList', p);

export default api;

单文件模块 wx.js

import { get, post } from '@/utils/http';

export const getShortURL = (p) => get('/api-wx/api/wx/long2short', p);

//通过code查询token
export const getWxCode = (p) => get('/api-uaa/oauth/openId/token', p);

//获取wx校验信息
export const getWxInfo = (p) => get('/api-uaa/oauth/wx/jsapiSignature', p);

目录命名

• config 配置文件
  • const.js
• modules 模块文件

参考资料

• 目录结构优化