复杂业务系统-前端公共业务组件设计思考

在企业开发时候,大家应该都有做过各种各样的系统,比如后台管理,官网,大屏可视化,H5,移动端内嵌H5等项目

当项目数量上来后.封装项目间的公共逻辑就变得很重要

通常需要封装的内容

1. 公共部分
   • 登录组件
   • 权限组件
   • 公共数据存储/获取,比如用户信息
   • 环境变量,配置文件获取
   • WS请求
   • ...
2. 后台管理项目
   • 界面布局,左菜单,上头部
   • 需要的公共逻辑,样式等
3. H5,移动端内嵌H5
   • 和native交互的方法
   • 布局容器,公共组件等样式

最早时候,我们开发了一个公共组件,内置了这些功能,随着项目类型增多,这个组件遇到了一些局限性

遇到的问题

1. 这个组件就是一个壳,里面内置了一套Layout(最早时候只做后台管理,不知道后面还有各样的项目),这套Layout 的遇到大屏/移动端的时候,就会出现不太兼容,冗余div的情况

2. 由于将公共代码都写在了一起,出现需要定制的时候,就很难抽取,比如:

A项目只需要登录组件和获取环境变量的大屏项目,其它组件/功能包括Layout都不需要 B项目是一个移动端内嵌H5,只需要WS功能,登录信息由APP注入

基于这样的背景,将组件重构

起手范式

Admin 是一个标准场景下的基础组件(后台管理) 可以看到,截图里面传了几个基础参数

1. basename 传递给<Router basename={basename}></Router>
2. layoutprops 定制Layout需要的参数
3. authingParams 定制登录组件需要的参数

---

Admin的子组件Resource

增删改查标准组件,按照截图中配置,将会生成 /user/add 新增页面等路由

优点: 规范标准路由路径,避免出现每个人写的路由都不一样 ,如 /user/create

---

Admin的子组件 CustomRoutes

除了标准路由,难免遇到自定义路由,由 CustomRoutes 支持, 并且支持 noLayout 属性,有的路由是不需要Layout的,比如登录页

如何解决上面遇到的问题

解决1. layout 属性

<Admin
 layout={({ children }) => {
       return (
         <div>
           <div><h1>头部啊</h1></div>
           {children}
         </div>
   )
 }}
    />

传入layout属性,就可以覆盖默认的layout,实现不同场景下的不同layout

import { H5Layout, AdminLayout, AppLayout } from '@core/rc-adminkit'

    layout={ H5Layout }
    layout={ AdminLayout}
    layout={ AppLayout}

实现源码

解决2. 代码逻辑拆分

固然,可以通过类似于authingParams的入参去控制Admin组件的内部行为,但是为了组件的搜身,做了精细化逻辑拆分

实现源码

CoreAdminContext.tsx

刚才说的 ,B项目是一个移动端内嵌H5,只需要WS功能, 可以这样实现

通常,如果是标准产品架构,由@core/rc-adminkit包内提供,如果是临时用,甚至可以项目内自行组装

总结,需要通过合理的拆分业务代码,布局组件等,支持定制和内部预设等方式,实现合理的企业级前端业务组件