前言
管理后台应用有两个最主要的功能:
- 数据录入 ---- 表单 (Form)
- 数据展示 ---- 表格 (Table)
业务系统必不可少的功能模块,并且占据开发量的 80% 以上。
如何可以快速的,高质量完成对应的业务需求呢?
业务与 UI 彻底分离
术业有专攻,专注才能把事情做完美,减少出错的概率。所以我认为将业务与 UI 彻底分离,会是更好的选择。
例如我们实现以下表单:
一般的做法是,由开发引用 UI 库对应组件然后渲染:
import { Form, Input, Selector } from 'ui'
const Page = () => {
return (
<Form>
<Input {...props} onChange={handleChange} />
<Selector {...props} onChange={handleChange} />
// ...
</Form>
)
}
这样问题不大,但是如果我们写的页面开始多了,维护起来就很麻烦了,如果由 20 个页面,其中某个功能需要调整,需要改 20 遍,组件化并不能改变代码维护的问题。
所以 ukelli-ui
打造了 聚合表单 的组件,只需要描述业务行为,完全与 UI 分离:
import FormLayout, { FormLayoutProps } from 'ukelli-ui/core/form-generator/form-layout'
const formOptions: FormLayoutProps['formOptions'] = [
'日期',
{
refs: ['startDate', 'endDate'],
type: 'datetimeRange',
enableTime: true,
title: '日期1',
tips: '123',
defaultValue: []
},
{
refs: ['startDate2', 'endDate2'],
type: 'datetimeRange',
title: '日期2',
tips: '123',
defaultValue: []
},
'选择器',
...
];
ReactDOM.render(
<FormLayout formOptions={formOptions}
onChange={(values, changeRef, changeVal) => {
// handleChange
}} />,
document.querySelector('#root')
)
干净利落,没有 UI 信息,专注于业务描述,UI 就交给 FormLayout 聚合表单统一处理,最后组件会返回一个统一数据结构的 values,方便快捷。
这里可以体验聚合表单
- https://ui.ukelli.com/FormGen...
-
- Account: admin
- Password: 123
当然还可以用 HOC 做更进一步的封装,关于 HOC 部分会在其他篇幅讲解。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。