【每周随笔｜第 1 周】

2025.12.15-2025.12.19

写周记的主要目的是复盘我一周的工作内容，确认下周什么可以改进，让经历充分发挥它的价值。

一、业务 & 需求

1. 如果一个大屏同时需要请求多个接口，怎么可以优化一下呢？
   对于大屏来说，一般是一个图表需要一个接口，每个图表独立请求，请求失败互不影响。
   如何优化呢？
   1.可以把接口分为核心的次要的，肯定都是要展示的，核心区域的图表数据优先展示，其他部分的图表可以通过定时器延迟展示，最终还是都要展示的。
   2.对于已经请求过的数据，我们使用缓存，不反复请求。
   3.对于还在请求的接口，我们可以使用loading状态的标识展示。
   这里涉及到使用setTimeout定时器，延迟展示。
   实际上setTimeout给定的时间并不准，真实意思是在几秒后，放到任务队列里面，等到同步任务都执行完成，再执行这个，一般比给定时间晚，javascript是单线程的。

二、设计 & 架构

1. 在做项目时候遇到一个问题，table表格内容回显，对于一些字段比较长的内容，或者非正常数据（空，null，undefined）进行特殊处理。
   最开始没有关注这个到其实这个显示是有很多特殊情况的，仅仅对返回数据做了呈现，没有额外思考。
   如何优化呢？这里可以考虑给他封装成通用组件呢？
   1是为了统一处理非正常数据的情况，比如显示—。
   2是为了确认内容溢出才会显示省略号，鼠标悬浮显示全部内容。
   关于tooltip的使用，可以做一个细节优化，antd Design的tooltip组件使用就会hover显示内容，但如果没有溢出没必要hover显示，可以给定字符值限制，超过多少字符之后，才使用tooltip和文字截断省略号。
   这里又存在一个问题，如果通过字符长度进行限制的话，中英文的视觉大小不同，如果通过字数限制一刀切的话，会存在英文很短就截断，一般一个中文相当于两个英文。
   可以通过固定宽度的截断和判断是否需要tooltp显示。
   text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
textRef.current.scrollWidth?textRef.current.clientWidth；
   前者是所有内容的宽度，通过这个元素的宽度情况，来决定是否需要显示tooltip

2. 对于后台管理系统中，学会组件化思想。
   1.数据回显展示，接口数据返回为空的情况，封装一个方法，统一处理，比如说返回为空都为—这样，后续如果想要改动，只需要改变方法就可以。
   2.对于前后端使用的一些枚举，前端建立一个文件，统一管理，方便后期维护。
   3.把经常使用的用组件进行封装，这样方便后续统一修改，比如说改主题色之类的。比如后台管理系统的table表格可以二次封装，确定好page的分页情况以及分页器的位置，是否是跟着表格内容后面，还是一直固定到页面右下角，表头和表格的样式，减少团队重复工作量。

三、技术 & 知识

「react」

1. useImperativeHandle，react函数组件的一个高级hook，子组件不想暴露状态，让父组件操作。
   比如说，封装了一个表格的组件，需要对外暴露一个刷新表格的方法，就可以使用这个useImperativeHandle来暴露一个方法。

   //子组件
   const Child = forwardRef((props, ref) => {const inputRef = useRef<HTMLInputElement>(null);useImperativeHandle(ref, () => ({focus: () => {inputRef.current?.focus();}}));return <input ref={inputRef} />;
   });//父组件
   const parentRef = useRef(null);<Child ref={parentRef} />
   <button onClick={() => parentRef.current?.focus()}>聚焦输入框</button>

2. 动态计算高度
   对于动态确定元素高度的场景下，我一般通过窗口总高度-固定的头部高度，动态确定剩余部分的高度。
   最近了解到了一个新的思路，比如下面一个盒子是页面剩余高度，可以获取盒子左上角的位置，那么这个其实就是顶部固定元素的高度，我们不用管上面有多少内容了，只需要总-盒子左上角y值。

「umiJS」

1. umi-plugin-keep-alive的页签功能，
   在后台管理系统，页签存在的主要目的是来回切换菜单可以保留之前的状态，不是重新创建组件。
   存在一个特殊场景，如果有两个菜单功能是相关联，一个菜单页面操作后影响另一个菜单的数据，菜单来回切换的话，就不能重新使用缓存，而是应该重新去获取数据。强制手动刷新，根据location.pathname（umijs的，切换页签每次路由都不同），通过这个useEffect依赖来进行执行事件。

「JS」

1. promise的使用，
   首先需要创作promise实例，接受两个函数resolve和reject，只有成功才会执行.then里面的函数。
   我之前一直没有注意到只有promise实例成功之后，才会有后续，自然而然就很直接考虑then方法了。

「css」

1. 两个大小不一的文字如何底部对齐呢？一行文本其中有几个字特别大。
   1.line-height: 1;
   2.align-items: baseline;

2. grid布局对比flex布局真的更灵活
   一直没有使用的都是flex布局，感觉这个就够用了，最近业务很多展示都是card形式，固定位置显示内容，这个对于flex布局就不好排版了。简单用了一下grid布局，发现真的很好用。（挖个坑，后续用的多了可以总结一下）

3. 背景渐变色设置
   有时候为了丰富背景的颜色，可以使用渐变这个效果
   background: linear-gradient([方向或角度], 颜色1, 颜色2, ...);

「Ant Design」

1. Row和Col组件，就是如果在Col上面添加类名设置padding- left和right属性，会导致Row的gutter不起作用，因为设置就是靠padding起作用的。解决办法，在里面添加一层。

「好用的库」

1. react-infinite-scroll-component的使用
   在项目中列表的card展示页面，需要通过触底发送请求实现加载。
   触底发送请求组件的使用，存在一个问题，页面加载数据量条数是固定的，如果在大屏幕和小屏幕一屏可以容纳的数据条数不同，如果以小屏为参照，导致大屏上无法显示出来滚动条，用户无法得知能够滚动获取更多数据。
   解决思路：把pageSize变成动态的，根据screen.height来确定，这个是设备的高度，可以通过他来确定展示的数据条数。
   1.通过不同设备900｜1080｜1440｜等常规的屏幕尺寸来判断计算对应区间的高度展示的数据条数。
   2.通过设备总高度/单个卡片的高度，来获得初始屏幕需要的pageSize。这里有两个点需要注意。1是Math计算，floor和ceil和round分别是向下和向上取整和四舍五入。2是对于浏览器而言有很多高度。比如物理高度 window.screen.height，比如视口高度包括地址栏和window.innerHeight，比如页面可见区域高度 document.documentElement.clientHeight。

2. sql-formatter，格式化的工具
   format(ddl, { language: 'sql' })
   使用起来非常简单，但是不要以为就简单配置 language是sql就可以了，因为不同的语言，格式化的配置语言不同，不能一刀切。
   比如说不同数据库类型starrocks，mysql，sql server，这些对应的ddl语句（数据定义语言，管理数据库的语言）都不一样。

四、工程 & 协作

1. 关于自测方面，需要向测试要一下测试用例，自己先把主流程走一遍，看看有什么遗漏的，或者细节字段方面的问题。
   尽量减少bug数量。

2. 开发完毕后，在一些细节方面的需求反复变动，每次只修复一个小点，真的无解。等我入行深一点在考虑吧，主要很烦人。

本周总结

1. 本周最大的收获是什么
   代码方面也就是常规。
   学习到了一种思想，在平常的工作中学习，比如说用到一个新的组件，在做的时候就去看看了解他的一些功能之类的，而不仅仅是快速完成一个需求。

2. 最大的坑是什么
   开发以及自测要仔细，否则导致很多纯展示的问题。

3. 下周想改进的一点
   尽可能多去封装组件，提升效率，以及培养这种思维。