关于前端项目组织与模块动态导出

关于前端项目组织与模块动态导出

在代码组织架构方面,可以按业务或者按功能来组织项目的结构。PS:以下是使用React项目进行演示。

按业务组织项目结构

根据页面来管理相关的代码,每一个page下都将会有servicestoretypes等等文件夹,相当于对一个页面进行业务集中管理。

优点:

  1. 易于维护和扩展: 业务相关的代码被组织在一起,开发人员可以更容易地理解和维护这些代码。
  2. 降低耦合性: 不同业务模块之间的依赖性较低,修改一个业务不会对其他业务产生影响。
  3. 团队协作: 业务团队可以独立开发和测试其业务功能,提高团队协作效率。

缺点:

  1. 跨业务功能复用困难: 如果有一些通用的功能需要多个业务模块共享,会比较困难。
  2. 难以处理交叉业务逻辑: 涉及多个业务领域的功能会导致代码分散,难以管理。

按功能组织项目结构

只需要在modules文件夹下不断创建对应的ts模块文件,编写对应的服务即可。

优点:

  1. 易于复用功能: 同一功能的代码被组织在一起,便于复用。
  2. 结构清晰: 每个功能模块都有自己的目录和文件,使项目结构更清晰。
  3. 便于单元测试: 功能模块独立性强,方便编写和运行单元测试。

缺点:

  1. 耦合性高: 不同功能模块之间的依赖性增加,修改一个功能可能会影响其他功能。
  2. 维护困难: 随着项目规模增大,功能模块之间的关联会变得复杂,维护成本也会提高。
  3. 团队协作: 不同功能模块可能需要多个团队合作,沟通成本较高。

综上所述,按业务组织项目结构适合中小型项目或团队,有利于快速开发和维护业务功能;而按功能组织项目结构适合大型项目或需要频繁功能复用的场景,有利于功能模块的独立开发和测试。在实际应用中,也可以结合两种方式,根据具体情况进行灵活调整和优化。

小结

个人认为,可以使用按业务组织项目结构配合动态模块导入,能更好的进行开发。例如:动态导入views下的store文件夹下的ts文件

  1. webpack中。
ts 复制代码
const sliceModules: any = []

const filesContext = require.context('../../views', true, /\/store\/.*\.ts$/)

filesContext.keys().forEach((key: string) => {
  const pathArr = key.split('/')
  const moduleName = pathArr[pathArr.length - 1].replace(/\.ts$/, '')
  sliceModules[moduleName] = filesContext(key).default
})

export default sliceModules
  1. vite中。
ts 复制代码
const sliceModules: Record<string, any> = {}

function importAll(r: __WebpackModuleApi.RequireContext) {
  r.keys().forEach((key: string) => {
    const pathArr = key.split('/')
    const moduleName = pathArr[pathArr.length - 1].replace(/\.ts$/, '')
    sliceModules[moduleName] = r(key).default
  })
}

importAll(import.meta.glob('../../views/**/store/*.ts'))

export default sliceModules
  1. 注册模块
ts 复制代码
import { configureStore } from '@reduxjs/toolkit'
import { TypedUseSelectorHook, useSelector, useDispatch, shallowEqual } from 'react-redux'

import TestReducer from '@/store/modules/test'

import sliceModules from './modules'

const store = configureStore({
  reducer: {
    test: TestReducer,
    ...sliceModules  // 动态注册模块
  }
})

export const shallowEqualApp = shallowEqual

export type RootState = ReturnType<typeof store.getState>
export type RootDispatch = typeof store.dispatch

export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
export const useAppDispatch: () => RootDispatch = useDispatch

export default store
相关推荐
每天吃饭的羊4 小时前
state和ref
前端·javascript·react.js
前端啵啵猪5 小时前
useCallback 和 useMemo,什么时候用才是有效的?
前端·react.js
海海思思6 小时前
Redux Toolkit的前世今生:从繁琐到简洁的状态管理革命
react.js·redux
小爱同学_6 小时前
React知识:useState和useRef的使用
前端·react.js
知识分享小能手10 小时前
React学习教程,从入门到精通, React 新创建组件语法知识点及案例代码(11)
前端·javascript·学习·react.js·架构·前端框架·react
举个栗子dhy13 小时前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
薛定谔的算法14 小时前
《虚拟 DOM 与 Diff 算法:用 1500 字把它讲成“人话”》
前端·react.js·前端框架
鹏多多14 小时前
前端项目eslint配置选项详细解析
前端·vue.js·react.js
知识分享小能手15 小时前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue