怎么编写插件机制优化基于Antd Table封装表格的混乱代码

本篇内容介绍了“怎么编写插件机制优化基于Antd Table封装表格的混乱代码”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

前言

最近在一个业务需求中，我通过在 Antd Table 提供的回调函数等机制中编写代码，实现了这些功能：

• 每个层级缩进指示线

• 远程懒加载子节点

• 每个层级支持分页

最后实现的效果大概是这样的：

最终效果

这篇文章我想聊聊我在这个需求中，对代码解耦，为组件编写插件机制的一些思考。

重构思路

随着编写功能的增多，逻辑被耦合在 Antd Table 的各个回调函数之中，

• 指引线的逻辑分散在 rewriteColumns, components中。

• 分页的逻辑被分散在 rewriteColumns 和 rewriteTree 中。

• 加载更多的逻辑被分散在 rewriteTree 和 onExpand 中

至此，组件的代码行数也已经来到了 300 行，大概看一下代码的结构，已经是比较混乱了：

export const TreeTable = rawProps => {   function rewriteTree() {     // ?加载更多逻辑     // ? 分页逻辑   }    function rewriteColumns() {     // ? 分页逻辑     // ? 缩进线逻辑   }    const components = {     // ? 缩进线逻辑   };    const onExpand = async (expanded, record) => {     // ? 加载更多逻辑   };    return <Table />; };

这时候缺点就暴露出来了，当我想要改动或者删减其中一个功能的时候变得异常痛苦，经常在各个函数之间跳转查找。

有没有一种机制，可以让代码按照功能点聚合，而不是散落在各个函数中?

// ? 分页逻辑 const usePaginationPlugin = () => {}; // ? 加载更多逻辑 const useLazyloadPlugin = () => {}; // ? 缩进线逻辑 const useIndentLinePlugin = () => {};  export const TreeTable = rawProps => {   usePaginationPlugin();    useLazyloadPlugin();    useIndentLinePlugin();    return <Table />; };

没错，就是很像 VueCompositionapi 和 React Hook  在逻辑解耦方面所做的改进，但是在这个回调函数的写法形态下，好像不太容易做到?

这时候，我回想到社区中一些开源框架提供的插件机制，好像就可以在不深入源码的情况下注入各个回调时机的用户逻辑。

比如 Vite 的插件[1]、webpack 的插件[2] 甚至大家很熟悉的  Vue.use()[3]，它们本质上就是对外暴露出一些内部的时机和属性，让用户去写一些代码来介入框架运行的各个时机之中。

那么，我们是否可以考虑把「处理每个节点、column、每次 onExpand」  的时机暴露出去，这样让用户也可以介入这些流程，去改写一些属性，调用一些内部方法，以此实现上面的几个功能呢?

我们设计插件机制，想要实现这两个目标：