flouting ui定位组件完美替代ant deisgn使用详解

时间:2022-11-30 孟祥_成都人气:0

前言

因为要写react定位组件（这不是标题党，就是完爆ant deisgn的定位组件，你应该看到一半就会同意我的观点），如下图：

红框部分是用绝对定位放在按钮上面的，你们B端用的主流组件库都是这样实现的，它是很多组件的基础组件，比如下图：

下拉框组件

select组件

还有什么DataPicker，TreeSelect，Dropdown组件等等的下拉框都是以定位组件为基础的。

这个组件实现的复杂度在哪

上面提到，这不过就是一个绝对定位嘛（我们假设红框部分的的dom绝对定位是相较于body元素），我们拿最简单的情况来看，如下图，如何把红框部分渲染到按钮”更多“的下方呢？

我们可以计算更多按钮的getBoundingRect()，返回

const reference = {
  top: xx, // 按钮距离浏览器顶部的距离
  left: xx， // 按钮距离浏览器左边的距离
  width: xx， // 按钮的宽：没有padding
  height：xx，// 按钮的高：没有padding
  ...等等其他属性
}

所以红框部分左上角的坐标就轻易的计算出来了,上面的数据在reference对象上，所以借助reference的定位，我们计算红框部分的下拉框的定位是在哪

{
    position: 'absolute',
    top: reference.top + window.pageYOffset // 竖直方向滚动距离 + reference.height
    left: reference.left + window.pageXOffset // 横向滚动距离 
}

为啥是上面这么计算呢，假如没有滚动条滚动，那么红框部分的绝对定位的top，是不是等于按钮的距离浏览器顶部的高度 + 本身的高度，这个没问题吧？

然后，如果滚动条滚动了的话，是不是要在上面top的基础上加上这段距离，就是红框部分在文档流绝对定位的top。

好了，到此为止，就是最基本的定位组件的逻辑了，我们接下来看复杂点！

复杂度1

还是拿上面的图的红色部分下拉框来说，下拉框一般是在下面，但是我可以定位到上边吧？左边，右边也没啥吧，再过分点，右上，左下？定位组件要处理对吧

复杂度2

假设，我们定位在下面，我想向左偏移8px，向下偏移3px咋办，你是不是应该有暴露一个口子

复杂度3

假设我定位在下面，那么我一直滚，马上就要滚动到看不见下拉框了，如下图

此时我想让定位在上面，能不能自动帮我处理？如下图：

复杂度4

是不是还有可能超出浏览器视口了，如下图：

我们想自动处理，遇到超出就自动变为下方样子：

复杂度5

此时我定位了一次，但是有可能滚动容器不是window，是另一个div，这个计算咋办？还有，是不是我滚动的时候，我要监听滚动事件，还要监听浏览器resize事件，因为我定位的值可能会变？为啥呢，我们上面复杂度3是不是自动帮我们在滚动的时候调整位置

所以你不监听滚动事件你咋知道要调整位置了？

还有很多细枝末节，比如浏览器兼容性等等。。。。

国内组件库怎么实现这个功能

目前阿里的ant design和字节的arco design都是自己实现的，我们拿arco来看（ant内部叫rc-trriger组件，arco叫trriger组件），面向过程的代码，看的我头皮发麻。。。我截个图：

上面的代码属于把我们提到的复杂度全部揉在了一起。

flouting-ui为啥代码质量比ant高

它是以中间件的形式去处理的，思路是什么呢？它假设最开始有一个 computePosition函数，我们假设上面提到的复杂度都没有，也就是不考虑的前提下，我们怎么计算定位组件的坐标，也就是我们最前面的图里说的，红色框部分绝对定位的的的top值和left值：

API如下：

computePosition(要挂载的dom节点，下拉框组件，参数...)

然后我们刚才提到的复杂度，它分别用中间件的形式去处理，比如复杂度2，是想定位之后还有点偏移量，flouting-ui咋做的呢

import {computePosition, offset} from '@floating-ui/dom';
// referenceEl： 要挂载的dom节点
// floatingEl：下拉框组件（或者说想要挂载到上面referenceEl的dom元素）
computePosition(referenceEl, floatingEl, {
  middleware: [offset(10)],
});

如上，offset就是一个中间件，offset(10)，就是向左偏移10px

好了，如果想处理复杂度3呢，我们用另一个中间件

import {computePosition, flip} from '@floating-ui/dom';
computePosition(referenceEl, floatingEl, {
  middleware: [flip()],
});

这样就自动处理了，是不是很简单啊

其实所有这些复杂度的解决方案，在flouting-ui里都是以中间件的形式去处理的，还可以传多个中间件解决多个问题。

中间件的形式好在哪

那么我们就可以自定义很多中间件了，也就是你的组件不仅仅提供了很多功能，解决了很多常用的问题，你还允许用户写代码去拓展，试问，现在哪个组件库的代码是这么写的？没有吧？

代码中间件原理

我们先看看flouting-ui的computePosition API是怎么实现的，它是flouting-ui的核心方法，是串联所有中间件的基础。

下一篇写完整的源码（很晦涩，估计也没几个人看，所以这期就不写了），理解起来说实话，你不熟悉原生dom的话有点困难，比如说为啥这个库要用window.pageYoffset而不是document.body.scrollTop去获取浏览器html元素的滚动距离，因为document.body.scrollTop固定为0，取不到。。。

核心思路讲解：我们还是拿下图做类比

let {x, y} = 求出红色框里的下拉框绝对定位的x坐标和y坐标
// 记录原始placement
  let statefulPlacement = placement;
  // 所有中间件导出的值都挂载到下面的对象上
  let middlewareData: MiddlewareData = {};
  // 数据经过middleware的处理
  // middleware是一个数组，存放所有中间件，就是我们上面说的处理每一个复杂度的对象
  for (let i = 0; i < middleware.length; i++) {
   // name是中间件的名字，fn是处理复杂度的逻辑
    const {name, fn} = middleware[i];
   // 通过把最前面计算的x，y经过fn的处理，得到了新的x,y的值
   // data是指返回的数据，想让后面的中间件也能访问到的数据
    /**
     * 每个middleware需要返回
     * x 新的x坐标
     * y 新的y坐标
     * data 
     * reset
     */
    const {
      x: nextX,
      y: nextY,
      data,
      reset,
    } = await fn({
      /**
       * 每个middleware收到的参数
       * x 目前的x坐标
       * y 目前的y坐标
       * initialPlacement 最初传入的placement
       * placement 
       * middlewareData middleware返回的额外数据
       */
      x,
      y,
      initialPlacement: placement,
      placement: statefulPlacement,
      strategy,
      middlewareData,
      rects,
      platform,
      elements: {reference, floating},
    });
    x = nextX ?? x;
    y = nextY ?? y;
    // 每次处理后的数据想要让后面的中间件访问，就需要挂载到middlewareData对象
    // 这个对象非常好啊，用name隔离了作用域
    middlewareData = {
      ...middlewareData,
      [name]: {
        ...middlewareData[name],
        ...data,
      },
    };
   rest的处理逻辑。。。省略，不是很重要

最后return出被处理完的x,y坐标，或者自动帮我们监听滚动事件和resize事件，然后拿着x,y就可以赋在css的绝对定位的top和left上，实现了定位。

每次处理后的数据想要让后面的中间件访问，就需要挂载到middlewareData对象，这个对象非常好啊，用name隔离了作用域，这就是比koa这个框架处理的高明之处，koa里的ctx对象就像一个垃圾桶，什么属性都往上面挂载，挂载太多了，你也不知道是哪个中间件挂载的

所以flouting-ui的处理思路给我打开了新的思路！nice！！！

中间件如何写

源码再开一篇文章写，这里看看就好，不用过多去关系代码

export const offset = (value: Options = 0): Middleware => ({
  name: 'offset', // 中间件名字
  options: value,  // 传给中间件的值
  async fn(middlewareArguments) { // 中间件处理函数
    const {x, y} = middlewareArguments;
    const diffCoords = await convertValueToCoords(middlewareArguments, value);
    return {
      x: x + diffCoords.x,
      y: y + diffCoords.y,
      data: diffCoords,
    };
  },
});

本文结束，所以如果市面上的组件库的每个组件都是这个形式暴露给用户，就是提供插件式的自定义的中间件，那么整个组件库的拓展性可以说碾压市面上国内所有的react的组件库了

加载全部内容