- 博客(147)
- 收藏
- 关注
RSS订阅原创 npm ERR! CXX(target) Release/obj.target/deasync/src/deasync.o
deasync 是一个需要 C++ 编译 的模块，它依赖于系统的编译链（如 Xcode CLI）和 node-gyp 的编译能力。你这里报错是因为缺少 头文件，说明 编译器环境不完整。所以我将@vue/cli-plugin-unit-jest@3.12.1 从 package.json 中移除。有些项目是间接依赖 deasync 的，可以查查是不是某个插件（比如 webpack 老版本）引入的。这里我并没有用到@vue/cli-plugin-unit-jest@3.12.1。如不需要可手动移除依赖。
2025-04-08 11:52:14
67
原创 【微前端-致命隐患】主子应用异步加载
通过上述两种策略的实施，我们可以显著减少弱网环境下的错误跳转和界面异常问题，进而提升整体系统的稳定性与用户体验，优化异步加载机制能带来更流畅的访问体验。你认为还有哪些优化方案？欢迎在评论区分享你的见解、问题或建议。
2025-03-24 09:55:52
691
原创 别错过！一款不错的轻量级拖拽库 drag-kit，支持React、Vue等前端库
drag-kit是一款高性能、功能丰富且轻量级的拖拽库，能够处理复杂的拖拽需求，例如跨 iframe 拖拽、方向锁定、边界限制、网格对齐等。无论你是在开发一个简单的个人项目，还是构建企业级应用，drag-kit都能为你的拖拽需求提供完美的解决方案。它的跨框架兼容性，适配 Vue 2、Vue 3 和 React，让开发者可以轻松将其集成到不同的技术栈中。更重要的是，它内置了对复杂拖拽场景的优化，确保在各种设备和浏览器中拥有一致的体验。不妨试试drag-kit。
2025-03-21 15:14:51
959
原创 cloud-upload-hub：一款让多云存储上传变简单的神器
cloud-upload-hub 解决了多云存储上传的痛点，让文件上传变得更加高效、灵活。是一个轻量级的前端多云存储上传工具，支持阿里云 OSS、腾讯云 COS 等主流云存储服务，提供统一的 API 和灵活的配置方式，让文件上传变得。，一款专为多云存储场景设计的轻量级上传工具，让你轻松搞定跨云存储文件上传！这样，你的上传器就能无缝集成进 cloud-upload-hub 了！然而，每个平台的 API 规则不同，参数格式各异，导致开发者需要。，通过最后一个生效文件，解决资源无序上传带来的页面资源加载失败。
2025-03-21 09:58:11
364
原创 递归陷阱：如何优雅地等待 props.parentRoute？
如何优雅地递归获取数据？别让你的微前端卡死！递归处理不当，可能导致 UI 卡死、性能下降，甚至引发前端崩溃！本篇文章将解析多种递归方式，全面对比优缺点与性能差异，带你找到最优解！
2025-03-20 17:45:49
1021
原创 打破限制！自定义 Hooks 如何提升 React 组件的灵活性
每个表单组件都需要单独管理useState和验证逻辑，代码会变得冗长且难以维护。render() {return (<input/><input/></form>render() {return (<input/><input/></form>这种不断重复地逻辑，每个表单组件都会有类似的状态管理，以及类似的逻辑操作。而且维护成本高，每次新增一个表单，开发者都需要重复编写几乎相同的代码。如果需求或逻辑变更，必须在多个地方修改代码。
2025-02-19 17:57:09
553
原创 Vue 3 使用 Vue-ECharts 的实践心得
在图表开发中，使用了开源库，它是专为 Vue.js 量身打造的 ECharts 组件。通过结合 Vue 和 ECharts，可以轻松在 Vue 项目中绘制各种类型的图表，包括折线图、柱状图、饼图等。依托 ECharts 强大的渲染引擎，在处理大数据量和复杂交互时，依然能够保持高效的渲染性能，适合用于大数据展示和复杂的图表需求，从而确保流畅的用户体验。echarts官网：https://echarts.apache.org/examples/zh/index.html作为开源项目，
2025-02-19 09:45:53
1324
原创 vue使用v-chart的实践心得
开发Vue2和Vue3时，我们常常需要将数据以图表的形式展示给用户，而 V-Chart 作为一个轻量级且易于集成的图表库，是 Vue 开发的首选。这篇文章，我将写一下关于我在使用这方面的心得。echarts官网：https://echarts.apache.org/examples/zh/index.html-------------------------------------------------------- 后续，我会持续补充内容进来。
2025-02-14 14:18:17
1052
原创 【2024】作为前端开发，必须掌握的 Vue3 的 5 个组合式 API 方法
在 Vue3 中，defineProps、defineEmits、defineExpose、defineOptions、defineSlots是一组新的功能函数，用于定义组件的属性、事件、暴露、选项和插槽。函数名称用途基本用法备注定义组件的属性（props）提供了基本的属性和事件处理通信功能定义组件可以发出的事件同上定义组件暴露给父组件的方法或属性提供了更高级的组件封装能力，适合需要高度自定义和复用的组件。在组合式 API 中设置组件的选项。
2024-10-09 10:03:45
815
原创 别错过！一款不错的轻量级拖拽库 drag-kit，支持React、Vue等前端库
drag-kit是一款高性能、功能丰富且轻量级的拖拽库，能够处理复杂的拖拽需求，例如跨 iframe 拖拽、方向锁定、边界限制、网格对齐等。无论你是在开发一个简单的个人项目，还是构建企业级应用，drag-kit都能为你的拖拽需求提供完美的解决方案。它的跨框架兼容性，适配 Vue 2、Vue 3 和 React，让开发者可以轻松将其集成到不同的技术栈中。更重要的是，它内置了对复杂拖拽场景的优化，确保在各种设备和浏览器中拥有一致的体验。不妨试试drag-kit。
2024-09-27 09:52:30
1442
1
原创 antd RangePicker时间插件导致React项目出现页面卡死问题处理
在 React 项目中使用DatePicker组件时，遇到了页面卡死的问题。组件的主要功能是使用 Ant Design 的组件来选择日期范围，并将日期格式从格里高利历转换为 Moment.js 格式。当用户在页面上交互DatePicker组件时，浏览器出现卡死现象，导致用户无法正常操作页面。通过引入作为中间状态，使用方法代替过时的生命周期方法，有效地解决了组件重渲染和状态同步问题，成功避免了浏览器的卡死现象。这个方法不仅提高了组件的性能，还增强了代码的可维护性和可读性。
2024-09-27 09:46:44
457
原创 什么？LocalStorage 也能被监听？为什么我试了却不行？
通过手动触发，你可以在 LocalStorage 更新时同步分发事件，从而实现同一页签下的监听。// 手动创建并分发 StorageEvent});// 处理 LocalStorage 更新});这种实现简单、轻量、快捷。但是需要手动触发事件。与类似，你可以使用手动创建并分发事件，实现的同步监听。});这种方式适合更加灵活的事件触发场景。不局限于事件，可以扩展到其他功能。});React 是一个基于组件的框架，我们可以使用 React 的生命周期函数（如useEffect。
2024-09-26 10:39:02
1135
原创 【2024】作为前端开发，必须掌握的 Vue3 的 5 个组合式 API 方法
在 Vue3 中，defineProps、defineEmits、defineExpose、defineOptions、defineSlots是一组新的功能函数，用于定义组件的属性、事件、暴露、选项和插槽。函数名称用途基本用法备注定义组件的属性（props）提供了基本的属性和事件处理通信功能定义组件可以发出的事件同上定义组件暴露给父组件的方法或属性提供了更高级的组件封装能力，适合需要高度自定义和复用的组件。在组合式 API 中设置组件的选项。
2024-09-26 10:38:08
1001
原创 【React与Vue】如何在页签中监听 LocalStorage 变化？这些方法你都试过吗？
通过手动触发，你可以在 LocalStorage 更新时同步分发事件，从而实现同一页签下的监听。// 手动创建并分发 StorageEvent});// 处理 LocalStorage 更新});这种实现简单、轻量、快捷。但是需要手动触发事件。与类似，你可以使用手动创建并分发事件，实现的同步监听。});这种方式适合更加灵活的事件触发场景。不局限于事件，可以扩展到其他功能。});React 是一个基于组件的框架，我们可以使用 React 的生命周期函数（如useEffect。
2024-09-24 10:48:38
1366
1
原创 4G 网络下资源加载失败？一次运营商封禁 IP 的案例分享
分层排查，逐步缩小问题范围：从最基本的网络连通性开始，逐层排除可能性是解决复杂网络问题的有效方法。在这个案例中，排查从宿主机、VPN 配置逐步扩展到网络环境和运营商封禁，最终定位到问题所在。合理利用网络排查工具：工具如pingtraceroute和curl是排查网络问题的重要利器，能够帮助我们快速判断问题的根源。考虑区域性网络封禁问题：在不同网络环境下，特别是跨区域或不同运营商的网络中，可能会遇到 IP 段封禁的情况。这种封禁常常表现为特定网络条件下资源无法访问，因此在排查时要考虑到这类区域性问题。
2024-09-20 15:48:12
1222
原创 让拖拽更简单！Drag-Kit，全面支持 React 和 Vue 的轻量库
drag-kit是一款轻量级的拖拽库，能够适应不同的应用场景，无论是基础的拖拽功能，还是复杂的跨 iframe 场景，它都能轻松胜任。在实际项目中，你可以根据需求灵活配置，让用户体验更加流畅，同时减少开发维护的成本。你对 drag-kit有什么看法？在实际应用中遇到了什么难题？欢迎在评论区分享你的经验和见解，也可以提出任何问题。
2024-09-11 15:06:48
1066
1
原创 别错过！React 路由监听复制即用：深入分析及性能陷阱一网打尽！
引言：你是不是也遇到了这些路由变化的困扰？在单页应用（SPA）中，路由管理是至关重要的一部分，它不仅决定了用户如何在页面间切换，还直接影响到整个应用的性能和用户体验。无论是大型电商平台，还是小型个人博客，路由的变化几乎无处不在。这些看似不起眼的问题，往往会导致功能错乱和性能下降。然而，我们在开发 React 项目中可能没有意识到如何的重要性，从而带来隐患。本篇文章将深入探讨在，并显著优化用户体验。希望对你有所帮助、有所借鉴！
2024-09-11 15:01:45
1230
原创 配置eslint时常见问题收录
但是如果需要加的话，建议你先完成“执行Eslint检查”，然后触发npm run lint，看下有哪些文件、代码出现问题。如果你是新项目，那么按照上面的配置来，很少出现问题。如果您需要进一步自定义检查的目录或文件，可以在命令行中指定目录或文件路径，而无需使用。插件的版本较旧可能与较新的 ESLint 版本不兼容。，这会告诉 ESLint 自动处理这些扩展名的文件，因此无需在命令行中指定。这个问题可能与依赖之间的不兼容有关，特别是由于 ESLint 版本和。配置文件时，ESLint 的命令行选项有所不同。
2024-08-26 17:09:01
3873
1
原创 npm install下载一直不动
下载不动通常是由网络问题、镜像源配置或缓存问题导致的。通过切换镜像源、清理缓存、检查配置等方法，大多数情况下可以解决问题。如果问题持续，可以考虑使用 Yarn 作为替代工具。
2024-08-23 18:39:14
2644
原创 Ant Design中Modal.warning Modal.success Modal.error Modal.info 如何隐藏确认按钮
Ant Design中Modal.warning、Modal.success、Modal.error、Modal.info 如何隐藏确认按钮。以 Modal.warning 举例说明。通过将okButtonProps的style属性设置为{ display: ‘none’ }，我们成功地隐藏了Modal组件中的确认按钮。在Ant Design的Modal组件中，若要隐藏确认按钮，可以通过设置okButtonProps属性来实现。
2024-08-16 10:20:20
458
原创 什么是DDoS攻击？
分布式拒绝服务（DDoS）攻击是一种网络攻击手段，其目的是使目标服务器或网络资源无法为合法用户提供服务。攻击者通过控制大量的僵尸网络（由被黑客控制的感染计算机组成的网络）向目标发送大量的请求，耗尽目标的服务器带宽或资源，导致正常用户无法访问服务。在中国，依据相关法律法规，进行DDoS攻击是违法行为。
2024-08-16 09:43:25
331
原创 RangePicker时间插件导致React项目出现页面卡死问题处理
在 React 项目中使用DatePicker组件时，遇到了页面卡死的问题。组件的主要功能是使用 Ant Design 的组件来选择日期范围，并将日期格式从格里高利历转换为 Moment.js 格式。当用户在页面上交互DatePicker组件时，浏览器出现卡死现象，导致用户无法正常操作页面。通过引入作为中间状态，使用方法代替过时的生命周期方法，有效地解决了组件重渲染和状态同步问题，成功避免了浏览器的卡死现象。这个方法不仅提高了组件的性能，还增强了代码的可维护性和可读性。
2024-08-02 18:29:41
352
原创 react代码中使用了componentWillReceiveProps，出现了页面卡死情况，也不报错，直接浏览器页签卡死
react代码中使用了componentWillReceiveProps，出现了页面卡死情况，也不报错，直接浏览器页签卡死，使用console.log也不管用。导致问题的原因在 componentWillReceiveProps 中可能进行了不适当的操作，导致无限循环或性能问题。为了解决这个问题，您可以尝试以下几个步骤：解决方案检查 componentWillReceiveProps 中的逻辑确保在 componentWillReceiveProps 中没有引入导致无限循环或大量计算的逻辑。例
2024-08-02 14:22:18
448
原创 【前端面试紧急指南】Git分支管理最佳实践，你不得不知的秘密！
Git Flow和GitHub Flow: 了解并选择适合你的分支管理模型。分支命名规范: 采用统一的命名规范让分支管理更清晰。最佳实践: 经常同步分支、小步提交、代码评审和删除已合并的分支。希望这篇文章对你有所帮助，读完后别忘了在评论区分享你的见解或提问，与大家一起讨论和学习！通过这些实践，相信你能在前端开发中更加游刃有余，面对面试也能更加自信。加油！
2024-07-30 16:58:46
801
原创 前端神器IntersectionObserver，监听页面可视区域变化
API允许你配置一个观察者来监视一个或多个元素与其祖先或顶级文档视口(viewport)的交叉状态。当被监视的元素进入或离开配置的视图区域时，会执行回调函数。这样，你就可以根据元素的可见性来执行相关操作，例如加载图片、播放视频、停止取数据等。为开发者提供了一个强大的工具，用于优化页面性能并改善用户体验。通过适当的使用这个API，可以在保证功能实现的同时，降低对性能的影响。不论是懒加载图片、实现无限滚动还是其他相关的动态内容展示，都是一个不可或缺的工具。
2024-07-23 17:56:42
1489
原创 前端页面：用户交互持续时间跟踪（duration）user-interaction-tracker
是一个用于记录用户交互和时间的 JavaScript 库。它支持 Vue 2、Vue 3、React 以及其他 JavaScript 框架，提供了简单易用的 API 和插件机制。无论你是在开发 Vue 还是 React 应用，或者其他前端项目，这个库都可以轻松集成，帮助你更好地理解用户行为。目标：实现用户交互持续时间跟踪（duration），并且提升项目埋点效率。通过本文，我们了解了库，一款强大的用户交互跟踪工具。通过简单的配置和易用的 API，它不仅能够帮助我们精确记录用户行为，还能显著提升项目埋点效率。
2024-07-23 15:01:35
1110
原创 【前端大忌】不要小看 let 和 const，这里面也博大精深
引言：最近，“const定义的对象属性是否可以改变？” 这道面试题频频出现。这一问题让我们意识到，let 和 const 不仅仅是简单的变量声明方式，其中的知识点和应用场景也值得我们深入探讨。
2024-07-09 10:46:39
2213
原创 Vue如何实现鼠标悬浮时，展示与隐藏弹窗的功能
通过这种方法，弹窗能够在鼠标悬停在触发元素和弹窗本身上时保持显示，并且在鼠标离开这些区域后，经过一个短暂的延时后自动关闭。这为用户提供了更自然的交互体验。这通常涉及到延时关闭弹窗，以便给用户足够的时间从元素移动到弹窗上，而不触发弹窗关闭。以下是一个实现的例子：（这个例子简单，效果还非常好）如果你需要鼠标在元素和弹窗上时保持弹窗显示，而鼠标离开这两者时隐藏弹窗，你可以使用一个稍微复杂的逻辑来处理鼠标的进入和离开事件。
2024-06-19 09:42:28
2566
原创 技术心得总结：a 标签实现新标签页打开功能
最近，有用户提出希望在点击菜单项时，能够在新标签页中打开对应的链接功能。这类似于我们常用的右键菜单中的“在新标签页打开链接”功能。经过对需求的分析和代码的查看，我们找到了实现这一功能的方法。
2024-06-17 10:09:16
6249
原创 React 大数据量列表渲染优化：前端实战经验让性能飙升50%，页面速度提升95%
思路：如何通过虚拟化技术和 Intersection Observer，实现前端渲染性能飙升 50% 的突破，页面渲染速度提升 95% ！
2024-06-17 09:53:58
1884
1
原创 判断JavaScript对象是否为空，最佳方法与性能对比
在实际应用中，如果你的对象很大，或者你正在进行性能关键的操作，使用或可能会更合适，因为它们直接返回属性列表而不需要额外的遍历或字符串转换。如果你需要兼容老旧环境，for...in循环仍然是一个可靠的方法，只需确保使用检查以避免误判。你最常用哪种方法判断对象是否为空？欢迎在评论区一起讨论下！
2024-06-03 16:05:45
910
原创 性能飙升50%，react-virtualized-list如何优化大数据集滚动渲染
在处理大规模数据集渲染时，前端性能常常面临巨大的挑战。本文将探讨 react-virtualized-list 库如何通过虚拟化技术和 Intersection Observer API，实现前端渲染性能飙升 50% 的突破！除此之外，我们一同探究下该库还支持哪些新的特性和适用场景。如果你正在寻找解决大数据集渲染瓶颈的方法，或是希望提升前端应用的响应速度，这篇文章将为你带来全新的启发与实用的解决方案。
2024-06-03 16:02:26
1498
原创 使用 Reflect.ownKeys 处理符号属性和不可枚举属性
在处理包含符号属性或不可枚举属性的对象时，方法提供了一个全面的解决方案。它可以返回对象自身的所有属性，无论它们是常规的、符号的还是不可枚举的。使用可以确保你不会错过任何属性，这对于一些特定场景（如深度克隆对象、对象比较、序列化和反序列化）非常有用。
2024-05-22 14:55:50
578
原创 仍在纠结使用Map还是Object？这篇详解让你做出明智选择！
在 JavaScript 的生态中，Map和传统的对象（Object）都广泛用于存储键值对数据结构，但它们各自的设计和功能有着本质的区别。本文将深入探讨Map与Object的关键区别，并通过代码示例展示在特定场景下选择使用哪一个更为合适。
2024-05-16 10:59:02
257
原创 react-visible-observer：一个超级简单的滚动加载 npm 库
随着现代网页应用的复杂性增加，懒加载和无限滚动已经成为提升用户体验和性能优化的重要技术。然而，许多现有解决方案要么过于复杂，要么性能欠佳。 react-visible-observer 是一个简单而高效的解决方案，旨在简化这些功能的实现。本文将详细介绍如何在你的 React 项目中集成该库，实现轻松的基于滚动的加载。 是一个轻量级的 React 钩子，它利用 Intersection Observer API 提供可见性检测。它允许你在元素进入或退出视口时执行回调，非常适合实现懒加载、无限滚动和其他基于可见
2024-05-15 10:00:15
883
原创 Proxy和Reflect，打造灵活的JS代理机制 （代码示例）
通过使用Proxy，我们可以轻松地实现对象的代理和拦截操作。而Reflect的引入为与Proxy的配合提供了统一和规范的方式来操作对象。我们可以实现“数据绑定和观察者模式”，用来实现数据的双向绑定，通过拦截对象属性的读取和设置操作，可以自动通知变更。同时，也可以用来“验证和数据校验”，如校验form表单等。以及扩展对象功能和方法劫持，添加自定义功能或修改现有功能。还有很多。。。
2024-05-15 09:49:44
698
原创 React如何封装自定义钩子
确定功能：确定你的钩子需要实现什么功能。这可以是数据获取、订阅管理、表单处理等。创建钩子文件：在你的项目中创建一个新文件，专门用来编写自定义钩子。通常钩子的文件名以 use 开头，如 useFetch.js；编写逻辑：在钩子内部使用React的内置钩子如 useState, useEffect, useRef 等来封装你的逻辑。返回必要的状态或方法：自定义钩子可以返回一个状态、一个方法或者两者都有。决定你的钩子需要对外提供哪些功能，并通过返回值暴露它们，也可以是回调函数。
2024-05-14 09:40:41
665
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人