- 博客(74)
- 问答 (1)
- 收藏
- 关注
原创 JS 实现冒泡排序
看起来没问题,不过一般生成环境都不用这个,原因是效率低下,冒泡排序在平均和最坏情况下的时间复杂度都是O(n^2),最好情况下都是O(n),空间复杂度是O(1)。因为就算你给一个已经排好序的数组,如[1, 2, 3, 4, 5, 6],它也会走一遍流程,白白浪费资源。那么好的解决办法是什么?升序冒泡:两次循环,相邻元素两两比较,如果前面的大于后面的,就交互位置;降序冒泡:两次循环,相邻元素两两比较,如果前面的小于后面的,就交互位置;答案是:加个标识,如果已经排好序的,就直接跳出循环。
2024-05-14 18:21:27 140
原创 前端面试题大合集4----框架篇(React)
setState 只在合成事件和 hook() 中是“异步”的,在 原生事件和 setTimeout 中都是同步的。方法,由于Dom事件被阻止了,无法到达document,所以合成事件自然不会被触发。React合成事件机制:React并不是将click事件直接绑定在dom上面,而是。React在事件绑定时有一套自身的机制,就是合成事件。Dom事件流分三个阶段:事件捕获阶段,目标阶段,事件冒泡阶段。,然后React将事件封装给正式的函数运行和处理。
2024-05-13 10:28:05 875
原创 JS 实现二分法查找
二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法。注意前提是数组的顺序是从小到大或从大到小排列好顺序的。具体的实现步骤是:(1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素),则搜索过程结束,否则进行下一步。(2)如果目标元素大于或者小于中间元素,则在数组大于或小于中间元素的那一半区域查找,然后重复第一步的操作。(3)如果某一步数组为空,则表示找不到目标元素。
2024-05-09 15:45:34 137
原创 JS 实现快速排序
(2)所有小于"基准"的元素,都移到"基准"的左边;所有大于"基准"的元素,都移到"基准"的右边。(3)对"基准"左边和右边的两个子集,不断重复第一步和第二步,直到所有子集只剩下一个元素为止。(1)在数据集之中,选择一个元素作为"基准"(pivot)。
2024-05-09 15:33:00 102
原创 JS 请编写一个Child继承Parent的方法
JS 有哪些继承方式JavaScript 中常见的继承方式有以下几种:原型链继承构造函数继承组合继承(原型链加构造函数)原型式继承寄生式继承ES6 的class的extends关键字(用于现代类继承)
2024-05-09 15:24:11 236
原创 前端面试题大合集3----网络篇
TCP的性能瓶颈主要在于其握手过程和重传机制,而UDP的底层协议,就是大名鼎鼎的QUIC协议,一个运行在传输层的协议。在QUIC中,客户端可以无缝的从一个服务器切换到另一个服务器,而不需要断开原来的连接。当客户端想要切换到另一个服务器时,它会向新的服务器发送一个包含当前连接状态信息的包,新的服务器收到后,就可以立即开始处理客户端的请求。http3.0 :使用了 QUIC,开启多个 TCP 连接,在出现丢包的情况下,只有丢包的 TCP 等待重传,剩余的 TCP 连接还可以正常传输数据;
2024-05-06 09:35:55 488 2
原创 前端面试题大合集2----基础篇
事件代理( Event Delegation ),又称之为事件委托。是 JavaScript 中常用的绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定的事件委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能可以大量节省内存占用,减少事件注册,比如在 table 上代理所有 td 的 click 事件就非常棒可以实现当新增子对象时无需再次对其绑定数据封装类对象:Object、Array、Boolean、Number、String。
2024-04-28 14:35:02 668
原创 前端面试题大合集1----基础篇
原型链就是实例对象在查找属性时,如果查找不到,就会沿着__proto__去与对象关联的原型上查找,有则返回,如果找不到,就去找原型的原型,直至查到最顶层Object函数的原型,其原型对象的__proto__已经没有可以指向的上层原型,因此其值为null,返回undefined。但是对于复合数据类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。
2024-04-10 17:48:12 250
原创 从一个url输入到正常显示出来一个网页经历了哪些过程
最后进行浏览器渲染,浏览器对请求回来的文件进行解析,解析成浏览器可以识别的格式,然后渲染成我们可以看到的网页。发起HTTP请求把相关的html文档和相关资源例如css文件,图片从服务端给请求回来。建立TCP连接要三次握手,断开连接要四次挥手。主要是以上的几个步骤了。
2024-01-27 11:35:42 532 1
原创 JS 删除的是最后一页的最后一条,页码设置逻辑
3、如果删除成功之后的总页数比小于当前总页数,需要把当前页码减去1;否则,直接进行列表数据的请求。2、删除成功之后的总页数与当前总页数进行比较。1、计算操作后的总页数。
2023-08-14 16:51:14 180
原创 antd的Form表单
最近开发项目,发现在antd的form表单中直接嵌套下拉选框,忌廉选择级联选择器这些组件,发现在给这些组件设置值或者获取值的时候,发现方法都不好用了,发现了一个解决办法,就是一定要加上一个div,这样子问题就解决了。
2023-07-24 18:02:34 73
原创 text-overflow:ellipsis 不显示省略号问题
的原因,讲该元素设置为display:block就可以解决问题了。设置单行文字长度多长以省略号显示。结果发现没有发生作用。
2023-07-05 15:45:19 635
原创 JS 实现滚动定位和点击button跳转
最近在开发项目的时候,有一个交互上的需求,就是滚动内容区域的不同模块,要高亮显示上方模块对应的button,用到的是react+TS开发的项目,具体的代码如下:1.滚动定位到具体的tab下面的方法是关键的一个方法,就是获取一组button具体对应的id/** * 设置第二个tab的active的key * scrollTop + clientHeight == scrollHeight,说明滚动到最底部了,把值设置成20px * @param scrollTop * @param do
2021-10-25 14:58:13 1131
原创 Mac系统安装Homebrew
如果官网安装不成功,可以尝试一下在终端输入如下指令:/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"在输入以上指令要确保没有电脑没有连接VPN,可以用中国移动的手机热点去尝试。按回车后,根据提示操作:输入镜像序号 --> 输入Y,回车等待brew安装完成即可。...
2021-08-27 12:08:54 114
原创 webstorm启动报错Load error: undefined path variables
启动webstorm时,会报如下错误:出现这个问题的原因是由于less的环境没有设置好,请看解决方法:1.打开设置的面板,如下所示:2.重启webstorm,再次打开就没有此错误了
2021-08-19 09:40:11 2425
原创 useEffect使用技巧
useEffect如果第二个参数的数组不为空,传了多个参数的情况下,使用总结。如果第二个传了多个参数,如何查看是那个参数发生了变化呢?请看代码:// 在一个正常的Hooks函数中,有如下代码,此代码实现的原理就是通过useRef来达到缓存的目的 const [a, setA] = useState(); const [b, setB] = useState(); const [c, setC] = useState(); const myRef = useRef({a, b, c})
2021-04-20 10:39:19 1118 2
原创 使用Hooks的注意事项
在使用Hooks的过程中,需要注意的两点是: 不要在循环,条件或嵌套函数中调用Hook,必须始终在React函数的顶层使用Hook。这是因为React需要利用调用顺序来正确更新相应的状态,以及调用相应的钩子函数。一旦在循环或条件分支语句中调用Hook,就容易导致调用顺序的不一致性,从而产生难以预料到的后果。 只能在React函数式组件或自定义Hook中使用Hook。 为了避免我们无意中破坏这些规则,你可以安装一个eslint插件:npm install eslint-plugin-
2021-02-08 20:33:49 2056
原创 Vue2双向数据绑定原理
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-.
2021-02-04 20:19:07 101
原创 CSS3中的伪元素选择器与scss
以vue组件未例子来演示代码:<template> <div> Practice <ul> <li>面包屑一级导航</li> <li>二级导航</li> <li>内容</li> </ul> 哈哈哈 </div></template><script>export de
2021-01-26 15:44:02 2539
原创 vue2相关的技术栈对应的环境搭建
本文介绍了两个搭建好的环境,一个是web端,一个是mobile端,都在github上有代码的,欢迎star!欢迎PR!采用的技术栈包括:vue-cli3脚手架搭建出来的(SPA)单页面应用,涉及的技术包括vue2,vue-router,VueX,axios,sass,等等。web端:github-web端链接mobile端:github-mobile端链接欢迎在下方评论参与讨论!...
2020-12-30 11:52:44 213
原创 vue-cli3搭建环境报错
vue常见错误ERROR Error: vue-loader requires @vue/compiler-sfc to be present in the dependency tree.解决办法:npm i -D vue-loader@14这个时候报错就没有了
2020-12-29 16:29:47 359
原创 ES6的Promise结合reduce构建顺序执行队列
ES6的promise是用来处理异步操作的,他的一些基础的用法本篇就不在赘述,感兴趣的同学我可以给你们推荐几篇文章,让你们提升一下对Promise的基本认知,推荐如下:高级前端进阶-微信公众号上推送的一篇文章ES6Promise实战接下来话不多说,直接上代码: const createPromise = (id: number) => () => new Promise(resolve => setTimeout(()=>{ c
2020-12-24 17:28:30 1293 1
原创 JS 深度优先遍历与广度优先遍历 实现查找
在日常的开发工作中,牵扯到层级结构比较复杂的节点,如树形节点,级联选择器,这些都是牵扯到前端算法的遍历的;本文将介绍常用到的两种遍历方式:深度优先遍历和广度优先遍历深度优先遍历:depth first search广度优先遍历:breadth first search1.示意图通过两组示意图来明白什么叫做深度优先遍历和广度优先遍历图一(深度遍历示意图)深度遍历查找会按照图中绿色标注的数字去查找,就相当于是一条道走到黑,如果没有叶子节点的话,会再拐回来,回溯到上一个节点再搜索其余的,按
2020-12-17 19:06:29 1538
原创 React-移动端-用canvas实现电子签名,以及下载成PDF或者jpeg图片
前言电子签名通俗来说就是通过技术手段实现在电子文档上加载电子形式的签名,其作用类似于纸质合同上的手写签名或加盖的公章。虽然电子签名多年来合法性一直遭到质疑,但其在企业工作流审批、请柬、单据保全等场景应用广泛,最近的项目中就有这样一个手写签名并生成PDF文件的需求。实现思路使用canvas来实现手写签名的功能,然后将canvas转化为图片,贴在签名的位置; 将整个需要生成文档的dom区域(canvas对应的dom节点所在的区域)使用html2canvas插件转成一张大图; 使用JsPDF插件将
2020-12-10 14:13:06 1771 2
原创 Vue slot的使用范例
// MyComponent.vue这个是主文件<template> <div> <h2>匿名插槽</h2> <TodoList> <template v-slot:default> 任意内容 <p>我是匿名插槽内容</p> </template> </TodoList> <h2>具.
2020-11-26 14:10:53 128
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人