- 博客(132)
- 收藏
- 关注
RSS订阅原创 axios取消请求
AbortController 是 JavaScript 中用于中止异步操作的全局 API，通过其 signal 属性和 abort() 方法，可终止 Fetch 请求、事件监听、数据流等异步任务。错误处理 需捕获 AbortError 并区分其他错误类型。状态复用 已中止的 signal 不可重复使用，需重新创建实例。兼容性 现代浏览器广泛支持，旧版本需 Polyfill。性能优化 避免滥用导致频繁请求中断，增加服务器负担。核心概念与基础用法。
2025-06-10 11:41:02
650
原创 前端监控方案详解
FP (First Paint)：首次绘制FCP (First Contentful Paint)：首次内容绘制LCP (Largest Contentful Paint)：最大内容绘制FID (First Input Delay)：首次输入延迟CLS (Cumulative Layout Shift)：累计布局偏移JavaScript运行时错误资源加载失败API请求异常自定义业务错误。
2025-06-10 11:13:35
908
原创 【vue】 如何在划词选择的文本上添加右键菜单
本文介绍了如何在Vue中实现自定义文本选中右键菜单。主要步骤包括：1)创建独立的ContextMenu组件，包含复制、高亮、搜索和分享等功能；2)在父组件中监听鼠标事件，获取选中文本并触发菜单显示；3)使用CSS美化菜单样式。还提供了高级扩展功能，如添加动画效果，通过Transition组件实现菜单的平滑进出动画。实现要点包括：阻止默认右键菜单、获取选中文本范围、处理菜单位置和点击外部关闭菜单等。该方案增强了文本操作体验，可灵活扩展更多功能。
2025-06-10 10:30:16
321
原创 在vue项目中，减少if-else的使用方法
Vue项目中过度使用if-else会导致代码难以维护。本文提出8种优化方案： 计算属性简化条件判断； 动态组件按条件渲染； 策略模式处理复杂分支； v-if/v-show控制显示； 映射对象管理状态码； 过滤器格式化文本； 配置驱动UI显示； 渲染函数/JSX灵活控制。通过业务场景案例对比各方案优缺点，如计算属性适合简单逻辑但缺乏扩展性，策略模式可维护复杂逻辑但需额外对象。最终推荐根据场景选择合适方案，提升代码可读性和可维护性。
2025-06-10 09:59:11
1100
原创 Vue 3 Teleport 实战：优雅实现模态框、通知和全局组件
Teleport并非简单的“传送门”语法糖，而是 Vue 3 对组件物理渲染位置控制能力的重大提升。它优雅地解决了：✅组件逻辑与 DOM 结构的解耦✅全局性 UI 元素的标准化管理✅样式作用域与层叠上下文的精准控制通过将模态框、通知、Loading 指示器等“跳出”局部组件层级，渲染到全局容器，Teleport显著提升了复杂 Vue 应用的可维护性与视觉一致性。善用此特性，能让你的全局组件实现既优雅又强大。
2025-06-06 15:47:17
917
原创 Ref vs. Reactive：Vue 3 响应式变量的最佳选择指南
黄金法则基本类型 →ref对象/数组 →reactive需要替换整个对象 →ref需要解构属性 →性能关键点大型对象使用shallowRef避免在循环中创建深层 reactive批量更新使用nextTick组合函数最佳实践// 推荐：返回 ref 或 toRefs 转换// 或返回 ref 集合终极建议“在 Vue 3 项目中，我推荐使用ref 作为默认选择，仅在处理深度嵌套的对象结构时使用 reactive。这种策略简化了代码一致性，减少了 .value 使用的认知负荷，同时保持了灵活性。
2025-06-06 15:20:19
1134
原创 深度解构Vue3响应式内核：Proxy魔法与依赖追踪的极致艺术
Vue2广播风暴性能损耗全量虚拟DOM比对无关组件强制diff深层嵌套递归开销更新扩散单点变更触发全局更新组件树级联重渲染无法避免的无效计算内存占用每个属性维护Dep实例Watcher与Dep多对多关联长列表内存泄漏风险多级广播：属性变更通知所有关联 Watcher全量更新：每个 Watcher 触发组件树重新渲染无效计算：大量无关组件执行不必要的虚拟 DOM diffProxy的颠覆性意义“从。
2025-06-06 14:52:14
1027
原创 前端开发中的安全与稳定性：XSS 防御与错误边界处理
本文探讨了前端开发中提升应用安全性与稳定性的关键技术。在XSS防御方面，对比了DOMPurify（简单易用）和sanitize-html（高度可配置）两种HTML清洗方案，并介绍了Vue SSR中CSP策略的实施要点。在错误处理方面，详细解析了Vue 3错误边界组件的实现原理与使用方法，通过捕获组件错误防止应用崩溃。开发者应根据项目需求选择合适的技术方案，构建更安全稳定的前端应用。
2025-05-30 14:00:17
753
原创 开发者体验提升：打造高效愉悦的开发环境
性能监控最佳实践// 在关键操作前后添加性能标记// 复杂数据处理逻辑});// 自定义控制台分组输出console.groupCollapsed('[Performance] 数据处理指标');${// 在关键操作前后添加性能标记 function processData(data) {// 复杂数据处理逻辑 const result = data . map(item => {});
2025-05-30 11:45:05
792
原创 可视化与动画：构建沉浸式Vue应用的进阶实践
性能优化技巧：下面是完整的实现方案：02、关键性能优化实现分层渲染：批量更新：虚拟化渲染：缓存策略：GPU加速：三维编辑场景组件：WebGL优化策略：下方为完整WebGL三维视频编辑器关键特性与优化策略实现1.WebGL三维场景核心功能2.最佳实践实现3.WebGL优化策略4.用户界面亮点5.使用说明复杂动画序列管理应用示例关键优化说明1.滚动驱动动画增强：2.动画序列管理增强：3.Vue深度集成：4.性能优化：5.视觉增强：混合渲染策略动画物理引擎集成GPU加速CS
2025-05-30 11:26:30
726
原创 Vue 3前沿生态整合：WebAssembly与TypeScript深度实践
Vue 3 与 WebAssembly 结合实现前端高性能视频处理的创新方案 摘要：本文展示了 Vue 3 与 WebAssembly (Wasm) 结合处理计算密集型任务的突破性方案。通过 FFmpeg 视频转码实验对比，Wasm 方案实现了 5.6 倍速度提升、44% 内存占用降低和 35 倍主线程阻塞时间优化。文章详细剖析了核心架构设计，包括 Vue-Wasm 集成代码、Web Worker 异步处理和高效内存管理策略
2025-05-30 10:33:13
752
原创 Vue 3 源码层核心原理剖析（完整详解版）
本文深入解析了Vue 3编译器的词法分析阶段实现。编译器采用有限状态机(FSM)机制处理模板，核心流程包括：1)通过正则表达式识别模板中的标签、属性和指令；2)解析文本插值{{value}}等特殊语法；3)处理DOCTYPE、注释等特殊符号。关键实现位于/packages/compiler-core/src/parse.ts，使用正则匹配将模板拆分为Token流，为后续语法分析构建AST奠定基础。该阶段通过精确的状态转换实现对模板的首次结构化处理。
2025-05-30 09:16:56
334
原创 工程化架构设计：Monorepo 实战与现代化前端工程体系构建
本文系统介绍了企业级前端架构的进阶实践方案。在Monorepo治理方面，提出了pnpm依赖优化、增量构建和循环依赖检测方案；模块共享部分详细解析了多环境导出策略和双模式陷阱；微前端实践深度优化了qiankun的沙箱隔离和通信机制；工程化闭环设计了安全发布流水线和关键指标监控；最后展望了现代工具链迁移和微前端新范式。通过性能数据对比（如构建时间减少85%）和工具链升级建议，为企业级前端团队提供了从模块管理到微前端落地的完整解决方案，实现工程效能的显著提升。
2025-05-29 17:39:31
674
原创 前端开发中 ＜＞ 符号解析问题全解：React、Vue 与 UniApp 场景分析与解决方案
前端开发中，<>符号在JSX/TSX环境中常被误解析为标签而非运算符或泛型。主要问题场景包括：1）JSX中换行的比较运算会被解析为标签；2）TSX中泛型语法<T>会与标签冲突；3）TSX中<Type>类型断言语法不可用。解决方案包括：用括号包裹表达式、为泛型添加逗号<T,>、改用as类型断言、保持表达式同行等。Vue生态中也有类似问题，可通过括号明确优先级解决。根本原因是JSX/TSX解析器优先将<识别为标签起始符。
2025-05-29 15:55:56
650
原创 前端开源JavaScrip库
本文整理了一份全面的现代前端开发工具和技术栈清单，涵盖主流框架（Vue/React/Angular）、UI组件库（Element/Ant Design）、数据可视化（ECharts/D3）、状态管理（Redux/Vuex）、跨平台开发（Electron/React Native）等核心领域。特别收录了低代码平台（Appsmith）、微前端方案（qiankun）、性能优化工具（LazyLoad）等新兴技术，并包含丰富的辅助工具链（代码编辑器、测试框架、CSS预处理器等）该清单持续更新，为开发者提供技术选型参考
2025-05-29 15:27:33
1412
1
原创 性能优化深度实践：突破vue应用性能
本文分析了Vue框架中虚拟DOM和响应式系统的性能优化实践。通过对比Vue 2和Vue 3在10,000节点场景下的表现，Vue 3在数据更新（63%优化）和内存占用（33%降低）方面优势明显。核心差异在于响应式实现：Vue 2使用Object.defineProperty需要递归初始化，而Vue 3的Proxy实现支持按需响应和嵌套延迟代理。文中提供了完整的性能测试代码示例，展示操作耗时和内存占用的监控方法，为大型Vue应用的性能优化提供了实践参考。
2025-05-29 15:05:46
1429
原创 c#与java的相同点和不同点
C#和Java作为主流面向对象编程语言，在语法、面向对象特性、托管运行环境、异常处理等方面高度相似。两者都采用静态强类型、丰富标准库，并支持跨平台开发。关键区别在于：C#由微软主导，语言演进更快，拥有属性、事件、委托等原生语法，支持运行时泛型和值类型；而Java采用类型擦除泛型，主要依赖引用类型。C#的异步编程（async/await）和LINQ更简洁高效，Java则依赖CompletableFuture和Stream API。此外，C#支持不安全代码，Java受JVM安全模型限制。两者均有强大IDE和构建
2025-05-29 14:03:00
852
原创 对接 uniapp 通过中间层（JSBridge）集成零信任 原生androiid和ios SDK
该方案基于UniApp实现，采用分层架构设计，通过JSBridge桥接原生平台，实现80%以上代码复用。Android端使用Kotlin封装零信任管理模块，iOS端采用Swift实现零信任服务类，UniApp层提供统一JS调用接口。方案支持双向校验、证书绑定等安全增强措施，具备设备环境感知能力，平均鉴权延迟<300ms，并支持热更新策略，为移动应用提供高效、安全的多平台接入解决方案。
2025-05-26 16:18:46
947
原创 【vue】适合大型项目的封装（接口，全局字典，表格表头）
本文介绍了一套完整的前端封装方案，涵盖了接口封装、全局字典管理、通用表格组件等核心模块。接口封装通过axios实现了请求拦截、响应处理、错误统一管理等功能，业务模块API独立封装，便于维护和扩展。全局字典管理通过Vuex实现了字典数据的按需加载和自动更新，支持样式扩展和格式化显示。通用表格组件通过配置驱动，支持分页、排序、自定义渲染等复杂交互，并提供了性能优化建议。此外，文章还提出了扩展建议，如增加表格工具栏、批量操作和导出功能。这套方案经过多个项目验证，能够快速搭建CRUD界面、统一处理权限控制、实现复杂
2025-05-16 15:13:17
796
原创 【vue】封装接口，全局字典，表格表头及使用
本文介绍了在前端开发中如何通过封装提升代码质量和开发效率。首先，封装了API请求，使用axios实例统一管理请求和响应拦截器，模块化接口管理，便于在组件中调用。其次，封装了全局字典，定义常用字典数据并提供格式化方法，减少重复定义，便于维护。接着，封装了通用表格组件，通过配置式表头减少重复代码，支持自定义格式化和插槽，保持UI风格统一。最后，总结了这些封装的优势，包括统一错误处理、集中管理API、自动携带Token、避免重复定义常量、支持快速维护更新等，特别适用于中后台管理系统等场景。
2025-05-16 14:48:06
510
原创 【HarmonyOs鸿蒙】七种传参方式
在HarmonyOS应用开发中，参数传递是组件间通信和数据共享的重要机制。以下是鸿蒙（ArkUI）开发中常见的7种传参方式及其具体实现
2025-05-13 13:47:36
722
原创 JavaScript字符串本地化比较：全面掌握localeCompare方法
本文介绍 JavaScript 中 localeCompare 方法，用于本地化字符串比较。先讲功能、特性、返回值及基本用法示例，再探讨其在数组排序、自然排序和相等性检测等常规场景的应用，以及高级配置选项，如语言区域定制、选项详解和特殊字符处理等。还通过多语言表格排序和智能搜索建议排序等实战案例，展现其实际应用，并指出性能、兼容性等注意事项，最后总结其在国际化字符串比较中的强大功能及掌握关键点
2025-03-28 08:53:04
1334
1
原创 【react】类组件和函数组件的区别
本文详细描述了react中类组件和函数组件的区别，分别从八个方面详细阐述它们的区别：定义方式、状态管理、生命周期方法、性能优化、语法简洁性、Hooks的使用
2025-03-26 08:50:36
630
原创 【vue】vue + vant实现上传图片添加水印
本文详细描述了vue和vant实现图片上传水印的两个方法：使用html2canvas和使用纯canvas操作直接绘制水印文本，并使用vant的van-uploader组件中的after-read事件，在其中调用水印处理函数
2025-03-26 08:40:50
499
原创 【react】实现路由返回拦截的多种方式
本文详细介绍react路由拦截实现的多种方式 包括react router v5和react router v6两个路由版本的差别
2025-03-25 14:44:31
1427
原创 【Vue】 Vue 3 Composition API深度解析（用“乐高积木“思维重构组件逻辑）
本文详细描述了Vue 3 Composition API深度解析，Composition API 的核心优势在于逻辑关注点分离和更好的代码复用。通过将组件逻辑拆分为独立的函数单元，开发者可以像搭积木一样构建复杂应用。
2025-03-25 12:01:15
1315
原创 【react】react中的＜＞＜/＞和React Fragment的用法及区别详解
本文详细介绍了React中的空标签（即<>...</>）和Fragment，并说明空标签和Fragment是什么，为什么要使用，如何使用以及它俩之间的区别还有使用时的注意事项以及总结
2025-03-14 09:20:55
993
2
原创 【three.js】三维坐标系深度解析与工业级应用实践
本文详细介绍了三维坐标系转换的核心算法，包括世界矩阵分解和投影矩阵的逆向工程。现有的代码片段展示了如何获取物体的世界矩阵和相机的视图矩阵，并列举出案例等等
2025-03-11 13:49:44
471
1
原创 【three.js】三维交互核心技术 - 射线检测与物理级拖拽实现
本文详细讲述了射线检测的数学原理（LOD分级检测），拖拽系统及其性能优化等实际应用案例和常见问题
2025-03-11 09:14:23
1459
原创 【three.js】动画系统完全指南 - 从事件循环到工业级动画架构
本文详细阐述了动画系统中的requestAnimationFrame，还有对比setInterval，详细解释事件循环、帧率控制、Delta Time的计算，以及如何结合Three.js的Clock类。补间动画部分需要详细讲解Tween.js的每个参数，缓动函数的选择，链式动画的实现，以及内存管理的问题。
2025-03-10 17:24:02
1229
原创 git安装，配置SSH公钥(查看版本、安装路径，更新版本）git常用指令
本文详细介绍了git下载安装过程、ssh公钥配置过程，git查看安装路径，查看版本，更新版本的指令，还有git常用指令
2025-03-10 13:49:26
3923
原创 React性能优化体系（七）：WebAssembly在React生态的应用突破
本文深入探讨WebAssembly（WASM）在React生态中的革命性应用，系统解析其技术原理与实战价值。作为二进制指令格式，WASM凭借接近原生代码的性能、安全沙箱及多语言支持，为React应用突破性能瓶颈提供全新路径。文章从核心架构出发，剖析WASM与React的交互模式，包括模块化加载、内存共享及零拷贝通信等关键技术，并通过图像处理（性能提升8-12倍）、3D物理引擎等场景展示实战优化效果。针对开发全流程，详解Rust工具链配置、Webpack/Vite构建优化及Chrome混合调试方案
2025-03-07 11:42:29
973
原创 React性能优化体系（六）：从渲染到编译的全链路调优指南
本文详细讲述了react性能优化的相关内容，例如渲染性能调优、React DevTools Profiler实战、虚拟列表和懒加载、编译时优化、React Forget编译器前瞻，以及代码分割和Preact兼容方案。等等
2025-03-07 11:39:27
69
原创 React路由与数据流革命（五）：从URL到数据管道的全栈实践
本文全面解析了React Router v6的架构变革，强调了路由即组件的核心理念，并展示了动态路由的工业级实践。同时，文章探讨了数据流的新范式，包括Loader+Action模式以及SWR与React Query的数据获取机制。此外，还介绍了Server Components带来的数据革命，以及全栈博客系统的实战架构。文章还提供了避坑指南与性能优化策略，旨在帮助开发者更好地应对实际应用中的挑战。最后，文章展望了未来全栈数据流趋势，并介绍了相关代表框架的核心创新。
2025-03-07 11:08:51
1039
原创 【react】状态管理Context
本文详细介绍了Context的作用、如何创建和使用Context，包括Provider和Consumer的用法，以及useContext钩子。使用Context时的注意事项，比如性能问题，避免不必要的渲染，以及何时应该选择Context而不是其他状态管理库等等
2025-03-03 16:35:42
880
web期末大作业静态电商网站
2025-02-07
react前端面试题大全超详细答案
2025-02-07
网络：一、网络基础 二、路由协议 三、交换网络 四、信息安全技术
2024-06-11
JavaScript各种小案例，还有jQuery相关案例
2024-06-05
vue.js项目开发综合实践习题
2024-06-04
vue项目开发综合实践笔记
2024-06-04
数据结构相关知识点的思维导图
2024-06-03
vue基础知识及思维导图，安装脚手架详细过程
2024-06-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人