组件库设计实战 - 复杂组件设计

趣谈前端
趣谈前端 2024-01-24 14:12:28 62968
分类专栏： 资讯

图片

一个成熟的组件库通常都由数十个常用的 UI 组件构成，这其中既有按钮（Button），输入框（Input）等基础组件，也有表格（Table），日期选择器（DatePicker），轮播（Carousel）等自成一体的复杂组件。

这里我们提出一个组件复杂度的概念，一个组件复杂度的主要来源就是其自身的状态，即组件自身需要维护多少个不依赖于外部输入的状态。参考原先文章中提到过的木偶组件（dumb component）与智能组件（smart component），二者的区别就是是否需要在组件内部维护不依赖于外部输入的状态。

实战案例 - 轮播组件
在本篇文章中，我们将以轮播（Carousel）组件为例，一步一步还原如何实现一个交互流畅的轮播组件。

最简单的轮播组件
抛去所有复杂的功能，轮播组件的实质，实际上就是在一个固定区域实现不同元素之间的切换。在明确了这点后，我们就可以设计轮播组件的基础 DOM 结构为：

<Frame>
  <SlideList>
    <SlideItem />
    ...
    <SlideItem />
  </SlideList>
</Frame>

如下图所示：

图片

Frame 即轮播组件的真实显示区域，其宽高为内部由使用者输入的 SlideItem 决定。这里需要注意的一点是需要设置 Frame 的 overflow 属性为 hidden，即隐藏超出其本身宽高的部分，每次只显示一个 SlideItem。

SlideList 为轮播组件的轨道容器，改变其 translateX 的值即可实现在轨道的滑动，以显示不同的轮播元素。

SlideItem 是使用者输入的轮播元素的一层抽象，内部可以是 img 或 div 等 DOM 元素，并不影响轮播组件本身的逻辑。

实现轮播元素之前的切换

为了实现在不同 SlideItem 之间的切换，我们需要定义轮播组件的第一个内部状态，即 currentIndex，即当前显示轮播元素的 index 值。上文中我们提到了改变 SlideList 的 translateX 是实现轮播元素切换的关键，所以这里我们需要将 currentIndex 与 SlideList 的 translateX 对应起来，即：

translateX = -(width) * currentIndex

width 即为单个轮播元素的宽度，与 Frame 的宽度相同，所以我们可以在 componentDidMount 时拿到 Frame 的宽度并以此计算出轨道的总宽度。

componentDidMount() {
  const width = get(this.container.getBoundingClientRect(), 'width');
}

render() {
  const rest = omit(this.props, Object.keys(defaultProps));
  const classes = classnames('ui-carousel', this.props.className);
  return (
    <div
      {...rest}
      className={classes}
      ref={(node) => { this.container = node; }}
    >
      {this.renderSildeList()}
      {this.renderDots()}
    </div>
  );
}

至此，我们只需要改变轮播组件中的 currentIndex，即可间接改变 SlideList 的 translateX，以此实现轮播元素之间的切换。

响应用户操作

轮播作为一个常见的通用组件，在桌面和移动端都有着非常广泛的应用，这里我们先以移动端为例，来阐述如何响应用户操作。

{map(children, (child, i) => (
  <div
    className="slideItem"
    role="presentation"
    key={i}
    style={{ width }}
    onTouchStart={this.handleTouchStart}
    onTouchMove={this.handleTouchMove}
    onTouchEnd={this.handleTouchEnd}
  >
    {child}
  </div>
))}

在移动端，我们需要监听三个事件，分别响应滑动开始，滑动中与滑动结束。其中滑动开始与滑动结束都是一次性事件，而滑动中则是持续性事件，以此我们可以确定在三个事件中我们分别需要确定哪些值。

滑动开始

  • startPositionX：此次滑动的起始位置

handleTouchStart = (e) => {
  const { x } = getPosition(e);
  this.setState({
    startPositionX: x,
  });
}

滑动中

  • moveDeltaX：此次滑动的实时距离

  • direction：此次滑动的实时方向

  • translateX：此次滑动中轨道的实时位置，用于渲染

handleTouchMove = (e) => {
  const { width, currentIndex, startPositionX } = this.state;
  const { x } = getPosition(e);

  const deltaX = x - startPositionX;
  const direction = deltaX > 0 ? 'right' : 'left';
  this.setState({
    moveDeltaX: deltaX,
    direction,
    translateX: -(width * currentIndex) + deltaX,
  });
}

滑动结束

  • currentIndex：此次滑动结束后新的 currentIndex

  • endValue：此次滑动结束后轨道的 translateX

handleTouchEnd = () => {
  this.handleSwipe();
}

handleSwipe = () => {
  const { children, speed } = this.props;
  const { width, currentIndex, direction, translateX } = this.state;
  const count = size(children);

  let newIndex;
  let endValue;
  if (direction === 'left') {
    newIndex = currentIndex !== count ? currentIndex + 1 : START_INDEX;
    endValue = -(width) * (currentIndex + 1);
  } else {
    newIndex = currentIndex !== START_INDEX ? currentIndex - 1 : count;
    endValue = -(width) * (currentIndex - 1);
  }

  const tweenQueue = this.getTweenQueue(translateX, endValue, speed);
  this.rafId = requestAnimationFrame(() => this.animation(tweenQueue, newIndex));
}

因为我们在滑动中会实时更新轨道的 translateX，我们的轮播组件便可以做到跟手的用户体验，即在单次滑动中，轮播元素会跟随用户的操作向左或向右滑动。

下面展示一下使用dooring灵活搭建轮播图的演示和文章(点击可查看原文): 

图片

实现顺滑的切换动画

在实现了滑动中跟手的用户体验后，我们还需要在滑动结束后将显示的轮播元素定位到新的 currentIndex。根据用户的滑动方向，我们可以对当前的 currentIndex 进行 +1 或 -1 以得到新的 currentIndex。但在处理第一个元素向左滑动或最后一个元素向右滑动时，新的 currentIndex 需要更新为最后一个或第一个。

这里的逻辑并不复杂，但却带来了一个非常难以解决的用户体验问题，那就是假设我们有 3 个轮播元素，每个轮播元素的宽度都为 300px，即显示最后一个元素时，轨道的 translateX 为 -600px，在我们将最后一个元素向左滑动后，轨道的 translateX 将被重新定义为 0px，此时若我们使用原生的 CSS 动画：

transition: 1s ease-in-out;

轨道将会在一秒内从左向右滑动至第一个轮播元素，而这是反直觉的，因为用户一个向左滑动的操作导致了一个向右的动画，反之亦然。

这个问题从上古时期就困扰着许多前端开发者，笔者也见过以下几种解决问题的方法：

  • 将轨道宽度定义为无限长（几百万 px），无限次重复有限的轮播元素。这种解决方案显然是一种 hack，并没有从实质上解决轮播组件的问题。

  • 只渲染三个轮播元素，即前一个，当前一个，下一个，每次滑动后同时更新三个元素。这种解决方案实现起来非常复杂，因为组件内部要维护的状态从一个 currentIndex 增加到了三个拥有各自状态的 DOM 元素，且因为要不停的删除和新增 DOm 节点导致性能不佳。

这里让我们再来思考一下滑动操作的本质。除去第一和最后两个元素，所有中间元素滑动后新的 translateX 的值都是固定的，即 -(width * currentIndex)，这种情况下的动画都可以轻松地完美实现。而在最后一个元素向左滑动时，因为轨道的 translateX 已经到达了极限，面对这种情况我们如何才能实现顺滑的切换动画呢？

这里我们选择将最后一个及第一个元素分别拼接至轨道的头尾，以保证在 DOM 结构不需要改变的前提下实现顺滑的切换动画：

图片

这样我们就统一了每次滑动结束后 endValue 的计算方式，即

// left
endValue = -(width) * (currentIndex + 1)

// right
endValue = -(width) * (currentIndex - 1)

使用 requestAnimationFrame 实现高性能动画

requestAnimationFrame 是浏览器提供的一个专注于实现动画的 API，感兴趣的朋友可以再重温一下《React Motion 缓动函数剖析》这篇专栏。

所有的动画本质上都是一连串的时间轴上的值，具体到轮播场景下即：以用户停止滑动时的值为起始值，以新 currentIndex 时 translateX 的值为结束值，在使用者设定的动画时间（如0.5秒）内，依据使用者设定的缓动函数，计算每一帧动画时的 translateX 值并最终得到一个数组，以每秒 60 帧的速度更新在轨道的 style 属性上。每更新一次，将消耗掉动画值数组中的一个中间值，直到数组中所有的中间值被消耗完毕，动画结束并触发回调。

具体代码如下：

const FPS = 60;
const UPDATE_INTERVAL = 1000 / FPS;

animation = (tweenQueue, newIndex) => {
  if (isEmpty(tweenQueue)) {
    this.handleOperationEnd(newIndex);
    return;
  }

  this.setState({
    translateX: head(tweenQueue),
  });
  tweenQueue.shift();
  this.rafId = requestAnimationFrame(() => this.animation(tweenQueue, newIndex));
}

getTweenQueue = (beginValue, endValue, speed) => {
  const tweenQueue = [];
  const updateTimes = speed / UPDATE_INTERVAL;
  for (let i = 0; i < updateTimes; i += 1) {
    tweenQueue.push(
      tweenFunctions.easeInOutQuad(UPDATE_INTERVAL * i, beginValue, endValue, speed),
    );
  }
  return tweenQueue;
}

在回调函数中，根据变动逻辑统一确定组件当前新的稳定态值：

handleOperationEnd = (newIndex) => {
  const { width } = this.state;

  this.setState({
    currentIndex: newIndex,
    translateX: -(width) * newIndex,
    startPositionX: 0,
    moveDeltaX: 0,
    dragging: false,
    direction: null,
  });
}

完成后的轮播组件效果如下图：

图片

优雅地处理特殊情况

  • 处理用户误触：在移动端，用户经常会误触到轮播组件，即有时手不小心滑过或点击时也会触发 onTouch 类事件。对此我们可以采取对滑动距离添加阈值的方式来避免用户误触，阈值可以是轮播元素宽度的 10% 或其他合理值，在每次滑动距离超过阈值时，才会触发轮播组件后续的滑动。

  • 桌面端适配：对于桌面端而言，轮播组件所需要响应的事件名称与移动端是完全不同的，但又可以相对应地匹配起来。这里还需要注意的是，我们需要为轮播组件添加一个 dragging 的状态来区分移动端与桌面端，从而安全地复用 handler 部分的代码。

// mobile
onTouchStart={this.handleTouchStart}
onTouchMove={this.handleTouchMove}
onTouchEnd={this.handleTouchEnd}
// desktop
onMouseDown={this.handleMouseDown}
onMouseMove={this.handleMouseMove}
onMouseUp={this.handleMouseUp}
onMouseLeave={this.handleMouseLeave}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
onFocus={this.handleMouseOver}
onBlur={this.handleMouseOut}

handleMouseDown = (evt) => {
  evt.preventDefault();
  this.setState({
    dragging: true,
  });
  this.handleTouchStart(evt);
}

handleMouseMove = (evt) => {
  if (!this.state.dragging) {
    return;
  }
  this.handleTouchMove(evt);
}

handleMouseUp = () => {
  if (!this.state.dragging) {
    return;
  }
  this.handleTouchEnd();
}

handleMouseLeave = () => {
  if (!this.state.dragging) {
    return;
  }
  this.handleTouchEnd();
}

handleMouseOver = () => {
  if (this.props.autoPlay) {
    clearInterval(this.autoPlayTimer);
  }
}

handleMouseOut = () => {
  if (this.props.autoPlay) {
    this.autoPlay();
  }
}

小结

至此我们就实现了一个只有 tween-functions 一个第三方依赖的轮播组件，打包后大小不过 2KB，完整的源码大家可以参考这里 carousel/index.js。

除了节省的代码体积，更让我们欣喜的还是彻底弄清楚了轮播组件的实现模式以及如何使用 requestAnimationFrame 配合 setState 来在 react 中完成一组动画。

至此，组件库设计实战系列文章也将告一段落。在全部四篇文章中，我们分别讨论了组件库架构，组件分类，文档组织，国际化以及复杂组件设计这几个核心的话题，因笔者能力所限，其中自然有许多不足之处，烦请各位谅解。

组件库作为提升前端团队工作效率的重中之重，花再多时间去研究它都不为过。再加上与设计团队对接，形成设计语言，与后端团队对接，统一数据结构，组件库也可以说是前端工程师在拓展自身工作领域上的必经之路。

不要害怕重复造轮子，关键是每造一次轮子后，从中学到了什么。

与各位共勉。

更多推荐

 

欢迎评论区留下你的精彩评论~

觉得文章不错可以分享到朋友圈让更多的小伙伴看到哦~

 

以上文章来源于全栈前端精选 作者：诚身
https://zhuanlan.zhihu.com/p/29034015

网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。

本文链接：https://www.xckfsq.com/news/show.html?id=35691
赞同 1
评论 0 条

相关文章

  • 如何用低代码的思路设计文字描边渐变组件 2023-11-23 67586 浏览

    前言文字特效设计一直是困扰Web前端Css世界多年的问题,比如如何用纯Css实现文字描边,渐变,阴影等,由于受限于浏览器兼容性的问题,我们不得不使用其他替代方案来实现.平时工作中我们使用PS等设计工具能很容易的实现文字渐变等特效,但是随着可视化技术的成熟,我们需要把传统软件的能力移植到web端,让用户在Web端也能有和桌面软件一样的体验效果,那么我们就需要想一套优雅的方案了,接下来我会从文本特效的

  • 复盘!如何设计可视化搭建平台的组件商店？ 2024-03-22 66965 浏览

    之前一直在做lowcode和可视化相关的项目，也围绕可视化技术输出了一系列技术文章，今天我继续和大家来聊聊可视化平台相关的话题——组件商店。这个需求其实很早在我开源H5-Dooring之后就有网友提出过issue，如下：正好最近也做了一系列的重构和优化，觉得是时侯着手组件商店了，所以借此机会和大家详细聊聊如何设计可视化搭建平台的组件商店。按照我一向的写作风格，我会在下面列出文章的大纲，以便大家有选

  • 操作系统唯一获奖企业！统信UOS V20荣获“省长杯”工业设计大赛铜奖 2023-12-27 65216 浏览

    近日，由广东省工业和信息化厅主办、广东工业大学承办的第十一届“省长杯”工业设计大赛颁奖典礼在广州举行。广东省委常委、副省长王曦，广东省工业和信息化厅厅长涂高坤出席颁奖典礼。凭借自然、易用、高效的设计理念，统信UOSV20斩获“产品设计组铜奖”。同时，统信UOS安全解决方案进入产业设计组最终决赛，并斩获产业设计组最具潜力奖。颁奖结束后，广东省委常委、副省长王曦在省工业和信息化厅厅长涂高坤、广东工业大

  • 基于 Custom Elements 的组件化开发 2023-12-26 62991 浏览

    customElements是WebComponents规范下的新API，可以用来实现组件化开发。如果你的应用只用兼容最新的Chrome浏览器，那么用它来替代React或者Vue是一个不错的选择。基本用法组件声明在一个HTML文件中。组件包括样式（Style），节点（DOM）和交互逻辑（Script）。一个组件文件的基本结构如下：