自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(72)
  • 收藏
  • 关注

原创 react函数组件中Hooks和ahooks的区别

Hooks 是 React 16.8 引入的一种新特性,它可以让我们在函数组件中使用状态和其他 React 特性。Hooks 提供了一系列的 API,例如 useState、useEffect 等,用于管理组件的状态和生命周期。具体可参考。ahooks 是阿里巴巴开源的一个 React Hooks 库,它是对 React Hooks 的扩展和封装,提供了更多的实用的 Hooks。

2023-12-15 13:31:25 481 1

原创 网页锚点功能实现<a>标签和scrollIntoView()方法

因此我们可以通过获取标签dom元素(可以使用除标签之外的任意标签),添加点击事件,使用scrollIntoView(true)来实现a标签的锚点功能,这个方法可以完美的替代标签的锚点。具体做法是,在滚动到DOM元素时,先将该元素的父元素的scroll-behavior属性设置为smooth,然后再将该元素的scrollIntoView方法调用。当用户点击带有锚点的链接时,页面会滚动到目标元素的位置,并将该元素置于视口的顶部或底部,具体取决于浏览器、操作系统和用户的首选项。

2023-10-28 14:20:58 1894

原创 useInfiniteScroll --- react滚动加载

useInfiniteScroll还允许我们传递一些自定义选项来定制其行为。例如,我们可以指定滚动触发距离、初始状态等等。threshold:表示窗口底部距离下一个请求所需的像素数,默认值为0。hasMore:表示数据是否还有更多,如果设置为false,则不会再触发加载事件。loader:表示正在加载数据时显示的组件。useCapture:表示是否在捕获阶段执行事件,默认为false。除此之外,还可以自定义每次加载数据时所需要传递的参数、请求头、请求方法等。

2023-09-11 22:24:33 1233

原创 JS基础:实现驼峰字符串转下划线字符串

将字符串从第二个字符开始传入递归函数中处理,处理完成后在第一个字符前面根据大小写添加下划线。当字符串长度小于等于 1 时,直接转化为小写字母。遍历字符串中的每个字符,如果字符是大写字母,则在其前面添加下划线并转化为小写字母,否则直接拼接。表示正则表达式匹配到的第一个大写字母,实现了在它前面添加下划线的效果。输出:"yi_zhi_xiao_ke_le_ya"eg:输入:"yiZhiXiaoKeLeYa"是一个正则表达式,表示匹配所有大写字母。将所有字母转换成小写。

2023-07-19 22:53:28 1255

原创 VUE实现当前页面刷新的七种方法

需要注意的是,使用该方法会刷新整个页面,包括Vue实例、组件以及其他的页面元素,可能会导致一些不必要的开销,不是最优的解决方案。需要注意的是,该方法会重新加载整个页面,如果想要对页面局部进行刷新,可以考虑使用 Vue 自身的一些特性,比如通过设置组件的 key 属性实现组件的更新,或者通过调用。具体来说,当某个组件的数据发生变化,但是该组件的视图没有及时更新,导致页面没有被正确渲染时,可以在需要刷新的组件中调用。方法可以简单地实现当前页面的刷新,这个方法会重新加载当前页面,类似于用户点击浏览器的刷新按钮。

2023-07-18 14:52:58 31182 3

原创 React实现大文件上传、react-dropzone

最后,通过循环依次上传每个切片,并在每个切片上传成功后更新已上传切片的状态。另外,还需要对上传接口进行额外的处理和验证,以适应后端逻辑。后端接收到分块上传的请求后,将每个分块存储到指定路径下,并根据校验码判断分块是否完整。当所有分块上传成功后,后端将分块整合成一个完整的文件,并删除已上传的分块。上传成功后,我们将服务器返回的已上传文件列表更新到。参数传入一个回调函数,用于监视文件上传的进度并显示在控制台中。当文件上传成功后,前端清除上传状态并显示成功的提示信息。需要注意的是,示例中的上传URL路径。

2023-06-29 10:36:44 2463 3

原创 前端优化方案-CDN优化

Gzip压缩利用的是文本文件的重复性,将重复的内容只保留一份,并用一个指向这些重复内容的引用来代替多个重复出现的内容,在传输时只传输一份内容,从而减小网络传输的开销。使用WebP格式图片:Google开发的WebP格式图片,可以将图片大小进行更高效的压缩,从而减少文件的大小,提高网站的加载速度。图片延迟加载:对于一些较大的图片,可以使用图片延迟加载的方式来优化加载速度。CDN加速:使用CDN加速服务可以将图片缓存在CDN服务器上,从而加快图片的加载速度,减少对原服务器的请求次数,提高网站的性能和用户体验。

2023-06-29 08:42:23 2871

原创 埋点是什么?有什么作用?前端如何埋点?

埋点(tracking)是指在应用程序中插入代码或工具来记录某些事件的行为和属性,例如用户在应用中的点击、浏览、购买、注册等操作行为。这些数据可以被用来分析用户行为、优化产品功能、改进用户体验等。通过埋点,开发人员可以采集用户数据,并将其发送到后台以进行分析和存储。埋点数据通常是跟踪、监测和分析网站或应用程序用户行为的重要组成部分。

2023-06-28 19:14:24 9298 2

原创 什么是CDN?CDN的原理和作用是什么?

CDN全称Content Delivery Network,即内容分发网络。CDN是Content Delivery Network(内容分发网络)的缩写,是一种利用分布式节点技术,在全球部署服务器,即时地将网站、应用、视频、音频等静态或动态资源内容分发到用户所在的最近节点,提高用户访问这些内容的速度和稳定性,降低网络拥塞和延迟,同时也能够减轻源站的负载压力,提升网站或应用的可用性和安全性。

2023-06-27 10:44:48 4791 1

原创 HTTP和HTTPS的区别

HTTP和HTTPS的主要区别在于安全性和数据传输方式安全性:HTTP是明文协议,数据在传输过程中不经过加密处理,容易被黑客窃取、篡改和恶意攻击。而HTTPS通过使用SSL/TLS协议,使用公钥和私钥加密传输数据,确保数据传输的机密性和完整性,防止黑客攻击和数据泄露。数据传输方式:HTTP使用的是TCP/IP协议传输数据,数据包在传输过程中不会被改变。而HTTPS在TCP/IP的基础上,添加了TLS/SSL协议,在传输过程中对数据进行加密。端口号:HTTP默认端口号为80,而HTTPS默认端口443

2023-06-27 08:39:30 1437

原创 TCP和HTTP区别

TCP使用三次握手建立连接,并提供错误检测、数据分段、重传控制和流量控制等功能,确保数据的可靠传输。TCP协议将数据分成若干个数据段,每个数据段都包括序列号、确认号、控制位等信息,在数据段传输过程中,接收方会发送确认信息,确认收到了哪些数据段,同时如果发现有丢失的数据段,会要求发送方重新发送。TCP协议是互联网上最常用的协议之一,大多数应用层协议都是基于TCP协议进行数据传输的,如HTTP、FTP、Telnet等。

2023-06-27 08:24:24 2182

原创 JavaScript数组去重的七种方式

下面是数组去重的几种方法:数组去重方法一:使用Set集合去重数组去重方法二:新建一个数组,将没有重复的数组元素添加到新数组并返回新数组数组去重方法三:遍历数组判断并删掉重复元素数组去重方法四:使用数组filter方法过滤出只出现一次的数组元素数组去重方法五:通过对比元素第一次出现的下标和最后一次出现的下标,如果下表不相等,说明重复,删掉一个,然后++数组去重方法六:先使用sort()方法将数组排序,然后依次比较相邻元素是否相等,如果相等则删除后面的元素数组去重方法七:使用reduce()方法

2023-06-26 08:55:07 1349

原创 js中如何判断一个数是不是素数(三种方法)

【代码】js中如何判断一个数是不是素数(三种方法)

2023-06-26 08:16:55 2038 2

原创 在React+ts中集成高德地图(保姆级教程)

在React+ts中集成高德地图(amap-jsapi-loader)这里使用的是amap-jsapi-loader 。@amap/amap-jsapi-loader是一个用于加载高德地图JavaScript API的工具库。它可以帮助开发者快速、简便地在网页中引入高德地图API,并提供了一些方便的配置选项和回调函数,以便开发者更好地控制地图的加载和初始化过程。该工具库适用于各种前端框架和库,如React、Vue、Angular等。

2023-06-25 19:33:55 2297

原创 ​ VUE报错:Error in render function: “TypeError: Cannot read property ‘matched‘ of undefined“​

VueRouter实例化时的参数,可以简写为routes,表示routes:routes。但是要注意的是,“routes:routes”表示属性名是routes,值是routes。但是,不要误以为简写的 routes就是路由的变量名(数组名)。如果说你的数组名是myroutes,那么,正确写法是 routes:myroutes。这个错误通常是由于使用了 $router 对象的属性或方法而 $route 对象不存在引起的。,如果你的路由实例名不是router,则不要省略。

2023-06-25 16:20:48 731

原创 数据请求axios,Ajax,jQuery ajax,axios和fetch的区别

Axios 在功能上比 Ajax 和 jQuery Ajax 更强大,而 Fetch 则是一个较新、更先进的 API,但它也存在一些问题。选择适合自己需求的工具,可以提高代码编写效率和减少出错风险。

2023-06-25 14:26:35 615

原创 JavaScript转义字符,什么是转义字符?(\n)和(\r)的区别

是在计算机编程中使用的特殊符号,用于表示一些。例如,\n 表示换行符,\t 表示制表符,\ 表示反斜杠本身,\” 表示双引号,\’ 表示单引号。在一些情况下,如果没有使用转义字符,这些字符可能会被解释为。因此,转义字符在编程中扮演着非常重要的角色。

2023-06-25 14:09:14 2674

原创 面试题:深拷贝和浅拷贝(+内存图)

1)、基本类型:就是值类型,即在变量所对应的内存区域存储的是值。 2)、引用类型:就是地址类型。 何为地址:地址就是编号,要地址何用,就是为了容易找到。每个人的家里为什么要有一个唯一的地址,就是在邮寄时,能够找到你家。 比如:我们最早的超市存包的格子,每个格子都有个编号,你存包时,服务员会把你的东西放在某个格子里,再把这个格子的编号给你(一个牌子)。你购物完毕取包时,直接给服务员你的牌子(有编号),服务员根据你的编号就会找到你的包。这个编号就是格子的地址

2023-06-25 11:16:46 165

原创 使用uni-live-pusher 和 uni-live-player 组件开发小程序直播功能

Uniapp开发文档中没有直接提供小程序直播功能的API,需要自己通过调用第三方SDK或者封装相关API实现。下面介绍一些可能实用的组件和工具:uni-live-pusher 和 uni-live-player 组件:这两个组件可以实现小程序直播推流和播放器功能,可在H5、App、微信小程序等多端使用。腾讯云直播服务接口:腾讯云提供了丰富的直播服务接口,包括推流、播放、转码等,可通过REST API方式调用。需要购买相应的直播服务后才能使用。

2023-06-12 20:41:57 2280

原创 用js开发一个简单的谷歌插件

要开发一个谷歌插件,我们首先需要了解一下插件的基本架构和工作原理。

2023-06-09 13:56:04 2119 1

原创 VUE3常见面试题

在上面的例子中,我们定义了一个名为useCountdown的自定义hook函数,该函数接收一个表示倒计时的秒数,通过ref函数创建了一个名为count的响应式数据,并在函数内部使用了Vue3的组合式API onMounted和setInterval来实现倒计时的逻辑封装。toRefs 的作用是将一个普通的对象转换成多个 ref 对象,每个 ref 对象对应原对象的一个属性,使得可以在模板中使用这些 ref 对象来渲染和响应式更新。Proxy代理是ES6的新特性,可以代理一个对象并跟踪该对象的变化。

2023-06-08 08:47:29 3482 5

原创 react常见面试题2

1.setState是同步还是异步?在 React 中,setState是异步更新状态的。这意味着即使你连续多次调用setState,实际 DOM 的更新可能只会执行一次。React 会对多次调用setState进行批处理,只执行一次更新将状态写入 DOM。。这个方法可以在组件中立即强制重新渲染,无论组件的状态是否已经发生变化,也无论其他组件的状态是否已经改变。但是,建议只在必要时,例如在使用计时器或移动动画等情况下,才使用方法,因为它可能会破坏 React 的优化算法,从而导致性能问题。

2023-06-07 21:22:42 1224 3

原创 React路由6.x reach-router-dom v6x

在React-router-dom v5.x中,路由是使用和标签来定义的。但是,在v6.x中,路由的配置已经从这些标签中提取出来,并转移到了一个新的组件中。这个新组件使用匹配模式来定义路由规则,从而使路由定义更加清晰和可读。

2023-06-02 15:03:22 701

原创 Webpack打包-打包详细流程

Webpack是一个现代化的静态模块打包器,支持JavaScript、CSS、图片等资源的打包。它将所有模块及其依赖项视为静态资源,并创建一个依赖关系图,将这些资源转换为有效的输出文件。通过Webpack,可以将多个文件打包成一个或多个文件,并在网页中加载使用。Webpack 支持各种开发场景和应用程序类型。在Webpack中,所有资源都被认为是模块,可通过引入其他模块而使用。Webpack提供了配置文件,允许开发人员自定义构建流程,以便灵活地满足各种场景的需求。Webpack 的功

2023-06-02 10:29:41 8266

原创 在vue中使用JSON-Server?Mock数据的增删改查

JSON-Server 是用于快速搭建基于 JSON 数据文件的 REST API 的工具。它可以将 JSON 数据文件作为 REST API 的后端服务,通过 HTTP 请求进行数据的增删改查操作。使用 json-server 不需要编写后端代码和数据库,仅需提供一个 JSON 文件即可快速搭建 REST API 服务,方便前端开发人员进行接口测试和模拟数据。而Mock数据是一种虚拟的数据,用于在前端开发中模拟后端数据。在使用Axios请求Mock数据时,可以对Mock数据进行增删改查操作

2023-06-02 08:32:55 1937

原创 uniapp面试题一键Get!!!

UniApp是一个跨平台的开发框架,能够在多个移动平台上使用统一的代码进行开发。它使用Vue.js作为开发语言,并支持原生应用、小程序、H5等多种应用类型。省时省力:UniApp使用统一的代码进行开发,不需要为不同的平台编写不同的代码,这可以大大提高开发效率。跨平台:UniApp框架允许开发人员在多个平台上发布应用,包括原生应用、小程序、H5等多种应用类型。易于使用:UniApp框架使用Vue.js作为开发语言,而Vue.js是一种非常易于学习和使用的语言。

2023-06-01 21:11:31 2555

原创 什么是 TypeScript ? 快速上手 TypeScript

TypeScript是一种由微软开发的开源编程语言,它是JavaScript语言的一个超集,支持JavaScript中的所有语法和特性,并在此基础上添加了一些新的特性。TypeScript与JavaScript最大的不同是它引入了静态类型检查机制,通过在编译时检查变量的类型,可以帮助程序员更快速地找出代码中潜在的错误。

2023-06-01 20:14:30 1003

原创 HTML中文本过长、超出限制字数时自动隐藏末尾部分或中间等任意部分

在 HTML 中,可以使用 CSS 样式来控制文本的长度和显示方式。那么如果要隐藏中间部分呢?这个时候光写css是达不到我们想要的效果的我们需要使用JavaScript一起来设置!

2023-06-01 19:38:03 4545

原创 WebSocket 是什么?WebSocket 前后端交互

如今,大量的实时Web应用,如在线聊天、实时游戏、视频会议等都在使用 WebSocket 技术来实现低延迟、高效率和高可靠性的实时数据交换,而且相比其他技术(例如 Ajax 和长轮询),WebSocket 能够大幅降低网络带宽和服务器负载,提供更流畅的用户体验。:客户端每隔一段时间向服务端发送一个特有的心跳消息,每次服务端收到消息后只需将消息返回,此时,若二者还保持连接,则客户端就会收到消息,若没收到,则说明连接断开,此时,客户端就要主动重连,完成一个周期。当服务器收到消息时,它将打印出该消息。

2023-06-01 19:13:31 9828

原创 Git常用命令介绍

版本控制是一种记录文件或文件夹变化的管理方式,用于跟踪文件或文件夹中的修改并保留历史记录。它使得多人协作更加方便,也可以在修改后发现问题时轻松恢复之前的版本。本地版本控制系统,如rcs;集中化的版本控制系统,如CVS、SVN;分布式版本控制系统,如Git。

2023-06-01 15:21:05 476

原创 React实现Vue的watch监听属性

在 Vue 中可以简单地使用 watch 来监听数据的变化,还能获取到改变前的旧值,而在 React 中是没有 watch 的。React中比较复杂,但是我们如果想在 React 中实现一个类似 Vue 的 watch 监听属性,也不是没有办法。

2023-06-01 14:22:30 2924

原创 React Hooks

Hooks是React 16.8中最重要的新增特性。Hooks本质上就是一类特殊的函数,它们可以为你的函数型组件(function component)注入一些特殊的功能,让您在不编写类的情况下使用 state(状态) 和其他 React 特性。使用Hooks,可以更方便地使用状态和副作用,同时也可以避免类组件中的一些问题。React Hooks的出现让函数组件和类组件之间的差距变得更小,使得我们在开发React应用时更加灵活、简便。同时,React Hooks还可以帮助我们更好地组织和复用组件逻辑。

2023-06-01 11:50:17 596

原创 什么是函数柯里化Currying?怎么实现?柯里化封装?

currying柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。提前接收部分参数,延迟执行,不立即输出结果,而是返回一个接受剩余参数的函数。因为这样的特性,也被称为部分计算函数。柯里化,是一个逐步接收参数的过程。函数柯里化常用于函数式编程,可以帮助我们简化代码、提高代码的复用性和可读性。

2023-05-31 19:42:45 691

原创 前端如何实现Excel的上传下载?

我们可以利用 HTML5 提供的 FileReader 实现将 Excel 文件读入内存,再使用 Blob 和 URL.createObjectURL 实现文件内容的下载。在此方案中,需要实现客户端将 Excel 文件上传至服务端,然后再由服务端返回 Excel 文件给客户端进行下载。一种是利用 HTML5 提供的 FileReader 和 Blob 对象实现本地文件的读取和下载。接口同样应该由后端进行实现,且返回的应该是 Excel 文件的二进制流数据。元素到页面中,模拟用户点击下载链接,下载文件。

2023-05-31 16:16:16 2935

原创 JavaScript六种排序方法!!!你还不知道吗?

JavaScript常用六种排序方法:数组自带sort、冒泡排序、选择排序、归并排序、快速排序、插入排序。以上是 JavaScript 中常见的排序算法,不同的排序算法在不同的场景下具有不同的优劣,我们需要根据实际需求来选择合适的算法。

2023-05-31 14:54:23 343

原创 什么是WebWorker?具体怎么使用

WebWorker是HTML5提供的一种浏览器内置的多线程解决方案,通过JavaScript API来创建一个独立于主线程(也就是UI线程)并且可与其并行运行的工作线程。这个新创建的线程可以执行一些长时间运行的计算密集型任务,从而不会阻塞主线程的执行。众所周知,js最初设计是运行在浏览器中的,为了防止多个线程同时操作DOM,带来渲染冲突问题,所以js执行器被设计成单线程。

2023-05-31 14:02:26 2330

原创 如何解决js定时器不准确问题

Web Worker 是运行在后台线程中的 JavaScript 脚本,可以与主线程并行工作,因此不会受主线程的影响。使用标准时间: 可以使用标准时间对象提供的函数(如getTime、getSeconds等)获取当前时间,而不是使用JavaScript自带的全局变量Date来保证计时器的准确性。由于该定时器是在 Worker 线程中运行的,因此它不会受到主线程的影响,从而保证了定时器的准确性。根据定时器最开始时间计算当前时间(回调函数执行时间)与开始时间的误差,用期望时差减误差作为下一次任务的时间间隔。

2023-05-31 13:42:46 3182

原创 HTML-CSS常见面试题整理!面试题?看这一篇就够了

HTML是一种标记语言,用于创建网页结构和内容。它定义了不同的标记(或元素)来表示网站中的不同部分,如标题、段落、链接和图像等。HTML 是构建网页的基础。CSS是一种样式表语言,用于美化网页。它定义了不同的样式规则来控制网页中的元素,如字体、颜色、布局和大小等。CSS 可以为网页带来丰富的视觉效果,使其更加吸引人眼球。

2023-05-31 11:20:07 868

原创 CMD和PowerShell?区别

CMD批处理通常使用批处理文件(.bat或.cmd文件)编写,这些文件包含一系列命令,可以在单个文件中执行多个命令。同时,通过基于对象的数据处理和丰富的输出格式化功能,PowerShell还具有强大的命令交互性。- Cmdlets:cmdlets是PowerShell命令的基础构建块,它们通常是以动词形式开始的小型函数,如Get、Set、Invoke、Start等等。: PowerShell拥有强大的脚本编写支持,它使用.NET框架,并提供了大量的预定义命令和数据类型来简化脚本编写过程。

2023-05-31 10:12:48 2672

原创 Angular常见面试题AngularJS

Angular 是由 Google 开发的一种 TypeScript 式的开源前端 Web 应用框架,专注于构建单一页面应用程序(SPA)。AngularJS是由Google开发的一个JavaScript框架,用于构建Web应用程序。它被称为“Angular1”,它最初在2010年推出,随后受到广泛的使用和认可。与AngularJS不同,Angular是一个完全重写的框架,也称为“Angular2+”。虽然两个框架都由Google团队开发,但它们之间存在一些根本性差异。

2023-05-31 08:50:13 1231

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除