背景
入职头条快一年，平常工作中，不止一次听到 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 去计算，性能损耗严重
image
-
不支持设置高度缩略
react-truncate
截止发文
- stars 数 503
- 未处理 issue 33
- 上次功能更新 8 月前
问题：
- 不支持结尾标点符号过滤，只能过滤空白符
- 不支持按单词或字母切割
- onResize 需要自行调用
- 使用 canvas 实现，当元素较多时性能损耗严重
其他组件或多或少都有各自的问题导致无法满足我们的需求，所以动手自己撸吧。
轮子介绍
吭哧吭哧搞了一个下午就写完了，目前迭代到 0.5.2 版本。
先看个简单的示例
image
提示：容器拉伸是为了方便演示加的，实际组件不包含拉伸功能。
已经实现和计划中的功能：
已完成功能
- 自定义缩略符
- 自定义缩略符节点
- 尾字符过滤
- 缩略回调
- 缩略符点击回调
- 自适应
计划中
- 按单词或字母分割
- 支持内容换行
- 支持收起符
- 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 兼容性表
image
网友评论