【每周工作随笔｜第 3 周】

2025.12.15-2025.12.19

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

一、业务 & 需求

1. 了解csv是什么
   csv，中文名称逗号分割值文件，
   有什么作用？纯文本存储表格数据，第一行是表头，下面是数据，使用逗号隔开，没有复杂的格式嵌套。
   场景：数据导入导出。
   优点：体积小，excel，python前端和后端都可以识别。缺点：数据全是字符串没有数组对象一说，涉及，需要转义。

2. 左移测试
   Bug 越晚发现，修复成本越高。在开发的过程中去自测异常数据，样式问题，逻辑问题。提前去找问题。
   3.对于溢出的内容如何处理？这样可以自适应去处理，而不是给传递宽度，因为这样会有问题，不同屏幕适配不灵活，所以就不是固定高度。
   textRef.current?.scrollWidth > textRef.current?.clientWidth （通过判断是否有滚动条来决定是否显示tooltip）

二、设计 & 架构

1. 懒加载列表+实时搜索
   顶部是实时搜索的输入框，下面内容区域是卡片列表展示数据。对于这样一个场景我需要考虑的如下
   1.顶部的实时搜索需要防抖，防抖是必须要做的，用户停止输入后500ms后在执行操作。
   可能出现的问题：竞态，清空搜索框即重置
   2.搜索情况：区分搜索中和搜索完成的情况。如果数据为空，需要考虑UI显示给用户明确提示。
   3.列表显示使用虚拟列表
   可能出现的问题，搜索结果重置，滚动位置要不要重置？触底渲染下一页请求，需要确定内容高度。

三、技术 & 知识

「git」

1. git prune
   简单来说就是提示需要清理垃圾，比如我们之前commit过的，后来删除了分支，commit提交的没有对应分支了，占着没用需要清理了。

「umiJS」

1. overrides.css文件 在umijs中优先级很高的全局样式文件。一般用于覆盖三方样式

「css」

1. 关于nth-child，首先明确定义是父元素里面的第几个子元素。但是如果结构复杂，很容易不生效。
   比如父元素有不同类型的子元素。

   <ul>
     <li>A</li>
     <div>插队</div>
     <li>B</li>
     <li>C</li>
   </ul>
   li:nth-child(2) {
     color: red;
   }
   按照我们的直觉，应该是B显示红色，但实际上都没有。
   li:nth-of-type(2) {
     color: red;
   }
   这样就是B会是红色
   

   原因就是nth-child先找到对应的位置，发现不是li样式就不会生效。
   如果想要解决这个问题，就可以使用nth-of-type，可以让对应的元素生效。

「Ant Design」

1. 注意modal和modal.confirm区别。
   modal.confirm不归个人管的命令式弹窗，关闭之后被卸载。
   modal是受react状态控制的组件，关闭之后没有被卸载。
   下面是两者的具体使用

   const [open, setOpen] = useState(false)
   
   <Modal
     open={open}
     onOk={() => setOpen(false)}
     onCancel={() => setOpen(false)}
   >
     内容
   </Modal>
   

   受state控制，生命周期清晰，适合的务弹窗

   <Button
     onClick={() => {
       Modal.confirm({
         title: '确认提交？',
         onOk() {
           return submit()
         },
       })
     }}
   >
     提交
   </Button>
   
   

   没有state控制，内部reactDOM.createRoot创建，动态挂到body，自己管理显示和卸载，不可控。

2. antd的下拉框，一创建就不会删除，位置是放在body的下面。

3. antd的table没有元素的时候，默认是图片，但是我们想要给他的高度约束一下，如果没有内容就是固定高度。

   .ant-table-placeholder td {
     height: 210px;
     vertical-align: middle;
   }
   

四、工程 & 协作

1. jira的使用。在jira的操作，如果解决了问题，就把处理人一下，让下一个人知道。
2. 对于他人口头的改正，注意要有记录，比如jira里面提一个需求更改的记录。
3. 对于前端而言，样式统一很有必要，所以在一开始对于统一样式要内部有协商，比如封装一个通用组件或者其他。方便后的统一改。

本周总结

1. 本周最大的收获是什么
   封装组件的思想
2. 最大的坑是什么
   很多需求一起用过来的时候，自己要对任务做一个优先排序，一次只做一件事情，尽量不要频繁切换任务。
3. 下周想改进的一点
   合理安排时间