- 博客(113)
- 收藏
- 关注
RSS订阅原创 Vue如何实现鼠标悬浮时，展示与隐藏弹窗的功能
通过这种方法，弹窗能够在鼠标悬停在触发元素和弹窗本身上时保持显示，并且在鼠标离开这些区域后，经过一个短暂的延时后自动关闭。这为用户提供了更自然的交互体验。这通常涉及到延时关闭弹窗，以便给用户足够的时间从元素移动到弹窗上，而不触发弹窗关闭。以下是一个实现的例子：（这个例子简单，效果还非常好）如果你需要鼠标在元素和弹窗上时保持弹窗显示，而鼠标离开这两者时隐藏弹窗，你可以使用一个稍微复杂的逻辑来处理鼠标的进入和离开事件。
2024-05-22 14:56:38
74
原创 使用 Reflect.ownKeys 处理符号属性和不可枚举属性
在处理包含符号属性或不可枚举属性的对象时，方法提供了一个全面的解决方案。它可以返回对象自身的所有属性，无论它们是常规的、符号的还是不可枚举的。使用可以确保你不会错过任何属性，这对于一些特定场景（如深度克隆对象、对象比较、序列化和反序列化）非常有用。
2024-05-22 14:55:50
214
原创 仍在纠结使用Map还是Object？这篇详解让你做出明智选择！
在 JavaScript 的生态中，Map和传统的对象（Object）都广泛用于存储键值对数据结构，但它们各自的设计和功能有着本质的区别。本文将深入探讨Map与Object的关键区别，并通过代码示例展示在特定场景下选择使用哪一个更为合适。
2024-05-16 10:59:02
138
原创 react-visible-observer：一个超级简单的滚动加载 npm 库
随着现代网页应用的复杂性增加，懒加载和无限滚动已经成为提升用户体验和性能优化的重要技术。然而，许多现有解决方案要么过于复杂，要么性能欠佳。 react-visible-observer 是一个简单而高效的解决方案，旨在简化这些功能的实现。本文将详细介绍如何在你的 React 项目中集成该库，实现轻松的基于滚动的加载。 是一个轻量级的 React 钩子，它利用 Intersection Observer API 提供可见性检测。它允许你在元素进入或退出视口时执行回调，非常适合实现懒加载、无限滚动和其他基于可见
2024-05-15 10:00:15
742
1
原创 Proxy和Reflect，打造灵活的JS代理机制 （代码示例）
通过使用Proxy，我们可以轻松地实现对象的代理和拦截操作。而Reflect的引入为与Proxy的配合提供了统一和规范的方式来操作对象。我们可以实现“数据绑定和观察者模式”，用来实现数据的双向绑定，通过拦截对象属性的读取和设置操作，可以自动通知变更。同时，也可以用来“验证和数据校验”，如校验form表单等。以及扩展对象功能和方法劫持，添加自定义功能或修改现有功能。还有很多。。。
2024-05-15 09:49:44
590
原创 React如何封装自定义钩子
确定功能：确定你的钩子需要实现什么功能。这可以是数据获取、订阅管理、表单处理等。创建钩子文件：在你的项目中创建一个新文件，专门用来编写自定义钩子。通常钩子的文件名以 use 开头，如 useFetch.js；编写逻辑：在钩子内部使用React的内置钩子如 useState, useEffect, useRef 等来封装你的逻辑。返回必要的状态或方法：自定义钩子可以返回一个状态、一个方法或者两者都有。决定你的钩子需要对外提供哪些功能，并通过返回值暴露它们，也可以是回调函数。
2024-05-14 09:40:41
576
原创 JavaScript不仅有变量声明，还有变量提升
在开发过程中，我们通常按照从上到下的顺序编写代码逻辑，而不去刻意考虑变量提升和函数声明提升。优先使用let和const来声明变量。这样可以避免变量提升导致的意外行为，因为let和const声明的变量在赋值之前是不可访问的。在需要的时候才声明函数和类。避免在作用域顶部之外的地方引用尚未声明的函数或类。这样，我们可以在编写代码时最大程度地保持逻辑的清晰和正确性，减少由变量提升和函数声明提升引起的错误。
2024-05-13 09:54:19
983
原创 关于正则表达式，小黄人有话要说！！！
本文将带你逐步学习正则表达式的基础知识和高级技巧，从基本的元字符到实用的正则表达式示例，让你轻松掌握这一重要的编程技能。无论你是初学者还是有一定经验的开发者，这篇文章都能帮助你更好地理解和应用正则表达式。在 JavaScript 中，你可以使用正则表达式的方法进行模式匹配和替换。：在字符串中查找匹配正则表达式的结果，并返回匹配结果的数组。：在字符串中搜索匹配正则表达式的结果，并返回匹配的起始位置。：在字符串中执行正则表达式匹配，返回匹配结果的数组。：在字符串中替换匹配正则表达式的内容。
2024-04-26 13:49:44
930
原创 vue ant form validate如何对数组下的表单校验
使用Ant Design Vue校验表单时，通过validateFields，但是如何一个数组内部的校验呢？到此，一个数组下的表单校验开发就完成了。文章到此结束，希望对你有所帮助！通过 v-for 循环渲染。对整个表单的校验，那么。实现，我们直接看代码。
2024-04-22 16:03:00
498
原创 你信不信，五分钟快速学习Nginx
与传统的基于进程的Web服务器（如Apache）相比，Nginx在处理请求时占用的内存更少。IP Hash算法根据客户端请求的IP地址的哈希值进行匹配，将具有相同IP哈希值的客户端分配到指定的服务器。location ~ .*.(gif|jpg|jpeg|png|swf)$：配置请求以 .gif、.jpg、.jpeg、.png 或 .swf 结尾的文件的 location 块。正向代理代理客户端的请求去访问目标服务器，目标服务器可能是一个反向服务器，反向代理了多台真实的服务器。
2024-04-18 10:25:25
473
原创 「2024前端」常见面试题之JavaScript
arguments对象是一个类数组对象，它包含了函数调用时传递的所有参数。这个对象不是一个真正的数组，而是一个特殊的对象，它提供了访问函数参数的能力。arguments对象只存在于函数的作用域内，并且它的长度始终等于传入函数的参数数量。可以使用数组索引获取参数，也可以使用lengthfor循环等遍历arguments中的参数。虽然arguments对象的行为与数组类似，但它不是Array的实例，因此不支持数组的方法，如mapfilter等。但是我们可以通过Array.from，将arguments。
2024-04-17 18:39:08
886
原创 前端常见面试题：HTML+CSS
CSS盒模型为页面上的每个元素生成一个矩形盒子，并决定其大小、位置和与其他元素的关系。这个盒子包含了元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。盒模型分为2种类型：标注盒模型、IE盒模型。Margin重叠（或称折叠）是块级元素在垂直方向上的外边距可能会合并成一个单一外边距的现象，这通常发生在兄弟元素或父子元素之间。在父元素（BFC）上设置, 或任何非visible的overflow值，这可以阻止子元素的外边距与父元素外边距的合并。使用边框（
2024-04-16 17:56:04
670
原创 npm ERR! path /Users/apple/.npm/_cacache/index-v5/11/77/cf18d9ab54d565b57fb3
这是由于当前用户（例如，apple用户）对.npm文件夹没有足够的权限导致的。
2024-04-15 16:00:15
472
原创 JS继承与原型、原型链
JavaScript继承是指在前端开发中，使用JavaScript实现对象之间属性和方法的继承关系。继承是面向对象编程的重要概念，它允许我们创建基于现有对象的新对象，并在新对象中拥有原有对象的属性和方法。在JavaScript中，继承是通过原型链来实现的。每个对象都有一个原型对象，它包含对象的属性和方法。当我们访问一个对象的属性或方法时，如果对象本身没有定义该属性或方法，JavaScript引擎会通过原型链向上查找，直到找到对应的属性或方法为止。
2024-04-15 15:59:23
1197
原创 通过Transform与Animation，来探索CSS中的动态视觉效果
在transform和animation出现之前，前端开发者通常需要编写大量的 JavaScript 代码来实现动态效果。然而，这两个 CSS 属性的引入极大地简化了丰富动效和过渡效果的实现，从而让用户界面更加引人入胜，交互体验更为流畅。本文将深入探讨transform和animation这两个属性，并分析它们在创造动态视觉效果中的应用。下面我们通过Demo示例的方式，来见证下。
2024-04-12 18:30:55
742
原创 RxJS 核心原理-操作符（源码实现）
本文介绍了 RxJS 中操作符的核心原理和常见操作符的应用场景。通过应用操作符，我们可以构建复杂的数据处理流程，实现数据的转换、过滤、合并等操作。希望本文对你理解 RxJS 操作符的工作原理以及其在实际应用中的用法有所帮助。
2024-04-12 11:04:40
845
原创 【JS数据类型判断】各路大神对比，一劳永逸的解决方法
提供了简单直观的方式，特别适用于基础数据类型的判断。然而，在处理复杂数据类型和判断 null 时存在一些限制。用于判断对象是否属于特定类型，对于自定义对象类型较为有效，但在处理基础数据类型和多全局上下文时存在一些问题。指向对象的构造函数，提供直观的方式判断对象类型。然而，易受篡改且不适用于基础数据类型。🎉🎉🎉认为是最可靠的数据类型判断方式，适用于几乎所有数据类型，包括基础和复杂数据类型。专用于判断对象是否为数组，提供直观的方式。在处理其他复杂数据类型时无法提供准确信息。这里我还是强烈推荐。
2024-04-11 09:50:30
999
原创 error Downloading https://chromedriver.storage.googleapis.com/2.27/chromedriver_mac64.
这个是由于Chromedriver的zip文件URL的响应是302跳转，但是在install.js里面使用的是node.js内置的http对象的get方法，无法处理302跳转的情况。其实就是googleleapis.com被墙了。
2024-04-07 10:42:16
490
原创 ExperimentalWarning: The http2 module is an experimental API.
2、如果担心切换node版本可能会造成其他问题（或者影响），使用nvm升级node版本（nvm能切换node版本）。npm install -g node 更新node到最新版。npm install -g npm 更新npm到最新版。
2024-04-03 10:02:19
828
原创 React Hooks的出现解决了什么问题？
它解决了组件间状态逻辑复用困难和复杂组件难以理解的问题，使得我们可以更加高效地编写可维护和可扩展的React应用。在类组件中，我们通过在构造器中设置this.state来初始化组件的状态，并通过this.setState来更新状态。在类组件中，特别是当组件包含多个生命周期方法时，代码逻辑可能会分散在各个生命周期方法中，导致同一块功能的代码被拆分到了不同的地方。React Hooks是React 16.8版本引入的一个革命性新特性，它极大地改变了我们编写React组件的方式，并解决了许多长期存在的问题。
2024-03-26 09:57:41
1190
原创 [@vue/compiler-sfc] the ＞＞＞ and /deep/ combinators have been deprecated. Use :deep() instead.
警告信息是与Vue.js迁移到3.x版本有关的，其中>>>和/deep/选择器已被弃用，转而支持:deep()选择器。这些选择器用于全局应用样式，并影响Vue中CSS作用域的工作方式。选择器之前用于将样式应用于组件的直接子元素。在Vue 3中，应该使用:deep()来在CSS中实现相同的效果。选择器之前用于将样式深入到组件树的内部。在Vue 3中，您也应该为此目的使用。等构建工具，它们应该会自动处理这个问题。如果没有使用构建工具，需要手动设置。要求您的CSS必须通过。
2024-03-25 16:04:26
505
原创 node中的事件循环和javascript中的事件循环大致区别
Node.js 的事件循环比浏览器中的事件循环更加复杂，包含更多的阶段。例如，Node.js 的事件循环包括定时器阶段（timers）、I/O 阶段（pending callbacks）、空闲阶段（idle, prepare）、poll 阶段、检查阶段（check）、关闭阶段（close callbacks）等。这些阶段用于处理不同类型的异步操作。简单来说，一个是浏览器，一个是服务，造就了事件循环的阶段不相同，也产生了一个是对浏览器的页面交互和ajax处理，另外一个是对本地的 I/O 操作。
2024-03-21 16:01:28
753
原创 Another git process seems to be running in this repository, e.g. an editor o
另一个git进程似乎正在这个存储库中运行，例如。“git commit”打开的编辑器。请确保所有流程终止，然后重试。如果仍然失败，git进程可能已在此存储库中崩溃：手动删除文件以继续。指 git 被另外一个程序占用，重启项目或者重新打开项目都不能解决，除非删除git源文件。原因在于Git在使用过程中遭遇了奔溃，部分被上锁资源没有被释放导致的。将 .git 文件中 index.lock 删除。操作任何git命令，都提示该内容。
2024-03-19 18:58:20
630
原创 vue router-view 路由跳转时，页面如何滚动到顶部
在Vue中使用路由进行页面切换后，我们可以通过设置scrollBehavior来控制页面的滚动位置。2、如果出现滚动失败的现象，记得设置高度height。1、这里是针对 router-view 的滚动。
2024-03-18 09:56:46
671
原创 小结：Node.js Express VS Koa
Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架，主要基于 Connect 中间件，并且自身封装了路由、视图处理等功能，使用人数众多。Koa 是 Express 原班人马基于 ES6 新特性重新开发的框架，主要基于 co 中间件，框架自身不包含任何中间件，很多功能需要借助第三方中间件解决，但是由于其基于 ES6 generator 、ES7 async特性的异步流程控制，解决了 “callback hell” 和麻烦的错误处理问题。
2024-03-13 17:21:25
879
原创 js如何拦截全局Fetch的请求和响应
Fetch API是一种用于进行网络请求和响应的现代Web API。它提供了一种简单、强大且灵活的方式来处理HTTP请求。在使用Fetch API时，我们通常创建一个请求对象，然后使用fetch函数发送请求，并处理返回的Promise。// GET请求示例：// POST请求示例：headers: {},})总体来说，使用Fetch API发送GET和POST请求的基本是相似的，但在POST请求中需要额外处理请求方法和请求体的数据。
2024-03-11 10:32:56
961
原创 Error: T doesn‘t have .length
在 TypeScript 中，当我们使用泛型时，有时会遇到一个常见问题：编译器提示错误，指出泛型类型T不具备.length属性。在本文中，我们将探讨这个问题的解决方案，并介绍如何通过泛型约束或使用交叉类型和接口来确保我们可以安全地使用.length属性。
2024-03-08 14:33:05
342
原创 如何向router-view中添加组件
在 Vue 开发中，我们经常需要在多个页面中复用相同的组件。虽然最直接的方法是在每个页面中重复编写这些组件，但这并不是最高效的做法。本文将介绍两种方法，帮助您在保持代码整洁的同时，高效地在多个页面中复用组件。在Vue.js中，我们可以创建一个布局组件，其中包含我们希望在多个页面中复用的通用组件，如导航栏、侧边栏和页脚。这种方式允许您在保持路由组件不变的情况下，向每个页面中添加额外的内容。这样，当路由变化时，相应的页面组件就会替换掉。但是，如果您想在页面组件内部直接包含其他组件，同时仍然使用。
2024-03-06 10:28:26
807
原创 Node.js中处理特殊字符的文件名，安全稳妥的方案
在Node.js中，通过path模块提供的basename方法，我们可以轻松地从文件路径中提取文件名。然而，这个方法在处理特殊字符时存在一些问题，因为它会对这些字符进行转义，导致在不同操作系统上的兼容性问题。在这篇文章中，我们将介绍一种安全稳妥的方法，结合使用dirname和长度计算，以处理特殊字符的文件名。
2024-03-05 10:39:12
962
原创 js script中的defer和async
特性asyncdefer加载方式并行加载脚本并行加载脚本执行时机脚本下载完成后立即执行（可能会在文档解析完成前）文档解析完成后，DOMContentLoaded事件触发前执行执行顺序不能保证脚本按照在文档中出现的顺序执行保证脚本按照在文档中出现的顺序执行适用场景不依赖DOM，不依赖其它脚本的独立模块依赖DOM，或其它脚本，且不影响文档显示的脚本。
2024-03-04 09:47:48
729
原创 flex基础快速入门
Flex 是 Flexible Box 的缩写，意为"弹性布局"。任何一个容器都能使用flex布局。行内元素也可以。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。
2024-03-01 15:23:53
787
原创 Vue3在jsx下父子组件如何使用插槽
插槽（Slots）是一种在父组件中传递内容到子组件的方式。通过使用插槽，我们可以让子组件在特定位置渲染一些额外的内容，从而实现更灵活的组件设计。插槽允许我们在父组件中将任意内容传递给子组件，这些内容可以是HTML元素，也可以是其他组件。
2024-02-29 14:19:38
685
原创 vue2与vue3的diff算法有什么区别
在 Vue 中，虚拟 DOM 是一种重要的概念，它通过将真实的 DOM 操作转化为对虚拟 DOM 的操作，从而提高应用的性能。Vue 框架在虚拟 DOM 的更新过程中采用了 Diff 算法，用于比较新旧虚拟节点树，找出需要更新的部分，并最小化 DOM 操作。Vue2 和 Vue3 在 Diff算法上有所不同，下面我们就说说这两者的具体区别。
2024-02-28 10:12:38
1535
原创 前端沙箱，构建安全的代码执行环境
前端沙箱是一种安全机制，它通过限制代码的执行权限和访问资源的能力，来确保代码在可控的环境中运行。这种机制可以防止恶意代码对宿主环境造成破坏，例如泄露敏感信息、发起恶意请求或者执行任意代码。
2024-02-27 17:56:28
1157
原创 Another git process seems to be running in this repository, e.g. an editor o
另一个git进程似乎正在这个存储库中运行，例如。“git commit”打开的编辑器。请确保所有流程终止，然后重试。如果仍然失败，git进程可能已在此存储库中崩溃：手动删除文件以继续。指 git 被另外一个程序占用，重启项目或者重新打开项目都不能解决，除非删除git源文件。原因在于Git在使用过程中遭遇了奔溃，部分被上锁资源没有被释放导致的。将 .git 文件中 index.lock 删除。操作任何git命令，都提示该内容。
2024-02-26 14:09:29
632
原创 GET 和 POST你不知道的另一面
GET请求是幂等的，即多次重复的请求会产生相同的结果。这使得GET适合用于读取资源，因为多次相同的GET请求不会对服务器产生副作用。而 POST 则不是，多次请求可能会产生不同的结果，适用对服务器产生副作用的操作，如提交表单等。GET请求可以被缓存，通常用于读取资源。浏览器和代理服务器可以缓存GET请求的响应，以提高性能和减少对服务器的压力，相反POST不会被缓存。
2024-02-26 14:08:11
745
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人