实习心得(持续更新)_web前后端实训心得900字-CSDN博客

本文链接：https://blog.csdn.net/weixin_62268437/article/details/144064044

2024/11/25-2024/11/29

下拉框回填错误

2024/12/02-2024/12/06

2024/11/25-2024/11/29

下拉框回填错误

1.下拉列表的值是后端接口得到的，页面已经开始渲染但是请求数据还没回来，就会用用于查找label的value值回填

2.下拉列表的值是前端静态存储的，而由于你获取的用于查找label的value是字符串，但是本地的value是Number，导致不能找到对应的label，最后只能用获取的value回填

下面是第二种情况示例

尽量不要在公共函数写非公共的东西

loadsh库

loadsh.js 是一款 JavaScript 实用库，提供了许多常用的函数，可以帮助我们简化开发过程，提高代码质量和效率，但是在页面引用的时候，我们要按需引入，不能只用某个函数，而将所有函数导入增加打包体积

https://www.lodashjs.com/docs/lodash.sortedIndexhttps://www.lodashjs.com/docs/lodash.sortedIndex loadsh.js常用方法讲解https://blog.csdn.net/weixin_41884153/article/details/130339946?ops_request_misc=%257B%2522request%255Fid%2522%253A%25220cf0e53001c277ec56d9668dea431859%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=0cf0e53001c277ec56d9668dea431859&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-130339946-null-null.142%5Ev100%5Epc_search_result_base5&utm_term=loadsh&spm=1018.2226.3001.4187

下面是一个简单的例子，用isNil(value)替代了value==undefined||value==null，十分简洁

dom抓取技巧

对于下拉框或悬浮出现但是移开又消失这种，我们常常难以获取dom结构，为此我们有如下四种方法

设置visible

如果是用组件库，则一般都有visible属性，当你设置为true的时候，我们就可以对dom进行抓取，但是不推荐使用，因为我们可能会忘记调试过后将visible属性去除

暂停和开启JavaScript调试程序

在调试窗口输入Ctrl+Shift+P，就会弹出下面窗口

定时器+debugger

先打个定时器，在回调函数里面写个debugger，然后我们去选下拉框或者悬浮在某个标签上面，等自动debugger把页面卡住就行

模拟已经聚焦的网页

问题出现：点击下拉框之后，再点其他地方就会失焦点，下拉框收起！dom元素获取不到！(悬浮出现但是移开又消失这种不适用)

此时把下面图片的勾勾打起来

当你再点这个选取元素的时候就不会让下拉框因为失焦而收起！

z-index样式

在项目中修改z-index的时候，不能为了解决当前问题，一味把层级变的非常高或者变的非常低，不然虽然会解决当前问题，但是可能会对项目引入新的问题！！！

请求响应数据的替代

对于请求响应的数据，我们可以进行人为更改，在调试窗口当中找到网络，在网络当中找到对应请求，然后在响应中右键点替换内容

在本地新建文件夹，然后修改对应参数即可

获取/监听元素宽高

在 React 中，container.current.getBoundingClientRect().height 和 ahooks 库中的 useSize() Hook 都用于获取 DOM 元素的尺寸信息，但它们的使用方式和功能上有一些显著的区别。

1. container.current.getBoundingClientRect()

使用方式：这是一个直接的 DOM API 调用，通过 ref 获取到 DOM 元素的引用后，调用 getBoundingClientRect() 方法来获取元素的尺寸信息（如高度、宽度、位置等）。

实时性：这个方法是同步的，立即返回当前 DOM 元素的尺寸信息。但需要注意的是，它不会自动监听元素尺寸的变化，因此如果元素的尺寸在页面加载后发生了变化（例如由于内容变化或 CSS 调整），你需要手动重新调用这个方法来获取最新的尺寸信息。

缺点：每次需要获取尺寸时都需要手动调用，无法自动响应尺寸变化。

2. useSize()

使用方式：这是一个 React Hook，它封装了监听 DOM 元素尺寸变化的功能。你只需要将 ref 传递给 useSize()，它就会返回元素的当前尺寸信息，并且会自动监听元素尺寸的变化，并返回最新的尺寸信息。
实时性：useSize() 是一个响应式的 Hook，它会自动监听元素尺寸的变化，并且会在尺寸变化时更新返回的尺寸信息。这意味着你不需要手动调用任何方法来获取最新的尺寸信息。
便利性：使用 useSize() 可以避免手动管理尺寸变化的监听逻辑，减少了代码的复杂性。
依赖库：ahooks 是阿里开源的一个 React Hooks 库，提供了许多实用的 Hooks，useSize() 就是其中之一。你需要安装并引入 ahooks 库才能使用这个 Hook。