前端人的工匠精神之"我终于征服Antd了"

前言

从早期写代码时候的潦潦草草到现在的工匠精神，我觉得是我对于代码的认知、蜕变、一种态度。同时我也觉得这应该是每一个coder应该具备的潜意识。

我也不止一次的跟我现在的小伙伴一再强调：见代码如见人。好的代码是对自己的思维感知的一种体现以及对于整个软件工程体系生命周期的把控。

试想一下，当你的代码满是糟粕，久而久之，整个软件中也充斥着大量的糟粕，我们姑且把它称之为”坏味道”，而这种坏味道正是加速软件死亡的毒瘤。

所以，一个对自己职业负责的coder应该对每一行代码负责！保持对代码的敬畏之心，保持对前端的敬畏之心。

另，Code is life，而非Code is money的认知是比较重要的。甚至可以区分同一个工作领域的两极分化。

征服Antd的前夕

故事一(Table)

在一个月黑风高的夜晚，小王还在开发需求以及完善组件库时，碰到一个自然而然就想到的场景。

• table同时出现横向+纵向滚动条的时候，怎么展示？
  • 方案一：常规显示【有个弊端就是，无触摸板用户无法横向滚动，必须拉到最底部，且无法观测表头对应数据】
  • 方案二：表格内滚动【完美解决方案一的问题，但是小屏幕用户怎么办？页面内容多的时候，就只有一条数据，慢慢滚。】

    提及这个，说来惭愧，产品带着我的杰作去演示，结果拿了个mini版的电脑去演示，丢人丢大发了。一瞬间稍微有点挫败感，但是我想把它做到极致！

  • 方案三：粘滞表头，粘滞虚拟滚动条！【近乎完美】

遇到这种问题该怎么做呢？首先肯定是查看 antd 的解决方案。

wow!，这不就是我想要的吗。…….然而，好景不长。

掉下来了，，，但是我又看了一遍官方的示例，没我这个问题，几乎在那一瞬间，，我就想到了是上下文的问题，抱着怀疑的态度，我翻到了开发这个特性的小伙伴的源代码。

先看下merge request:

看的出来，这个大佬也是一个交互细节狂，确实挺钦佩的。不过，真正的file changes可不在这里，而是在rc-table里。

直接搜索sticky关键字下的MR。

果然，这就是元凶，直接挂在了window，我用的时候之所以掉下来是因为，我是容器内滚动的，window下并无滚动条，所以它并没有自动消失。

我们其实看文档的时候就看到了在4.17.0支持了getContainer的属性，我们先来看看，4.17.0做了什么修改。

一样的操作，继续搜索sticky，找到getContainer那条mr。

这下就搞明白了原由如何～

所以最终，对症下药，项目的antd升级到antd@4.17.0-alpha.9，完美解决！

故事二(Table内的Popover、Tooltip、Popconfirm如何定位方案)

由于这个故事并没有故事，所以我就直接出解决方案了～

• 方案一：二次封装，检测滚动隐藏。

  其实是合理的，我们姑且可以认为，当用户滚动的时候，忘记关闭了，像Popconfirm、tooltip等。

import React, { FC, useCallback, useState } from 'react';
import { Tooltip, TooltipProps } from 'antd';
import { useEventListener } from 'ahooks';

const DIYTooltip: FC<TooltipProps> = ({ children, ...rest }) => {
    const [visible, setVisible] = useState(false);

    useEventListener(
        'scroll',
        () => {
            if (visible) {
                setVisible(false);
            }
        },
        {
            capture: true,
        },
    );

    const onVisibleChange = useCallback(flag => {
        setVisible(flag);
    }, []);

    return (
        <Tooltip visible={visible} onVisibleChange={onVisibleChange} {...rest}>
            {children}
        </Tooltip>
    );
};

export default DIYTooltip;

• 方案二：手动添加Container

getTooltipContainer={() => document.querySelector('.ant-table-body') as HTMLElement}

小结

路还很长，故事也很长。

追求极致的路上是一次次细节的思考，设身处地的从实际业务出发，从使用人的角度去思考基建、架构设计，才足够接地气。

有小伙伴经常抱怨：我每天都在写业务，我怎么学习提升啊！

你真的100%的时间在写业务？

你不写业务的时候你在干嘛？

有想过在业务中提升自我吗？

技术的本质就是创造业务价值，为业务服务，在业务中思考，哪里需要优化，从小到大，小到组件设计（设计模式），大到系统设计（构建工具，组件库，CLI工具，微前端）。停止抱怨，那是愚蠢的想法！

当然后续发展可能就是持续集成（jekins、Gitlab Runners、Docker）

加油吧，Code is Life，你会发现其实生活如工作，工作如生活，代码即生活～