写点什么

「工作小记」多个页面的相似操作公共化设计方案

作者:叶一一
  • 2022 年 9 月 09 日
    北京
  • 本文字数:2222 字

    阅读完需:约 7 分钟

「工作小记」多个页面的相似操作公共化设计方案

前言

刚接到这个需求的时候我有点不想写,因为要把所有的页面全都改一遍,且要保证不出现问题,功能不难,但是工作量有点大。我小小的纠结了一下就着手去做了,因为我发现,一旦改好,会有助于后面的业务开发。


我们的这个业务是工作流性质的,整个流程一共十个左右的节点,每个节点会有一个单独的页面,然后不同节点页面的操作有相同和不同的操作。新需要是要做一个待办页面,这个页面包含所有的节点,并且需要聚合所有的操作。


这个设计思路挺简单的,按照页面的维度,将所有页面的操作提炼成按钮组业务组件,然后需要聚合的页面进行引入。


项目基于 React 框架开发的,所以代码写法是 JSX 语法,组件开发使用的 hooks 函数式组件,UI 框架使用的是 antd。

实现

提炼组件

以页面维度,提炼页面按钮组件 ButtonGroup.jsx。下面是我的项目文件结构:


受理页面的操作按钮组件

文件相对路径:/accept/components/ButtonGroup.jsx

主要操作包括受理和编辑,这两个操作的交互都是打开表单弹窗。

return (  <>    <button onClick={() => this.updataOperate('visible')}>编辑</button>    <button onClick={() => this.updataOperate('acceptVisible')}>受理</button>  </>);
复制代码


基本上所有的页面都是上面类似的修改,区别在于有的页面操作按钮多一些,有的页面按钮少一些。无论那种交互方式,能够提炼公共方法的尽量提炼公共方法。

特殊处理

比如编辑按钮,待办页面所有节点都展示编辑按钮,但是节点页面中只有受理页面有,这个时候待办页面的待受理节点不应该重复展示编辑按钮,所以我设置了一个 btnFlag 变量。主要有两个值,accept-受理页面, other-其他引入受理按钮组的都传这个值。


受理页面的操作按钮组件

文件相对路径:/accept/components/ButtonGroup.jsx

根据 btnFlag 的值判断编辑按钮是否展示,当值为 accept 时展示,其他值不展示。


return (  <>    {btnFlag === 'accept' ? <button onClick={() => this.updataOperate('visible')}>编辑</button> : null}    <button onClick={() => this.updataOperate('acceptVisible')}>受理</button>  </>);
复制代码

引入使用

待办页面

文件相对路径:pending.jsx

待办页面将所有的按钮组引入之后,按照节点值进行区分。

import AcceptButtonGroup from '../accept/components/ButtonGroup'; // 带受理import defineButtonGroup from '../define/components/ButtonGroup'; // 待确定
/** * 列表操作 */columns = columns.concat([ { title: '操作', key: 'action', width: 160, fixed: 'right', render: (text, record) => ( <> {record.node === 'accept' && <AcceptButtonGroup record={record} />} {record.node === 'define' && <DefineButtonGroup record={record} />} </> ), },]);
复制代码

后续开发

既然有了这个聚合的开始,后面再有新需求的时候,我们的产品经理就会按照他想要的去规划操作按钮的摆放位置,比如某个处理操作,他会将需要放到哪些页面列出来,这个时候,把处理按钮提炼出来,开发就非常愉快了,所有需要的页面直接引入完事。

再一次化繁为简

果然不出我所料,我们和(ai)蔼(gao)可(shi)亲(qing)的产品经理近期又提了一个小功能,根据不同客户端操作的数据,在管理后台中区别展示操作按钮,客户端 A 操作进入管理后台的数据展示操作 A1、A2...等,客户端 B 操作进入管理后台的数据展示操作 B1、B2...等,管理后台原来的操作数据不变。


既然已经有了多个操作按钮聚合的设计思路,这次我设计思路也很快就有了,那就是按照端的维度封装按钮组的组件。

客户端 A 按钮组的组件

/components/ButtonGroupA.jsx


return (  <>    <button onClick={() => {}}>查看备注</button>  </>);
复制代码

客户端 B 按钮组的组件

/components/ButtonGroupB.jsx


return (  <>    <button onClick={() => {}}>查看取消原因</button>  </>);
复制代码

列表页区分端公共方法

/**   * 获取操作的系统的类型   * @param {Object} record 列表操作数据项   * @param {string} type 校验端类型 前端定义字符串是为了更加语义化一些   * @return {void}   */  getCreatDataCMSType(record, type) {    const CMSTypeMap = {      init:1,      A: 2,      B: 3,    };    const CMSTypeType = CMSTypeMap[type];    const CMSType = record.CMSType ? record.CMSType : 'init';    let flag = false;    if (CMSType === CMSTypeType) {      flag = true;    }    return flag;  },
复制代码

列表页展示

import ButtonGroupA from './components/ButtonGroupA';import ButtonGroupB from './components/ButtonGroupB';import { util } from '@/utils';......{util.getCreatDataCMSType(record, 'A') ? <ButtonGroupA record={record} /> : null}{util.getCreatDataCMSType(record, 'B') ? <ButtonGroupB record={record} /> : null}
复制代码

总结

就小技巧而言,这个功能并不是很难实现,其实更多的是它带给我的启示,后续的开发中受益匪浅。


打破原来的习惯,在最初会觉得有点痛苦,一旦开始,就会一直想怎么把东西做的更好,会对自己吹毛求疵,总觉得不够。


同时,我会根据业务的的发展,提前考虑一些功能,怎么设计开发能够在后续的需求里尽可能的复用,进而减少重复的开发。


我一直没想过操作按钮也可以提炼公共组件,因为太习惯直接上来就开发了。但是就当前业务发展,很多操作,可能会交叉的出现不同的页面中,提炼公共组件就很有必要了。

发布于: 刚刚阅读数: 4
用户头像

叶一一

关注

苍生涂涂,天下缭燎,诸子百家,唯我纵横。 2022.09.01 加入

非职业传道受业解惑前端程序媛,华夏美食、国漫、古风重度爱好者,刑侦、无限流小说初级玩家。

评论

发布
暂无评论
「工作小记」多个页面的相似操作公共化设计方案_前端_叶一一_InfoQ写作社区