UI 提供的【progress-step】要怎么实现

前端瓶子君

共 11177字,需浏览 23分钟

 ·

2023-01-09 20:39

前言

这天突然收到了 UI 修改设计稿的消息通知:"xxx 已修改 xxx 项目并 @ 了你,请及时查看变更内容",一条、两条、三条 ......,修改消息铺天盖地而来,然后就什么都看不到了(~~因为我选择开启消息免打扰,但没多久产品就非常贴心的询问是否已经收到了对应的消息,自然免不了还要介绍一下本次修改的内容和原因(消息免打扰失效~~)。

于是,我(~~心甘情愿的)打开了设计稿正打算好好欣赏欣赏,不曾想一道光芒一闪而过(是谁拉开了窗帘~~),看到了这样的内容:

而这个显示方式之前使用的是 Steps 步骤条 的方式展示的,类似于:

意味着要从一个 Steps 步骤条 改变成一个 progress-step 流程节点 的形式,这很难实现吗?不难!很容易实现吗?倒也未必!

4EB0FC64.jpg

【扩展】假设现在有个面试官就用这个 progress-step 组件作为场景题,想想你该如何描述对这个组件的设计思路!!!

组件设计基本原则

撸起袖子一把梭?

千万先别急着撸起袖子开干,咱们先来聊聊组件设计的基本原则,往往一把梭哈的代码容易形成一个糅杂着各种逻辑的组件,因为这样的设计是脆弱的,很容易带来副作用和难以预知的结果,需求不变更还好,需求要是频繁变更,那么主要问题就会出现,可能因为一个原因去改变组件,就会破坏其他的职责(行为),于是你不得不在多处都进行修改。

怎么知道一个组件复不复杂,这就要看组件内部到底维护了多少和自身状态相关的数据,即非 props 传入的数据,对于现在的 Vue / React 而言都是可以通过 数据来驱动视图 的,用一个函数式表示即 UI = render(data) 或 **UI = f(data)**,这意味着一个组件至少需要做到 数据(data)视图(UI) 的解耦。

单一职责

单一职责原则(SRP - single responsibility principle) 中的 职责 是什么,你可以理解为是组件的 行为,这个行为可以是渲染一个列表、展示一张图片、发起一个请求等等,当组件的这个行为发生修改,意味着这个组件本身发生了变化,此时该组件就是 单一职责 的。

为什么不能多职责?

大部分人经常会选择忽视一个组件的多个职责带来的缺陷,这里举个常见查询页面的例子:

  • 一部分是和查询条件相关的表单部分
    • 负责和用户进行各种交互,比如表单联动、表单重置、表单折叠等等,同时它需要收集、提供用户已经填入的数据
  • 一部分是展示查询结果的表格部分
    • 将接口响应的数据展示在表格中,同时也要支持与用户的各种交互,比如切换页码、页大小、上一页、下一页、跳转页等
  • 一部分是负责将表单数据发送给服务器进行数据交互,即发起请求

假设此时按照 撸起袖子一把梭 的原则去编写这个组件(页面),一定会将表单交互、表格交互、发起请求、处理响应等逻辑混在一个组件(页面)当中:

  • 表单的交互逻辑需要维护(行为 1)
  • 表格的交互逻辑需要维护(行为 2)
  • 请求的发起和响应的处理也需要维护(行为 3)

假设现在接口响应的数据结构发生了变化,在当前的组件(页面)中,你可能需要重新修改处理判断不同响应状态码下页面的表现,同时还得修改表格的展示方式,又或者需要根据响应的数据内容自动填充表单,但由于数据结构的变化还得去调整表单相关的部分,此时仅仅一个数据结构改变的原因就可能影响了三个部分的内容,因为它们耦合了。

多职责的缺陷:

  • 组件内容相互耦合,当需求变更时存在相互破坏的可能
  • 组件内容各个部分的逻辑杂糅,不易于阅读和维护
  • 经过不断的迭代会使得单个组件代码量不断增大

让组件具有单一职责

关于这一点,你完全可以从你平时在项目中使用到的 UI 组件库中去看看,比如 Element UI 中表单相关的组件就分为:

  • Form 组件负责整体表单的展示形式和对整体数据的处理
  • FormItem 组件单个具体的表单组件的展示形式和单个表单的数据处理
  • Input、Select、Option 等等具体的表单组件

基于此还是将上述的例子改变成单一职责:

  • 表单部分需要单独封装成组件,主要提供表单展示形式、交互能力、数据处理能力
  • 表格部分需要单独封装成组件,主要负责提供对数据展示、交互的能力
  • 查询页面(组件)负责提供发起请求数据和处理数据响应的能力,并将表单组件和表格组件组合在一起

这样一来,即便后续响应的数据结构发生改变,也不需要再去修改表单和表格部分的内容,而是在当前的查询页面(组件)中处理好对应的数据格式即可,比如将接收到的数据处理成符合表格或表格组件需要的格式即可。

单一职责的优点:

  • 单个组件的内容独立分离,需求变更时只需要修改对应组件
  • 单个组件逻辑只存在于该组件中,保证组件代码的简洁性、易读性和维护性
  • 在不断迭代中,只需要修改对应组件的内容,不会导致页面中的其他组件代码量增大

通用性

组件的核心是需要体现在业务中的,在项目中的大多数组件都属于业务组件,不具备通用性,因为具有通用性的组件不应该只满足于某个业务,因此组件的设计要考虑从业务中抽离。

设计通用性组件应该考虑什么

  • 数据(data)视图(UI) 的解耦
    • 见过不少人封装组件就真的只是将原页面内容单纯的剪切出去,视图部分大多是硬编码,除此之外组件维护了七七八八的状态,巴不得这个组件在外部使用的时候什么都不用传递,这样的组件显然不具备通用性,因此一定要将数据和视图进行解耦
  • 保证组件的 单一职责(行为)
    • 复用一个组件时,是为了重复使用其职责(行为),而只有单一职责的组件才能够被更好的复用,多个单一职责的组件就能更好的实现 组合性,如果一个组件错误地拥有多个职责时,就会增加复用时的开销
  • 组件只提供 最基础的 DOM 和 交互逻辑
    • 不要让一个组件将视图相关的 DOM 完全掌控在内部,应该将容易变化的部分交给使用者自己去定义(如利用插槽),比如 Element UI 中的 Table 组件就提供了 render-header(Table-column Attributes)、header(Table-column Scoped Slot)、append(Table Slot) 用于自定义渲染
  • 组件封装应该 隐藏内部细节和实现意义,通过 props 控制具体行为和输出
    • 保证组件的纯度,减少组件的副作用,比如不要在组件中直接使用一些全局变量等,因为这不符合封装的特性,还容易带来不可预测的行为
  • 组件封装保证 可测试性
    • 组件的可测试性也决定着组件封装的通用性,如果在为一个组件编写测试用例时需要非常复杂,那么大致是组件设计存在问题

设计 progress-step 组件

接下来,就该看看到底该如何分析和设计这个 progress-step 组件了,上面我们提到了最基本的要做到 数据(data)视图(UI) 的解耦,那实际上也就意味着要从这两个大的方向去考虑。

视图(UI)

确定视图展示方式

拿到视图肯定要进行分析,UI 图展示的不一定全面,因此必须要确定所有可能的展示方式,在和产品沟通的过程中确认了这个视图的三种展示形态:

  • 串行展示,类似于:

    image.png
  • 并行展示,类似于:

  • 混合展示,类似于:

但你仔细查看 UI 稿的设计,其实完全可以将它归类为第二种展示方式,否则你还得为这个 UI 图单独实现另一种展示方式,并且在和产品的沟通中也得到了同意。

确定实现方式

首先,肯定得去看看社区中是否有类似的方案可以直接使用,或者经过小的改动可以被使用的,奈何业务就是业务,果然没找到合适的,但在查找方案的时候也了解到了几种实现方案:

  • 基于普通 DOM 元素实现
  • 基于 SVG 实现
  • 基于 Canvas 实现

最后两种方案,我看到的大多是需要支持各种可比较复杂的拖拽、复制、连接的方式,并且其具体实现也是比较复杂,如果其其不是很熟悉的话,无论在实现还是在后续的各种调整上会花费大量时间,而且如上的一个需求无非是一些展示和简单的交互,并不需要涉及如此复杂的各种自定义操作。

再举个例子,比如前面提到的 Steps 步骤条 也是基于普通 DOM 元素实现的,并且也确实没有太多需要用户自定义的操作。因此,可以将 progress-step 组件当做 Steps 步骤条 的升级版,另外考虑开发时间的限制,选择方案一是最合适的。

确定实现细节

上述展示方式虽然有三种,但实现时可以先实现最简单的 串行展示 方式, 而 并行展示 其实相当于三条串行展示的合并,分别是上边、中间、下边的串行方式,最后的 混合展示 其实只要你实现了前面两种方式,这种方式无非是相当于组件的递归渲染,只不过位置上需要做一些处理:

  • 串行展示
    • 单节点的 虚线 和 箭头 可以借助元素的伪元素 ::before、::after 并通过定位实现
  • 并行展示
    • 上下边的部分仍然可以看做是串行节点的展示
    • 中间的部分可以通过一个元素来实现边框效果,并且可以认为是前后节点与这个边框的串行版本
  • 混合展示
    • 实现了前面两种模式,混合展示方式其实就只是根据数据来进行组件递归渲染

数据(data)

作为前端肯定要具备看到 UI 就能大致设想出其对应 data 的基本结构,而且上述经过视图分析之后,已经得到其对应的三种具体展示形式,在真正开始写代码前,请先把需要封装的组件涉及的核心数据结构给设计好,毕竟这个数据最终是需要从外部传入的:

  • 串行展示

    data = [
      {status'completed' , name'完成' }, 
      {status'processing' , name'当前处理节点' }, 
      {status'pending' , name'待处理' }
    ]
    复制代码
    image.png
    • 多个节点,意味着整体应该设计为一个数组
    • 单个节点即对应数组的每一项元素信息
  • 并行展示

    data = [
      {status'completed' , name'开始' }, 
      [ // 1. 这个数组表示是并行节点
       [ // 1.1 这个数组表示是并行节点中,上边 串行节点的数据
          {status'completed' , name'完成' }, 
          {status'processing' , name'当前处理节点' }, 
          {status'pending' , name'待处理' }
       ],
       [ // 1.2 这个数组表示是并行节点中,下边 串行节点的数据
          {status'completed' , name'完成' }, 
          {status'processing' , name'当前处理节点' }, 
          {status'pending' , name'待处理' }
       ]
      ],
      {status'pending' , name'结束' }, 
    ]
    复制代码
    • 相当于并行节点中又包含并行节点,类似于:
    • 混合展示

    • 可以看做是上下两个串行展示的合并,可将数据带有并行的节点也使用数组来表示

data = [ {status: 'completed' , name: '开始' }, [ // 1. 这个数组表示是并行节点 [ // 1.1 这个数组表示是并行节点中,上边 串行节点的数据 {status: 'completed' , name: '完成' }, [// 1.1 这个数组表示是并行节点中的并行节点 [// 1.1.1 这个数组表示是并行节点中,上边 串行节点的数据 {status: 'processing' , name: '当前处理节点' } ], [// 1.1.2 这个数组表示是并行节点中,下边 串行节点的数据 {status: 'processing' , name: '当前处理节点' } ], ], {status: 'pending' , name: '待处理' } ], [ // 1.2 这个数组表示是并行节点中,下边 串行节点的数据 {status: 'completed' , name: '完成' }, {status: 'processing' , name: '当前处理节点' }, {status: 'pending' , name: '待处理' } ] ], {status: 'pending' , name: '结束' }, ] 复制代码 ```

实现 progress-step 组件

其大部分的实现思路已经在上面介绍过了,这里就不再额外介绍一些样式计算相关的内容,下面直接展示效果和源码。

props 简介

  • data:要展示的节点数据
  • colors:不同节点状态的颜色
  • status:不同节点状态的值
  • size:节点图标的大小
  • stepWidth:节点占据的宽度
  • space:节点之间的间距
const props = withDefaults(defineProps<PropsType>(), {
  data() => [],
  colors() => ["#d2d2d2""#3a84fb""#67d36f"],
  status() => ["pending""processing""completed"],
  size25,
  stepWidth80,
  space20,
});
复制代码

效果展示

串行展示

const data = [
  { status"completed"title"开始"description"这是描述" },
  { status"processing"title"处理中"description"这是描述" },
  { status"pending"title"待处理"description"这是描述" },
  { status"pending"title"结束"description"这是描述" },
]
复制代码

并行展示

const data = [
  { status"completed"title"开始"description"这是描述" },
   [
    [
      { status"completed"title"已完成"description"这是描述" },
      { status"completed"title"已完成"description"这是描述" },
      { status"pending"title"待处理"description"这是描述" },
    ],
    [
      { status"completed"title"已完成"description"这是描述" },
      { status"pending"title"待处理"description"这是描述" },
    ],
   ],
   { status"pending"title"结束"description"这是描述" },
]
复制代码

混合展示

const data = [
  { status"completed"title"开始"description"这是描述" },
  [
    [
      { status"completed"title"已完成"description"这是描述" },
      { status"completed"title"已完成"description"这是描述" },
      [
        [
          { status"completed"title"已完成"description"这是描述" },
          { status"pending"title"待处理"description"这是描述" },
        ],
        [
          { status"completed"title"已完成"description"这是描述" },
          { status"processing"title"处理中"description"这是描述" },
        ]
      ],
      { status"pending"title"待处理"description"这是描述" },
    ],
    [
      { status"completed"title"已完成"description"这是描述" },
      { status"completed"title"已完成"description"这是描述" },
      [
        [
          { status"completed"title"已完成"description"这是描述" },
          { status"pending"title"待处理"description"这是描述" },
        ],
        [
          { status"completed"title"已完成"description"这是描述" },
          { status"processing"title"处理中"description"这是描述" },
        ]
      ],
      { status"pending"title"待处理"description"这是描述" },
    ],
  ],
  { status"pending"title"结束"description"这是描述" },
]
复制代码

不足

现存缺点比较明显:

  • 当流程节点超过视图容器,很难动态调整好各个节点间的距离,现在暂时使用滚动条代替
  • 不能无限制渲染节点层数(最大层数为 3 ,如混合模式所示),动态计算方式仍存在缺陷
  • 节点内容变化导致高度、位置的计算问题
  • ...

源代码

需要查看代码的可通过此处查阅:**源代码**[1]

代码目录

最后

在实际实现过程中涉及到动态计算的部分很容易理不清,包括动态计算矩形框高度、宽度以及节点位置等,以上仅仅算是一个实现思路(不要害怕写出不完美的代码),期望各位大佬能够在评论区给出更优质的方案!!!

20769C0D.gif

关于本文

作者:熊的猫

https://juejin.cn/post/7173441418835263525

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,在看」是最大的支持
 》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持


浏览 24
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报