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

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

在代码组织架构方面,可以按业务或者按功能来组织项目的结构。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
相关推荐
遂心_1 天前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端小书生1 天前
React 组件渲染
前端·react.js
用户7678797737321 天前
后端转全栈之Next.js SEO优化
react.js·next.js
遂心_2 天前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_2 天前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js
YiHanXii2 天前
React.memo 小练习题 + 参考答案
前端·javascript·react.js
知识分享小能手2 天前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
虫虫rankourin2 天前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
开心不就得了2 天前
React 状态管理
react.js·typescript
天天进步20152 天前
掌握React状态管理:Redux Toolkit vs Zustand vs Context API
linux·运维·react.js