- 博客(57)
- 收藏
- 关注
原创 React前端开发中实现断点续传
在前端开发中,断点续传是指在上传文件时,如果上传过程中中断(如网络断开、页面刷新等),可以从断点处继续上传,而不是重新上传整个文件。这种功能在大文件上传场景中非常有用。
2025-03-17 16:59:26
370
原创 前端大文件上传(分片上传)与下载
这里简单说一下业务中遇到的大文件下载,上述镜像文件上传之后是支持用户下载的,所以怎样处理20G文件的下载也是需要考虑的,我与后端小伙伴尝试过通过range推流的方式来处理大文件的下载,当下载时除了控制台能看到后一直在推流过来,界面上不会出现下载进度的窗口,而且当文件大小超过2G时会出现浏览器缓存不足导致推流的中断,这里没有系统研究具体原因。当然这里后端没有过多的做切片的处理,可以通过前端使用多线程,或者不等接口响应成功就进行下一次传递切片的过程进行上传的提速,这里具体怎么实现看业务需求或者怎么配合上传。
2025-03-17 16:52:58
440
原创 实现Token无感刷新
通过 Axios 的请求拦截器和响应拦截器,可以实现 Token 的无感刷新,从而提升用户体验。关键在于:在 Token 过期前主动刷新。处理并发请求和错误情况。确保 Token 存储和传输的安全性。这种方法适用于大多数前后端分离的项目,能够有效减少用户因 Token 过期而需要重新登录的情况。
2025-03-17 15:42:19
1606
原创 react实现虚拟列表
在前端开发中,当一次性渲染大量数据时,直接渲染所有DOM节点,会造成渲染过慢,浏览器卡顿的现象,导致用户体验不佳,为了改善这种情况,提出使用虚拟列表的方式进行渲染。如果列表项高度不固定,需要动态计算高度并缓存。如果列表项高度不固定,需要动态计算每个列表项的高度。根据缓存的高度计算可见区域的起始索引和结束索引。只渲染可见区域内的列表项,其他区域用空白占位。监听滚动事件,动态更新可见区域的列表项。渲染一个隐藏的列表项,测量其高度并缓存。计算当前可见区域的起始索引和结束索引。如果列表项高度固定,可以直接计算。
2025-03-17 15:01:01
336
原创 总结(一)
闭包是指有权访问另一个函数作用域中变量的函数。. 创建闭包最常见的方式就是,在一个函数内部创建另一个函数。使用闭包主要为了设计私有的方法和变量。优点是可以避免变量的污染缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。添加链接描述对称加密又叫做私钥加密,即信息的发送方和接收方使用同一个密钥去加密和解密数据。过程是可逆的。对称加密的特点是算法公开、加密和解密速度快,适合于对大数据量进行加密。非对称加密也叫做公钥加密。非对称加密与对称加密相比,其安全性更好。
2025-03-16 16:55:55
803
原创 React通过命令式的弹窗控制,实现组件封装
open(‘create’) 实现组件封装是一种命令式的控制方式。这种方式的核心思想是将组件的内部逻辑(如打开、关闭)封装在组件内部,并通过 ref 暴露给父组件调用。useImperativeHandle:在子组件中暴露方法(如 open 和 close)给父组件。命令式调用:父组件通过 ref.current?.open(‘create’) 控制组件的显示。关闭回调:在 close 方法中添加回调函数,处理关闭后的逻辑。动态内容:可以通过 open 方法传递更多参数,动态渲染内容。
2025-03-11 17:12:19
441
原创 React面试(二)
当事件触发时,事件会冒泡到父元素,父元素通过e.target属性来判断事件的触发者,并执行相应的逻辑。构造函数在类组件中主要初始化局部状态和绑定事件处理器,但是他不是必须的,随着类属性和箭头函数的使用,以及函数组件和hooks的运用,构造函数的使用频率大大降低。react为了确保跨浏览器的一致性,使用了合成事件,而在html原生事件中,事件处理器直接接触到浏览器的原生事件对象。react使用事件委托机制,有助于减少内存提高浏览器性能,而在html原生事件中,需要手动实现事件委托。
2025-03-11 16:55:37
916
原创 CSS+Html面试题(四)
伪元素:在DOM中创建一个不存在的元素,但是不会占据文档流空间::before 在某元素前面创建一个元素::after 在某元素后面创建一个元素::first-lint 在选择元素的第一个行::first-letter 在选择元素的第一个字母伪类:选择元素的特定状态或特定行为的关键字,元素在文档流中真实存在:hover 鼠标悬停在元素上会触发的样式:active 元素和用户发生互动时会触发的样式:focus 元素获得焦点时触发的样式。
2025-03-08 18:48:10
491
原创 CSS+Html面试题(三)
盒子模型分为标准和模型和怪异和模型,标准和模型的宽度和内容相同,怪异盒模型的宽度=内容+padding+borderbox-sizing:content-box(标准盒模型)box-sizing:border-box(怪异盒模型)flex布局十css3引入的一种一维布局方式,可以使盒子中的子元素实现灵活的排列和布局常见属性:flex-direction:定义主轴方向,常见属性row、column、row-verse、column-reverse。
2025-03-08 16:35:38
749
原创 CSS+Html面试题(二)
外边距重叠:相邻盒子(父子关系或者兄弟关系)的外边距合并成一个外边距解决办法:针对父元素,给父元素添加padding或border属性;给父元素设置overfloe:hidden,创建一个新的BFC,但是会隐藏超出父元素范围的内容;针对子元素:给子元素清除浮动clear:both;将子元素设置display:inline-block,使其成为行内块元素;使用绝对定位的方式。
2025-03-06 18:02:41
421
原创 CSS+Html面试题(一)
2.在SEO层面上,在爬虫抓取图片的时候,我们不能抓取图片内容,为了提高seo性能,可以在img组件上加上alt属性,来描述这张图片的内容和关键词。src用于替换当前元素,指向外部资源的位置,该资源会嵌入到当前文档中组件所在的位置,并且暂停其它资源的下载和执行,知道该资源下载和执行完毕。渐进增强是针对低版本浏览器进行页面构建,保证最基本的功能,然后再针对高版本浏览器进行兼容,功能完善,交互。符合W3C标准,结构和样式分离,代码结构清晰明了,便于维护;em:斜体,更强烈的强调,表示语音语调的强调。
2025-03-04 18:09:39
410
原创 React面试(一)
react和vue的diff机制不同,在vue中作响应式处理data数据的时候,同时做了依赖收集,所以当数据更新的时候,会精确的更新组件,而react不同,他在setState的时候必须同时更新当前组件及其子组件,并且在react16之前没有提出fiber的时候,他们是同步渲染的,这就会导致一直占用浏览器的资源知道这个动作完成,如果项目很大往往会造成卡顿的现象。1.useEffect中的函数必须在组件销毁的时候调用,所以react在执行的时候必须拿到这个返回值,组件在销毁的时候才能够调用这个返回值。
2025-02-26 16:49:26
268
原创 前端界面搜索部分,第一个选择框的值,影响第二个选择框的值
在前端界面搜索部分,运用ProTable组件,实现第一个选择框的值,影响第二个选择框的值
2024-09-19 11:17:03
344
原创 637. 二叉树的层平均值(JS实现)
第 0 层的平均值为 3,第 1 层的平均值为 14.5,第 2 层的平均值为 11。, 以数组的形式返回每一层节点的平均值。因此返回 [3, 14.5, 11]。给定一个非空二叉树的根节点。以内的答案可以被接受。
2024-08-07 14:47:30
155
原创 199. 二叉树的右视图(JS实现)
想象自己站在它的右侧,按照从顶部到底部的顺序,返回从右侧所能看到的节点值。3.while循环控制层数,其中的for循环保证取到的值为二叉树右视图的值。2. 将根节点赋值给quen,quen中最后一个元素是二叉树右视图的值;1.该算法是可以为层次遍历;
2024-08-07 14:42:56
160
原创 242.有效的字母异位词(JS实现)
3.然后遍历t,如果找到相同的key,就--他的值,一旦出现 undefined,表明t出现了s没有的元素,直接返回false。4.最后,如果s和t符合要求,那么这个map的values,应该全部是0;1.首先两个字符串长度如果不一致,则直接返回false;2.使用一个map来记录,s的字符出现的记录;
2024-06-18 11:38:12
190
原创 290.单词规律(JS实现)
2.在字符串长度相同的前提下,查找特定索引下字符在数组中第一次出现的索引,如果索引没有相同的则返回false,否则返回true。1.将字符串转换为数组,如果数组长度不同则不匹配。
2024-06-18 11:18:41
287
原创 205.同构字符串(JS实现)
2.在商都一致的前提下,查找指定字符在各字符串中第一次出现的位置,如果指定字符索引不相等则返回false,否则返回true。1.比较两字符串长度,如果长度不一致,直接返回false。
2024-06-18 10:40:08
211
原创 通过request的方式,批量下载文档
当我们在开发的时候,需要通过网关,常规的通过a标签进行文件下载,不通过网关请求,导致在生产环境下会报错,这时候就需。要通过request请求的方式进行文档上传,下载。
2024-06-17 16:55:35
219
原创 15.三数之和(JS实现)
1.首先对数组进行从小到大排序,接着运用for循环固定一个数nums[i],并运用指针确定左右两端的数nums[L]和nums[R],如果相加和为0,则将数据放到数组中,并返回。3.如果for循环中nums[i]==nums[i-1],则说明有重复的,进行continue。4.当sum==0时,如果sum>0,则R--,如果sum0,则三数之和不可能为0,break。
2024-06-17 16:44:01
245
原创 ProTable组件中搜索部分选择框数据的加载方法
fieldProps: { placeholder: '请选择执行人' },title: '执行人',
2024-05-26 13:10:12
393
原创 215. 数组中的第K个最大元素(JS实现)
2.利用for循环将数组中最大的值删除出去,删除的次数有K控制,1.首先对数组进行从小到大排序。3.返回最后一次pop出来的值。
2023-12-26 15:29:48
441
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人