阅读 1270

011.抹平UI库差异性来加速你的开发

意义

在日常业务开发中,我发现很多人会习惯于,直接拿UI库+业务代码的形式,去做日常开发,并且持之以恒。这不是错误,只是在求快的前提下,做的妥协而已。当然对于项目初期,我举双手赞同这种模式。但是当业务随着时间的推移,产品模式的固定,交互模式的固定,那么这种形式势必需要抛弃。"模式库"就要需要上线了。

模式库的含义是,根据现有业务,根据既定交互,结合UI库+业务的组合形式,并且以纯数据组织,实现业务开发。这样做的优势在于,提高开发效率,将UI展现实行一致化,提高可维护性。下面,我以ant-design为UI库,结合一些常见业务进行解释。

搜索功能

具体业务分析

例子:codesandbox.io/embed/magic…

这是一个常见的搜索功能,我们会涉及到,Input, Checkbox, DatePicker, TimePicker, Row, Col, Button, Typography组件。首先这种业务需求是可以固化的,不管是在前台、后台都是如此,并没有太多套路可言。

共性:一组表单,点击提交将表单的name和value返回出来,点击重置将默认值赋值给表单。

差异性:DatePicker, TimePicker的中是依靠dateString、timeString来返回值,而且没有name值。Checkbox是依靠event.target.checked来返回值,而且还要给其内容传递值。

为何不直接使用form组件?因为不符合UI同学的需求,不符合产品同学的需求。这种自由的组合形式,在扩展上,是最合理的。

收集好共性,以及差异性之后,可以思考如何用数据的形式组合。好吧这里想都不用想json-schema是最优解。

例如:

{
  reset:[{// 复制重置数据
    name: 'string',// 对应的name
    value: 'string|number',// 初始值
  }],
  map:[
    {
      type: 'input',// 类型
      label: '',// title
      name: '',// return的name值
      value: '',// return的value值,以及初始值
    },
    {
      type: 'time',// 类型
      label: '',// title
      name: '',// return的name值
      value: '',// return的value值,以及初始值
    },
    {
      type: 'checkbox',// 类型
      label: '',// title
      name: '',// return的name值
      value: '',// return的value值,以及初始值
    },
    {
      type: 'date',// 类型
      label: '',// title
      name: '',// return的name值
      value: '',// return的value值,以及初始值
    },
  ]
}
复制代码

抹平onChange差异,这里我会包装DatePicker、TimePicker、Checkbox、Input的onChange方法,统一返回{name: '',value: ''},这样业务层的处理就能高度统一。

设计组件

最后成果

end

form组件

接口设计:

  • col,控制行数
  • $emitReset(e),点击重置回调,返回重置之后的数据
  • $emitSubmit(e),点击提交回调,返回提交的数据
  • reset,重置的数据结构
  • map,表单的数据结构

code1

Checkbox组件

接口设计:

  • name,返回名
  • value,默认值
  • label,显示名
  • onChange(e),变化回调

checkbox1

Input组件

接口设计:

  • name,返回名
  • value,默认值
  • label,显示名
  • onChange(e),变化回调

input

DatePicker组件

接口设计:

  • name,返回名
  • value,默认值
  • label,显示名
  • onChange(e),变化回调

date

TimePicker组件

接口设计:

  • name,返回名
  • value,默认值
  • label,显示名
  • onChange(e),变化回调

time

合理规划

合理规划的关注的点在于,如何抹平差异、如何合理组合、如何固化需求。其中所要信奉的代码原则,无非是高解偶、容扩展、少改动。

总结

我一直很喜欢react的核心理念UI=render(data),这是现今最适合GUI范畴的理念没有之一。

关注下面的标签,发现更多相似文章
评论