开源个 react 多行缩略组件, 支持自定义缩略符、尾文本过滤、缩略回调、富文本等

·  阅读 768

背景

入职头条快一年,平常工作中,不止一次听到 UI 反馈,头条 App 内的 h5 上偶尔会出现下面这样的体验 bug。

image-20210228170527346

在缩略符 “...” 前面会小概率出现标点符号,看起来很不雅观。这么长时间这个问题一直没解决,因为自己手头的业务有点多也就没去关注这个他人需求。

最近刚好弄完绩效评估处于需求真空期,刚好想起这个问题,就顺手给解决了,沉淀了个 react 的缩略组件。考虑到这是个很通用的需求,所以整理了一下开源出来。

先直接上干货吧,组件已经开源在 github 上,仓库地址: react-ellipsis (觉得有用可以给个 star)。

可能会有人疑惑,这么常见的需求真的没有可用的轮子吗?我一开始也带着这个疑惑,搜了一下 npm 和 github,发现还真没有能完全符合条件的...

那就自己来造一个吧 -。-

造轮子前

在准备动手解决问题前,我浏览了一下 npm 和 github 上已有的缩略组件,根据 star 数挑几个看看

react-lines-ellipsis

截止发文

  • stars 数 376
  • 未处理 issue 15
  • 上次功能更新 2 年前

问题:

  • 不支持结尾标点符号过滤,只能过滤空白符(可通过 pr 解决,但是作者很长时间未处理 pr 了)

  • 每个 ellipsis 组件都会生成一个隐藏的 div 去计算,性能损耗严重

  • 不支持设置高度缩略

react-truncate

截止发文

  • stars 数 503
  • 未处理 issue 33
  • 上次功能更新 8 月前

问题:

  • 不支持结尾标点符号过滤,只能过滤空白符
  • 不支持按单词或字母切割
  • onResize 需要自行调用
  • 使用 canvas 实现,当元素较多时性能损耗严重

其他组件或多或少都有各自的问题导致无法满足我们的需求,所以动手自己撸吧。

轮子介绍

吭哧吭哧搞了一个下午就写完了,目前迭代到 0.5.2 版本。

先看个简单的示例

提示:容器拉伸是为了方便演示加的,实际组件不包含拉伸功能。

已经实现和计划中的功能:

已完成功能

  • 自定义缩略符
  • 自定义缩略符节点
  • 尾字符过滤
  • 缩略回调
  • 缩略符点击回调
  • 自适应

计划中

  • 按单词或字母分割
  • 支持内容换行
  • 支持收起符
  • ResizeObserver 不支持时用 window.onresize 兼容

具体功能和示例可以查看 react-ellipsis 文档

Q & A

  • 如何保障性能?

    切割算法上,其他组件大多是通过切割成字符数组后,一个个减少直到容器不再溢出,时间复杂度是 O(n)。react-ellipsis-component 使用二分切割将时间复杂度降到 O(logn)。

    计算时在原容器上计算,其他组件使用隐藏的 div 或者 canvas,当 ellipsis 组件很多时性能损耗严重。

    在自适应上,使用 ResizeObserver 实现,而其他组件使用 window.onresize(性能损耗比较大)。

  • 兼容性

    兼容性主要在于 ResizeObserver 实现的自适应缩略,如果不需要自适应缩略,可以覆盖绝大部分的现代浏览器。组件本身除了 react 不依赖其他库,兼容性有保证。

    后续会添加 window.onresize 的兼容逻辑进一步提高兼容性。

    附:ResizeObserver 兼容性表

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改