- 博客(191)
- 收藏
- 关注
RSS订阅原创 组件测试--React Testing Library的学习
本文介绍了使用Jest和React Testing Library对React Button组件进行单元测试的实践。测试内容包括：基础渲染验证、参数化测试不同按钮类型和尺寸、状态测试（禁用和加载）、图标按钮测试以及交互测试（点击事件）。通过制定明确的测试策略，采用自动化测试方法确保组件质量，验证了样式变化、状态管理、交互行为和无障碍支持等功能。测试工具配置简单，测试用例覆盖全面，能够有效保障代码稳定性和开发敏捷性，支持持续集成流程。
2025-12-11 15:13:17
966
原创 langchain学习-RAG+prompt+OutPutParse
本文介绍了大模型(LLM)面临的两大挑战（幻觉问题和知识欠缺）及解决方案RAG（检索增强生成）技术。RAG通过外部知识库检索、增强提示和生成回答三个步骤，有效提升大模型的回答准确性。文章详细讲解了RAG应用的构建流程，包括数据加载、切分、嵌入、存储和检索生成等步骤。此外，还介绍了Prompt模板的构建方法（无变量、单变量、动态变量）和角色系统设计，以及三种输出解析器（String、Structured、List）的使用场景和示例代码。这些技术组合能够显著提升大模型应用的可靠性和可用性。
2025-11-17 21:55:54
663
原创 规范代码-biome
Biome是一款基于Rust开发的高性能前端工具链，整合了代码格式化、检查、导入整理等功能。相比传统的ESLint+Prettier组合，Biome具备10-20倍的性能优势，开箱即用且高度可定制。文章详细介绍了Biome的项目配置方法、常用命令快捷键，并通过代码示例展示了其格式化、代码检查和导入整理的实际效果。Biome能与dongting-cli和Git Hooks等工具无缝集成，为前端开发提供了一体化的代码质量保障方案。
2025-11-17 16:13:29
337
原创 LangChain 学习
LangChain 入门实践 本文记录了使用阿里云大模型和LangChain框架的初次尝试。主要内容包括： 环境配置：通过.env管理敏感信息，设置阿里云API Key和baseURL 核心组件：使用OpenAI类和StringOutputParser处理模型响应 完整流程：展示了消息准备、API调用、响应解析的完整示例 实际应用：实现了与通义千问大模型的交互，获取模型自我介绍 示例代码完整展示了如何将LangChain工具链与阿里云大模型服务结合使用，为开发者提供了清晰的实现路径。
2025-11-16 20:21:12
212
原创 React + ECharts 实践：构建可交互的数据可视化组件
本文介绍了基于React和ECharts封装可复用图表组件的实践经验。通过搭建通用图表容器，实现了折线图、柱状图等不同类型图表的动态渲染。重点讲解了图表生命周期管理（初始化/销毁实例）、响应式设计（窗口变化处理）、数据驱动更新机制、视觉定制（渐变色/动画效果）等核心实现方案。文章还分享了动态Y轴范围计算、标签格式化等实用技巧，为构建交互式数据可视化组件提供了完整的技术思路。
2025-11-16 16:40:50
450
原创 git命令的规范
规范化的Git提交信息格式（如Angular规范）可带来三大优势：提供清晰历史信息、支持提交筛选和自动生成变更日志。提交信息应包含Header（必需）、Body和Footer（可选），其中Header格式为<type>(<scope>): <subject>，限定7种提交类型（如feat/fix/docs）。Body需详细说明变更动机，Footer用于重大变更或关联Issue。特殊场景如撤销提交需注明revert:前缀。建议每行不超过72字符以保证可读性，这种规范化实践对
2025-11-02 19:20:04
412
原创 输出---修改ant样式
本文介绍了在Ant Design框架中修改样式的实践方法。作者通过日期选择器实例分享了具体步骤：先在文档中查找样式类位置，通过开发者工具找到对应样式，然后使用CSS in JS语法进行样式覆盖。文章提供了RangePicker和Dropdown组件的代码示例，展示了如何通过dropdownClassName和overlayClassName属性添加自定义样式，并强调了需要注意样式层级和优先级的问题。最后提到可以将元素和样式交给AI辅助修改的实用技巧。
2025-10-20 10:44:15
320
原创 构建一个属于组件的组件库
本文介绍了如何构建一个React组件库的完整流程。首先配置package.json设置多格式输出、构建脚本和依赖关系；然后创建ES模块配置和Webpack构建配置；接着安装依赖并执行构建命令；最后通过npm pack生成可安装包。组件库支持CommonJS和ES模块两种格式，并配置了外部依赖以避免重复打包。使用时只需安装tgz包并导入组件即可。更新版本时需重新构建打包并安装新版本。整个流程涵盖了从配置、构建到使用的完整组件库开发周期。
2025-10-10 14:29:23
244
原创 实现一个mini-vue3
摘要：实现一个mini-vue3的核心机制 本文介绍了mini-vue3的核心实现，包括响应式系统、虚拟DOM和组件渲染机制。响应式系统通过Proxy拦截对象操作，结合依赖收集(Dep类)和触发机制，使用WeakMap建立三层映射结构高效管理依赖关系。渲染系统采用虚拟DOM优化性能，通过createApp创建应用实例，setup函数管理状态，render函数基于虚拟DOM描述视图结构。整个系统实现了数据变化时自动更新视图的效果，同时避免了频繁的DOM操作，为前端开发提供了高效的响应式编程体验。
2025-09-30 08:30:44
575
原创 Vue Router 原理解析加手写
Vue Router 原理与实现 前端路由实现SPA无刷新页面跳转，核心是URL与UI的映射。两种原生实现方式： hash模式：通过hashchange监听URL变化，不会引起页面刷新 history模式：利用pushState/replaceState和popstate事件 Vue3实现路由类需包含： 路由映射表 响应式当前路径 历史管理API 事件监听 关键组件： RouterLink：处理路由跳转 RouterView：动态渲染对应组件 实现要点： 通过Map存储路由配置 使用Vue响应式系统跟踪路径
2025-09-18 15:34:28
952
原创 力扣面试150(69/150)
本文讨论了LeetCode 236题"二叉树的最近公共祖先"的解法。通过深度优先遍历递归查找两个目标节点p和q，当当前节点是p/q或null时返回该节点。若左右子树都找到目标则返回当前根节点作为祖先，否则返回非空的一侧。最初代码比较节点值而非节点对象导致返回null，修正后正确比较节点引用即可。该算法时间复杂度O(n)，空间复杂度O(h)，其中h为树高。关键点在于递归终止条件和左右子树结果的组合判断。
2025-09-01 11:12:02
259
原创 力扣面试150(68/100)
这篇文章介绍了计算完全二叉树节点数的高效算法。算法核心是利用完全二叉树的性质：通过比较左右子树高度快速判断是否为满二叉树。若高度相同，直接使用公式2^h-1计算节点数；否则递归计算左右子树节点数之和加1。这种方法避免了不必要的递归遍历，时间复杂度优化为O(log^2 N)。代码实现简洁，通过左右深度比较和递归调用，有效结合了数学公式和分治策略。
2025-08-31 11:01:13
284
原创 力扣面试150(67/150)
本文实现了一个二叉搜索树迭代器，采用中序遍历预计算策略。初始化时通过递归中序遍历将节点值存入数组，next()方法返回数组首元素并移除，hasNext()判断数组是否为空。这种方法保证了next()和hasNext()操作的高效性（O(1)时间复杂度），但初始化时需要O(n)时间进行完整遍历。空间复杂度为O(n)用于存储所有节点值。适用于需要频繁查询但树结构不变的情况。
2025-08-29 10:33:35
187
原创 力扣面试150(66/150)
本文介绍了一个计算二叉树根节点到所有叶节点路径数字之和的算法。采用深度优先搜索策略，在递归过程中维护从根到当前节点的路径数值（prevSum*10 + node.val）。遇到叶子节点时直接返回路径值，非叶子节点则递归处理左右子树并求和。算法时间复杂度为O(n)，空间复杂度为O(h)，其中n为节点数，h为树高。该解法通过递归高效地实现了路径数值的累加，适用于所有合法二叉树输入。
2025-08-28 08:31:41
251
原创 力扣面试150(65/150)
本文介绍了LeetCode 112题"路径总和"的解法。该题要求判断二叉树中是否存在根到叶子的路径，其节点值之和等于目标值。作者采用深度优先遍历的递归解法，通过减法实现路径和计算：每次访问节点时用目标值减去节点值，到达叶子节点时判断剩余值是否为零。关键点在于正确处理递归终止条件（叶子节点判断）和左右子树的或运算返回。该算法时间复杂度为O(n)，空间复杂度为O(h)，其中h为树高，能高效解决问题。
2025-08-27 10:40:14
176
原创 力扣面试150(64/150)
本文介绍了将二叉树原地展开为链表的算法。通过使用栈结构和前驱指针，代码实现了先序遍历的迭代版本：每次处理当前节点时，将前驱节点的右指针指向当前节点，左指针置空。关键点在于栈的压入顺序（先右后左）保证了正确的遍历顺序。该算法满足题目要求的原地修改和先序遍历顺序，时间复杂度O(n)，空间复杂度O(n)。
2025-08-26 09:09:55
295
原创 力扣面试150(63/150)
本文介绍了一种使用BFS层次遍历方法连接二叉树节点next指针的解决方案。算法通过队列逐层处理节点，将每层节点的next指针指向右侧相邻节点。代码实现中，使用数组模拟队列，先处理当前层节点并连接next指针，同时将下一层节点入队。该方法时间复杂度为O(n)，空间复杂度为O(n)，能够正确处理任意形状的二叉树，确保每层节点的next指针正确指向右侧节点或NULL。该解法思路清晰，适用于处理不完美二叉树的情况。
2025-08-22 16:15:00
205
原创 力扣面试150(62/150)
这道题目要求根据二叉树的中序和后序遍历结果重建二叉树。关键在于利用后序遍历的最后一个元素确定根节点，然后在中序遍历中找到该节点位置以划分左右子树。通过递归处理左右子树对应的中序和后序子数组，最终构建完整二叉树。代码修正了之前的分割错误，确保递归正确终止，时间复杂度为O(n)，空间复杂度为O(n)。该解法体现了分治思想在树结构重建中的典型应用。
2025-08-21 12:09:20
276
原创 力扣面试150(61/100)
本文介绍了根据前序和中序遍历序列重建二叉树的递归解法。关键思路是利用前序遍历确定根节点，通过中序遍历划分左右子树。算法步骤如下：1)前序首元素为根节点；2)在中序中找到根节点位置，划分左右子树；3)递归处理左右子树。该方法时间复杂度为O(n)，空间复杂度O(n)，体现了分治思想，通过不断划分子问题最终构建完整二叉树。需要特别注意数组切分的边界条件。
2025-08-20 16:27:00
278
原创 力扣面试150(60/150)
本文介绍了一种使用BFS层次遍历判断二叉树是否对称的算法。算法通过队列同时比较左右子树，将对应节点成对入队：每次取出两个节点，若都为空则继续；若一个为空或值不等则返回false；否则将左右子节点按相反顺序入队（左左与右右、左右与右左）。最终所有节点都满足对称条件时返回true。该方法时间复杂度为O(n)，空间复杂度为O(n)，能有效检测二叉树的对称性。
2025-08-19 15:11:07
195
原创 力扣面试150(58/150)
本文介绍了一种翻转二叉树的递归解法。通过后序遍历的方式，先递归处理左右子树，再交换当前节点的左右孩子。算法时间复杂度为O(n)，空间复杂度为O(h)，其中h为树的高度。代码简洁明了，适用于任意结构的二叉树翻转。
2025-08-17 09:20:14
519
原创 力扣面试150(57/100)
本文通过递归方法判断两棵二叉树是否相同。算法核心是：若两节点均为空则返回true；若仅一个为空则返回false；若节点值不同则返回false；否则递归比较左右子树。只有当所有对应节点结构和值都相同时才返回true。该方法简洁高效，时间复杂度O(n)，空间复杂度O(h)，其中n为节点数，h为树高。代码实现清晰体现了递归思想，通过逐层比较确保两棵树完全一致。
2025-08-16 10:22:33
247
原创 力扣面试150(56/150)
本文介绍了如何用递归方法求解二叉树的最大深度。对于给定的二叉树，当节点为空时返回深度0；否则递归计算左右子树的最大深度，取较大值加1作为当前节点的深度。这种方法通过深度优先遍历，从叶子节点开始逐层向上累加，最终得到整棵树的最大深度。算法时间复杂度为O(n)，空间复杂度为O(h)，其中h为树的高度。这是二叉树深度计算的经典递归解法。
2025-08-14 10:35:04
190
原创 力扣面试150(55/150)
本文实现了一个LRU缓存机制，使用Map数据结构存储键值对并维护访问顺序。核心思路是：get操作时若key存在则先删除再重新插入以更新访问顺序；put操作时若key已存在则更新顺序，若不存在且缓存已满则删除Map中最久未使用的项（第一个键）。通过Map的有序特性实现了O(1)时间复杂度的get和put操作，确保缓存容量不超过设定值时自动淘汰最久未使用的数据。这种实现方式简洁高效地满足了LRU缓存的基本要求。
2025-08-13 09:19:42
415
原创 力扣面试150(54/150)
本文解决了LeetCode 86题"分隔链表"问题。算法通过维护两个子链表（minHead和maxHead）来分别存储小于x和大于等于x的节点。遍历原链表时，根据节点值将其添加到对应子链表末尾，保持原始相对顺序。最后合并两个子链表，若无小于x的节点则直接返回maxHead。该方法时间复杂度O(n)，空间复杂度O(1)，关键点在于正确处理两个子链表的头指针和尾指针更新，以及处理各种边界情况如空链表或全大/全小链表。代码中特别处理了链表尾部的null终止，确保结果正确。
2025-08-12 09:57:28
383
原创 力扣面试150(53/150)
摘要： 本文介绍了一个高效旋转链表的算法解决方案。算法首先计算链表长度，通过取模运算确定实际旋转步数。关键步骤包括：找到新头节点的前驱节点，断开链表并重新连接形成旋转后的结构。该方法时间复杂度O(n)，空间复杂度O(1)，通过"先成环再断开"的思路优雅地解决了链表旋转问题。代码实现简洁，正确处理了边界条件，如空链表或零旋转的情况。
2025-08-11 11:53:40
310
原创 力扣面试150(52/150)
本文探讨了如何删除已排序链表中所有重复数字的节点。通过引入虚拟头节点dummy，使用carry指针遍历链表。当发现重复节点时，记录重复值并跳过所有该值节点；否则正常后移指针。关键点在于通过dummy.next始终指向处理后的链表头，确保原始头节点被删除时仍能正确返回。该方法有效解决了删除全部重复元素的问题，时间复杂度为O(n)。
2025-08-10 10:26:23
394
原创 力扣面试150(51/100)
摘要： 本文介绍了删除链表倒数第N个节点的解法。通过引入虚拟头节点统一处理所有情况，避免了单独判断头节点的删除。算法分为两步：1) 遍历链表计算长度；2) 二次遍历定位到目标节点的前驱节点进行删除。关键点在于使用虚拟头节点简化逻辑，使删除头节点、中间节点和尾节点的操作一致，提升代码简洁性。时间复杂度O(L)（L为链表长度），空间复杂度O(1)。
2025-08-09 12:18:08
196
原创 力扣面试150(50/150)
这篇文章介绍了如何实现链表部分反转（LeetCode 92题）。主要思路是：1）创建虚拟头节点处理边界情况；2）定位要反转区间的前驱节点、头节点和尾节点；3）切断子链表并进行反转；4）将反转后的子链表重新拼接回原链表。关键步骤包括：精确指针定位、独立反转子链表、前后节点重新连接。该方法通过虚拟头节点统一处理各种情况，确保逻辑清晰健壮，是一个经典的链表操作范例。最终返回虚拟头节点的next即得到完整结果。
2025-08-08 11:10:31
312
原创 力扣面试150(49/150)
摘要：本文讨论了如何实现带有随机指针的链表深拷贝问题。通过使用Map存储新旧节点映射关系，先创建新节点复制原节点值，再遍历原链表为新节点设置正确的next和random指针（需处理null情况）。该方法确保了新链表与原链表结构相同但完全独立，时间复杂度为O(n)，空间复杂度为O(n)。关键点在于通过映射关系正确建立新节点间的连接，而非直接复制原指针。
2025-08-07 11:37:04
333
原创 高阶组件实现Button权限
本文介绍了一种基于React高阶组件(HOC)的按钮级权限控制实现方案。通过withPermissons高阶组件，开发者可以定义需要特定权限才能显示的按钮组件。该方案接收所需权限数组和用户权限数组作为参数，在组件内部进行权限校验，仅当用户拥有全部所需权限时才渲染按钮。代码展示了高阶组件的实现细节，包括权限检查逻辑和组件封装方式，并提供了实际应用示例。最后通过两张图片展示了权限控制效果。
2025-08-06 17:21:13
303
原创 基于AntDesign二次封装table组件
本文介绍了基于AntDesign的二次封装Table组件开发过程。该组件主要实现数据展示、批量删除、单条删除、Excel导出、编辑和添加等功能。首先定义了详细的类型系统，包括表格配置类型、组件属性类型和引用类型；其次通过状态管理维护表格数据、分页、选择状态等；核心功能包括数据加载、分页处理和行选择配置；并实现了删除等扩展功能。组件设计注重可配置性和扩展性，支持多种业务场景需求，通过类型定义和状态管理确保代码健壮性，同时提供与父组件的通信机制。
2025-08-06 15:31:05
1159
原创 力扣面试150(48/150)
本文介绍了一种合并两个有序链表的方法。通过创建一个哑节点作为新链表的起始点，使用指针遍历两个链表，比较节点值大小，将较小值节点依次连接到新链表。当某个链表遍历完后，直接将剩余节点连接到新链表末尾。关键点在于：1)使用哑节点简化操作；2)正确移动链表指针；3)处理剩余节点时也要移动新链表的指针。该方法高效地实现了有序链表的合并，时间复杂度为O(n+m)，空间复杂度为O(1)。
2025-08-06 12:23:25
194
原创 力扣面试150(47/100)
该题目要求实现两个逆序存储数字的链表相加。解题思路是新建链表模拟加法运算，逐位处理两个链表的节点值及进位。关键点在于：使用临时链表存储结果，处理不同长度链表的情况，以及最后的进位处理。算法从最低位开始相加，计算当前位和进位，将结果存入新链表。当遍历完较长链表后，若仍有进位则需额外添加节点。最终返回的链表即为两数之和的逆序表示。时间复杂度O(max(m,n))，空间复杂度O(max(m,n))。
2025-08-05 14:16:02
301
原创 力扣面试150(46/150)
摘要：本文介绍了使用快慢指针法检测链表是否有环。在JavaScript中通过对象模拟链表结构，定义快慢两个指针，快指针每次走两步，慢指针走一步。如果存在环，快指针最终会追上慢指针；若无环则快指针会到达链表末尾。该方法时间复杂度O(n)，空间复杂度O(1)，是一种高效的环检测算法。
2025-08-01 12:15:19
207
原创 力扣面试150(45/150)
这段代码实现了逆波兰表达式求值功能。采用栈结构处理，遇到数字入栈，遇到运算符则弹出栈顶两个数字进行相应运算，注意减法和除法的顺序（后弹出数操作前弹出数），除法结果使用Math.trunc取整。运算结果重新入栈，最终栈中剩余的唯一数字即为表达式结果。该解法有效利用了栈的先进后出特性，正确实现了逆波兰表达式的计算逻辑。
2025-07-31 14:15:25
181
原创 力扣面试150(44/150)
本文实现了一个能在O(1)时间内获取最小值的栈结构。通过维护两个栈：主栈存储元素，辅助栈存储每个状态下的最小值。每次push操作时，辅助栈会存入当前元素与栈顶最小值中的较小者；pop操作同步移除两个栈的栈顶元素。这样，辅助栈顶始终保存当前栈的最小值，使得getMin操作可直接返回。该方法保证了所有栈操作的时间复杂度均为常数级，空间复杂度为O(n)。关键点在于辅助栈与主栈的同步维护，确保最小值的动态更新。
2025-07-30 13:50:22
348
原创 力扣面试150(43/150)
该题目要求将Unix风格的绝对路径简化为规范路径。解题思路是分割路径字符串，用栈结构处理目录操作：遇到空或'.'跳过，遇到'..'弹出栈顶目录（若栈非空），其他有效目录压入栈。关键点包括处理连续斜杠、目录分隔符和边界条件（如根目录回退）。最终通过栈构建规范路径，确保格式正确。算法时间复杂度O(n)，空间复杂度O(n)，能有效处理各种路径情况。
2025-07-29 13:28:22
380
原创 力扣面试150(42/150)
本文介绍了使用栈结构验证括号字符串有效性的算法。通过维护一个栈来处理括号匹配问题，遇到左括号压栈，遇到右括号则检查栈顶是否匹配。算法首先排除长度为奇数的情况，然后遍历字符串：左括号入栈，右括号则与栈顶匹配，不匹配或栈空即返回false。最终栈为空则字符串有效。时间复杂度O(n)，空间复杂度O(n)，是一种高效解决括号匹配问题的典型方法。
2025-07-28 10:29:12
300
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人