- 博客(72)
- 收藏
- 关注
RSS订阅原创 react函数组件中Hooks和ahooks的区别
Hooks 是 React 16.8 引入的一种新特性，它可以让我们在函数组件中使用状态和其他 React 特性。Hooks 提供了一系列的 API，例如 useState、useEffect 等，用于管理组件的状态和生命周期。具体可参考。ahooks 是阿里巴巴开源的一个 React Hooks 库，它是对 React Hooks 的扩展和封装，提供了更多的实用的 Hooks。
2023-12-15 13:31:25
508
1
原创 网页锚点功能实现＜a＞标签和scrollIntoView()方法
因此我们可以通过获取标签dom元素(可以使用除标签之外的任意标签)，添加点击事件，使用scrollIntoView(true)来实现a标签的锚点功能，这个方法可以完美的替代标签的锚点。具体做法是，在滚动到DOM元素时，先将该元素的父元素的scroll-behavior属性设置为smooth，然后再将该元素的scrollIntoView方法调用。当用户点击带有锚点的链接时，页面会滚动到目标元素的位置，并将该元素置于视口的顶部或底部，具体取决于浏览器、操作系统和用户的首选项。
2023-10-28 14:20:58
2095
原创 useInfiniteScroll --- react滚动加载
useInfiniteScroll还允许我们传递一些自定义选项来定制其行为。例如，我们可以指定滚动触发距离、初始状态等等。threshold：表示窗口底部距离下一个请求所需的像素数，默认值为0。hasMore：表示数据是否还有更多，如果设置为false，则不会再触发加载事件。loader：表示正在加载数据时显示的组件。useCapture：表示是否在捕获阶段执行事件，默认为false。除此之外，还可以自定义每次加载数据时所需要传递的参数、请求头、请求方法等。
2023-09-11 22:24:33
1291
原创 JS基础:实现驼峰字符串转下划线字符串
将字符串从第二个字符开始传入递归函数中处理，处理完成后在第一个字符前面根据大小写添加下划线。当字符串长度小于等于 1 时，直接转化为小写字母。遍历字符串中的每个字符，如果字符是大写字母，则在其前面添加下划线并转化为小写字母，否则直接拼接。表示正则表达式匹配到的第一个大写字母，实现了在它前面添加下划线的效果。输出："yi_zhi_xiao_ke_le_ya"eg：输入："yiZhiXiaoKeLeYa"是一个正则表达式，表示匹配所有大写字母。将所有字母转换成小写。
2023-07-19 22:53:28
1297
原创 VUE实现当前页面刷新的七种方法
需要注意的是，使用该方法会刷新整个页面，包括Vue实例、组件以及其他的页面元素，可能会导致一些不必要的开销，不是最优的解决方案。需要注意的是，该方法会重新加载整个页面，如果想要对页面局部进行刷新，可以考虑使用 Vue 自身的一些特性，比如通过设置组件的 key 属性实现组件的更新，或者通过调用。具体来说，当某个组件的数据发生变化，但是该组件的视图没有及时更新，导致页面没有被正确渲染时，可以在需要刷新的组件中调用。方法可以简单地实现当前页面的刷新，这个方法会重新加载当前页面，类似于用户点击浏览器的刷新按钮。
2023-07-18 14:52:58
34622
7
原创 React实现大文件上传、react-dropzone
最后，通过循环依次上传每个切片，并在每个切片上传成功后更新已上传切片的状态。另外，还需要对上传接口进行额外的处理和验证，以适应后端逻辑。后端接收到分块上传的请求后，将每个分块存储到指定路径下，并根据校验码判断分块是否完整。当所有分块上传成功后，后端将分块整合成一个完整的文件，并删除已上传的分块。上传成功后，我们将服务器返回的已上传文件列表更新到。参数传入一个回调函数，用于监视文件上传的进度并显示在控制台中。当文件上传成功后，前端清除上传状态并显示成功的提示信息。需要注意的是，示例中的上传URL路径。
2023-06-29 10:36:44
2547
3
原创 前端优化方案-CDN优化
Gzip压缩利用的是文本文件的重复性，将重复的内容只保留一份，并用一个指向这些重复内容的引用来代替多个重复出现的内容，在传输时只传输一份内容，从而减小网络传输的开销。使用WebP格式图片：Google开发的WebP格式图片，可以将图片大小进行更高效的压缩，从而减少文件的大小，提高网站的加载速度。图片延迟加载：对于一些较大的图片，可以使用图片延迟加载的方式来优化加载速度。CDN加速：使用CDN加速服务可以将图片缓存在CDN服务器上，从而加快图片的加载速度，减少对原服务器的请求次数，提高网站的性能和用户体验。
2023-06-29 08:42:23
2976
原创 埋点是什么？有什么作用？前端如何埋点？
埋点（tracking）是指在应用程序中插入代码或工具来记录某些事件的行为和属性，例如用户在应用中的点击、浏览、购买、注册等操作行为。这些数据可以被用来分析用户行为、优化产品功能、改进用户体验等。通过埋点，开发人员可以采集用户数据，并将其发送到后台以进行分析和存储。埋点数据通常是跟踪、监测和分析网站或应用程序用户行为的重要组成部分。
2023-06-28 19:14:24
11345
2
原创 什么是CDN？CDN的原理和作用是什么？
CDN全称Content Delivery Network，即内容分发网络。CDN是Content Delivery Network（内容分发网络）的缩写，是一种利用分布式节点技术，在全球部署服务器，即时地将网站、应用、视频、音频等静态或动态资源内容分发到用户所在的最近节点，提高用户访问这些内容的速度和稳定性，降低网络拥塞和延迟，同时也能够减轻源站的负载压力，提升网站或应用的可用性和安全性。
2023-06-27 10:44:48
5701
2
原创 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
1585
原创 TCP和HTTP区别
TCP使用三次握手建立连接，并提供错误检测、数据分段、重传控制和流量控制等功能，确保数据的可靠传输。TCP协议将数据分成若干个数据段，每个数据段都包括序列号、确认号、控制位等信息，在数据段传输过程中，接收方会发送确认信息，确认收到了哪些数据段，同时如果发现有丢失的数据段，会要求发送方重新发送。TCP协议是互联网上最常用的协议之一，大多数应用层协议都是基于TCP协议进行数据传输的，如HTTP、FTP、Telnet等。
2023-06-27 08:24:24
2219
原创 JavaScript数组去重的七种方式
下面是数组去重的几种方法：数组去重方法一：使用Set集合去重数组去重方法二：新建一个数组，将没有重复的数组元素添加到新数组并返回新数组数组去重方法三：遍历数组判断并删掉重复元素数组去重方法四：使用数组filter方法过滤出只出现一次的数组元素数组去重方法五：通过对比元素第一次出现的下标和最后一次出现的下标，如果下表不相等，说明重复，删掉一个，然后++数组去重方法六：先使用sort()方法将数组排序，然后依次比较相邻元素是否相等，如果相等则删除后面的元素数组去重方法七：使用reduce()方法
2023-06-26 08:55:07
1425
原创 在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
2507
原创 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
751
原创 数据请求axios，Ajax，jQuery ajax，axios和fetch的区别
Axios 在功能上比 Ajax 和 jQuery Ajax 更强大，而 Fetch 则是一个较新、更先进的 API，但它也存在一些问题。选择适合自己需求的工具，可以提高代码编写效率和减少出错风险。
2023-06-25 14:26:35
630
原创 JavaScript转义字符，什么是转义字符？（\n）和（\r）的区别
是在计算机编程中使用的特殊符号，用于表示一些。例如，\n 表示换行符，\t 表示制表符，\ 表示反斜杠本身，\” 表示双引号，\’ 表示单引号。在一些情况下，如果没有使用转义字符，这些字符可能会被解释为。因此，转义字符在编程中扮演着非常重要的角色。
2023-06-25 14:09:14
2796
原创 面试题：深拷贝和浅拷贝(+内存图)
1）、基本类型：就是值类型，即在变量所对应的内存区域存储的是值。 2）、引用类型：就是地址类型。 何为地址：地址就是编号，要地址何用，就是为了容易找到。每个人的家里为什么要有一个唯一的地址，就是在邮寄时，能够找到你家。 比如：我们最早的超市存包的格子，每个格子都有个编号，你存包时，服务员会把你的东西放在某个格子里，再把这个格子的编号给你（一个牌子）。你购物完毕取包时，直接给服务员你的牌子（有编号），服务员根据你的编号就会找到你的包。这个编号就是格子的地址
2023-06-25 11:16:46
182
原创 使用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
2374
原创 VUE3常见面试题
在上面的例子中，我们定义了一个名为useCountdown的自定义hook函数，该函数接收一个表示倒计时的秒数，通过ref函数创建了一个名为count的响应式数据，并在函数内部使用了Vue3的组合式API onMounted和setInterval来实现倒计时的逻辑封装。toRefs 的作用是将一个普通的对象转换成多个 ref 对象，每个 ref 对象对应原对象的一个属性，使得可以在模板中使用这些 ref 对象来渲染和响应式更新。Proxy代理是ES6的新特性，可以代理一个对象并跟踪该对象的变化。
2023-06-08 08:47:29
3781
5
原创 react常见面试题2
1.setState是同步还是异步？在 React 中，setState是异步更新状态的。这意味着即使你连续多次调用setState，实际 DOM 的更新可能只会执行一次。React 会对多次调用setState进行批处理，只执行一次更新将状态写入 DOM。。这个方法可以在组件中立即强制重新渲染，无论组件的状态是否已经发生变化，也无论其他组件的状态是否已经改变。但是，建议只在必要时，例如在使用计时器或移动动画等情况下，才使用方法，因为它可能会破坏 React 的优化算法，从而导致性能问题。
2023-06-07 21:22:42
1234
3
原创 React路由6.x reach-router-dom v6x
在React-router-dom v5.x中，路由是使用和标签来定义的。但是，在v6.x中，路由的配置已经从这些标签中提取出来，并转移到了一个新的组件中。这个新组件使用匹配模式来定义路由规则，从而使路由定义更加清晰和可读。
2023-06-02 15:03:22
716
原创 Webpack打包-打包详细流程
Webpack是一个现代化的静态模块打包器，支持JavaScript、CSS、图片等资源的打包。它将所有模块及其依赖项视为静态资源，并创建一个依赖关系图，将这些资源转换为有效的输出文件。通过Webpack，可以将多个文件打包成一个或多个文件，并在网页中加载使用。Webpack 支持各种开发场景和应用程序类型。在Webpack中，所有资源都被认为是模块，可通过引入其他模块而使用。Webpack提供了配置文件，允许开发人员自定义构建流程，以便灵活地满足各种场景的需求。Webpack 的功
2023-06-02 10:29:41
8752
原创 在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
1974
原创 uniapp面试题一键Get！！！
UniApp是一个跨平台的开发框架，能够在多个移动平台上使用统一的代码进行开发。它使用Vue.js作为开发语言，并支持原生应用、小程序、H5等多种应用类型。省时省力：UniApp使用统一的代码进行开发，不需要为不同的平台编写不同的代码，这可以大大提高开发效率。跨平台：UniApp框架允许开发人员在多个平台上发布应用，包括原生应用、小程序、H5等多种应用类型。易于使用：UniApp框架使用Vue.js作为开发语言，而Vue.js是一种非常易于学习和使用的语言。
2023-06-01 21:11:31
2655
原创 什么是 TypeScript ? 快速上手 TypeScript
TypeScript是一种由微软开发的开源编程语言，它是JavaScript语言的一个超集，支持JavaScript中的所有语法和特性，并在此基础上添加了一些新的特性。TypeScript与JavaScript最大的不同是它引入了静态类型检查机制，通过在编译时检查变量的类型，可以帮助程序员更快速地找出代码中潜在的错误。
2023-06-01 20:14:30
1069
原创 HTML中文本过长、超出限制字数时自动隐藏末尾部分或中间等任意部分
在 HTML 中，可以使用 CSS 样式来控制文本的长度和显示方式。那么如果要隐藏中间部分呢？这个时候光写css是达不到我们想要的效果的我们需要使用JavaScript一起来设置！
2023-06-01 19:38:03
4756
原创 WebSocket 是什么？WebSocket 前后端交互
如今，大量的实时Web应用，如在线聊天、实时游戏、视频会议等都在使用 WebSocket 技术来实现低延迟、高效率和高可靠性的实时数据交换，而且相比其他技术（例如 Ajax 和长轮询），WebSocket 能够大幅降低网络带宽和服务器负载，提供更流畅的用户体验。：客户端每隔一段时间向服务端发送一个特有的心跳消息，每次服务端收到消息后只需将消息返回，此时，若二者还保持连接，则客户端就会收到消息，若没收到，则说明连接断开，此时，客户端就要主动重连，完成一个周期。当服务器收到消息时，它将打印出该消息。
2023-06-01 19:13:31
10079
原创 Git常用命令介绍
版本控制是一种记录文件或文件夹变化的管理方式，用于跟踪文件或文件夹中的修改并保留历史记录。它使得多人协作更加方便，也可以在修改后发现问题时轻松恢复之前的版本。本地版本控制系统，如rcs；集中化的版本控制系统，如CVS、SVN；分布式版本控制系统，如Git。
2023-06-01 15:21:05
478
原创 React实现Vue的watch监听属性
在 Vue 中可以简单地使用 watch 来监听数据的变化，还能获取到改变前的旧值，而在 React 中是没有 watch 的。React中比较复杂，但是我们如果想在 React 中实现一个类似 Vue 的 watch 监听属性，也不是没有办法。
2023-06-01 14:22:30
3014
原创 React Hooks
Hooks是React 16.8中最重要的新增特性。Hooks本质上就是一类特殊的函数，它们可以为你的函数型组件（function component）注入一些特殊的功能，让您在不编写类的情况下使用 state(状态) 和其他 React 特性。使用Hooks，可以更方便地使用状态和副作用，同时也可以避免类组件中的一些问题。React Hooks的出现让函数组件和类组件之间的差距变得更小，使得我们在开发React应用时更加灵活、简便。同时，React Hooks还可以帮助我们更好地组织和复用组件逻辑。
2023-06-01 11:50:17
609
原创 什么是函数柯里化Currying?怎么实现？柯里化封装？
currying柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。提前接收部分参数，延迟执行，不立即输出结果，而是返回一个接受剩余参数的函数。因为这样的特性，也被称为部分计算函数。柯里化，是一个逐步接收参数的过程。函数柯里化常用于函数式编程，可以帮助我们简化代码、提高代码的复用性和可读性。
2023-05-31 19:42:45
692
原创 前端如何实现Excel的上传下载？
我们可以利用 HTML5 提供的 FileReader 实现将 Excel 文件读入内存，再使用 Blob 和 URL.createObjectURL 实现文件内容的下载。在此方案中，需要实现客户端将 Excel 文件上传至服务端，然后再由服务端返回 Excel 文件给客户端进行下载。一种是利用 HTML5 提供的 FileReader 和 Blob 对象实现本地文件的读取和下载。接口同样应该由后端进行实现，且返回的应该是 Excel 文件的二进制流数据。元素到页面中，模拟用户点击下载链接，下载文件。
2023-05-31 16:16:16
3005
原创 JavaScript六种排序方法！！！你还不知道吗？
JavaScript常用六种排序方法：数组自带sort、冒泡排序、选择排序、归并排序、快速排序、插入排序。以上是 JavaScript 中常见的排序算法，不同的排序算法在不同的场景下具有不同的优劣，我们需要根据实际需求来选择合适的算法。
2023-05-31 14:54:23
362
原创 什么是WebWorker?具体怎么使用
WebWorker是HTML5提供的一种浏览器内置的多线程解决方案，通过JavaScript API来创建一个独立于主线程（也就是UI线程）并且可与其并行运行的工作线程。这个新创建的线程可以执行一些长时间运行的计算密集型任务，从而不会阻塞主线程的执行。众所周知，js最初设计是运行在浏览器中的，为了防止多个线程同时操作DOM，带来渲染冲突问题，所以js执行器被设计成单线程。
2023-05-31 14:02:26
2371
原创 如何解决js定时器不准确问题
Web Worker 是运行在后台线程中的 JavaScript 脚本，可以与主线程并行工作，因此不会受主线程的影响。使用标准时间: 可以使用标准时间对象提供的函数（如getTime、getSeconds等）获取当前时间，而不是使用JavaScript自带的全局变量Date来保证计时器的准确性。由于该定时器是在 Worker 线程中运行的，因此它不会受到主线程的影响，从而保证了定时器的准确性。根据定时器最开始时间计算当前时间（回调函数执行时间）与开始时间的误差，用期望时差减误差作为下一次任务的时间间隔。
2023-05-31 13:42:46
3278
原创 HTML-CSS常见面试题整理！面试题？看这一篇就够了
HTML是一种标记语言，用于创建网页结构和内容。它定义了不同的标记（或元素）来表示网站中的不同部分，如标题、段落、链接和图像等。HTML 是构建网页的基础。CSS是一种样式表语言，用于美化网页。它定义了不同的样式规则来控制网页中的元素，如字体、颜色、布局和大小等。CSS 可以为网页带来丰富的视觉效果，使其更加吸引人眼球。
2023-05-31 11:20:07
902
原创 CMD和PowerShell？区别
CMD批处理通常使用批处理文件(.bat或.cmd文件)编写，这些文件包含一系列命令，可以在单个文件中执行多个命令。同时，通过基于对象的数据处理和丰富的输出格式化功能，PowerShell还具有强大的命令交互性。- Cmdlets：cmdlets是PowerShell命令的基础构建块，它们通常是以动词形式开始的小型函数，如Get、Set、Invoke、Start等等。： PowerShell拥有强大的脚本编写支持，它使用.NET框架，并提供了大量的预定义命令和数据类型来简化脚本编写过程。
2023-05-31 10:12:48
2750
原创 Angular常见面试题AngularJS
Angular 是由 Google 开发的一种 TypeScript 式的开源前端 Web 应用框架，专注于构建单一页面应用程序（SPA）。AngularJS是由Google开发的一个JavaScript框架，用于构建Web应用程序。它被称为“Angular1”，它最初在2010年推出，随后受到广泛的使用和认可。与AngularJS不同，Angular是一个完全重写的框架，也称为“Angular2+”。虽然两个框架都由Google团队开发，但它们之间存在一些根本性差异。
2023-05-31 08:50:13
1292
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人