- 博客(23)
- 收藏
- 关注
RSS订阅原创 贫血模型、充血模型与时间旅行
贫血模型（函数式/React）食材（State）放在盘子里。菜谱（fn）写在墙上。每次做菜（更新UI），都要看一遍菜谱（执行函数），把食材重新组合一遍，得到一盘新菜（Immutable 新对象）。充血模型（MVVM）厨师（ViewModel）站在灶台前。灶台上各种锅碗瓢盆（数据）归厨师管。你想吃什么，直接告诉厨师（调用厨师自己决定怎么翻炒（修改数据），最后把菜盛出来端给你（UI自动更新）。为什么 React 倾向于贫血模型？因为它符合函数式思想：数据与行为分离，数据不可变，逻辑纯粹。
2026-03-10 16:43:00
205
原创 Vue Diff算法：从核心原理到Vue2/Vue3实现差异
Vue Diff算法深度解析：从双端Diff到快速Diff的演进 摘要：本文系统剖析Vue的Diff算法演进历程。首先阐述Diff算法必要性：通过虚拟DOM与真实DOM的差异化比对，解决频繁DOM操作带来的性能问题。重点对比Vue2双端Diff与Vue3快速Diff的核心差异：双端Diff采用四指针首尾对比策略，通过key映射表处理乱序节点；快速Diff则引入预处理优化（静态提升、补丁标记），并采用最长递增子序列算法实现最小DOM移动。文章还指出日常开发中的关键实践：合理使用key、避免跨层级移动节点、利用
2026-03-09 09:08:53
726
原创 三个前端实用工具函数：数据清洗、资源转化、模态框拖拽
本文介绍了前端开发中三个实用工具：数据净化器$purifyData、资源转换器$toBlobUrl和模态框拖拽指令v-modalDrag。$purifyData通过递归和精确类型判断移除无效参数，使API请求更干净；$toBlobUrl将远程音频转为Blob URL，解决iOS上无法拖动进度条的问题；v-modalDrag则为弹窗添加拖拽功能，提升用户体验。这些方案针对常见痛点提供了轻量级、高效的解决方法，既优化了开发效率，也改善了产品体验。
2026-03-05 15:31:51
372
原创 禁呼时间的浏览器缓存存储与恢复
摘要： 在Vue 2中实现"禁呼时间配置"功能时，由于Vue的响应式系统无法检测深层数组变化，导致页面刷新后配置丢失。本文提出三种解决方案：1）使用deep: true深度监听；2）在添加/删除方法中手动触发保存；3）通过RangePicker的@change事件捕获变化。最佳实践是组合使用这些方法，并加入防抖优化存储性能。同时，从localStorage恢复数据时需校验完整性。这些技巧可有效解决Vue 2中复杂数据结构的持久化问题。
2026-03-04 18:55:56
372
原创 拓展Ant Design的a-modal弹窗使其具备智能定位功能
智能弹窗定位技术实现 本文介绍了基于Ant Design的智能弹窗定位改造方案，通过Vue自定义指令实现弹窗智能定位功能。改造分为三个步骤：为触发按钮添加v-smart-anchor指令、为弹窗添加v-smart-modal指令，以及正确处理多按钮场景。核心实现采用ResizeObserver和getBoundingClientRect API，通过智能定位算法自动计算弹窗最佳显示位置，优先考虑下方空间，并支持边界检测和响应式更新。关键技术包括Vue自定义指令生命周期、事件委托机制和精确的空间计算策略，确保
2026-03-04 15:18:02
611
原创 解读Web Worker：让 JS 摆脱单线程束缚
Web Worker 是 HTML5 为解决 JavaScript 单线程阻塞问题引入的多线程技术。它允许在主线程外创建后台线程执行耗时任务，避免 UI 卡顿。核心特性包括：同源限制确保安全、消息传递机制隔离线程数据、无法访问 DOM 保证线程安全、需手动关闭释放资源。使用流程分为主线程创建 Worker 并通信，Worker 线程监听处理任务后返回结果。通过将计算密集型任务移至 Worker 线程，可显著提升页面响应速度和用户体验，是前端性能优化的重要工具。
2026-03-03 20:37:28
565
原创 前端跨子域通讯深度解读：跳出基础，聚焦避坑
本文深入探讨前端开发中跨子域通讯的痛点与解决方案。核心痛点在于同源策略限制与主域关联性，区别于完全跨域。文章提出三种方案：1）document.domain+iframe（简单数据传递）；2）postMessage（复杂场景通用方案）；3）共享主域Cookie（登录态同步最优解）。每种方案均附代码示例，并强调安全校验、消息格式标准化等最佳实践，帮助开发者根据场景选择最适合的跨子域通讯方式。
2026-03-03 10:51:04
815
1
原创 JSON.stringify 的隐藏陷阱：你可能正在丢失数据
JSON.stringify() 是前端开发中常用的数据转换工具，但在使用时存在几个关键问题需要注意：1) 无法处理循环引用，遇到相互引用的对象会抛出错误；2) 不支持特定数据类型（如函数、Map、Set等），会导致数据丢失；3) 会丢失对象的原型链和方法，仅保留可枚举属性。解决方案包括使用第三方库处理循环引用、通过replacer函数自定义转换规则、实现toJSON方法等。在复杂场景下，建议使用专门的序列化库来确保数据完整性。
2026-03-02 18:55:29
1279
原创 前端路由的两种模式：hash 与 history 深度解读
Vue-Router提供hash和history两种路由模式：hash模式通过监听hashchange事件实现路由切换，URL带#号，兼容性好但不够美观；history模式利用HTML5 History API实现无#号的URL，需要服务器配置支持但更符合标准。hash模式适合兼容性要求高的场景，history模式更适合追求美观URL和功能完善的现代应用。选择时需考虑浏览器兼容性、后端配置权限、URL美观度及SEO需求等因素。
2026-03-02 10:21:58
904
原创 Cannot read properties of null报错带来渲染时机启示
摘要：Vue 渲染机制下的边界 Bug 分析与修复 本文记录了一个典型的 Vue 边界状态 Bug：用户退出登录时控制台报空值错误。通过排查发现，问题源于 Ant Design Vue 的 Popconfirm 组件重绘与 Vuex 数据清空操作在同一个事件循环中竞争执行。深入分析揭示了 Vue 异步更新队列与组件生命周期的交互机制：Popconfirm 的隐藏重绘和数据清空引发的视图更新交错执行，导致组件在渲染时读取到已被置空的用户信息。最终采用组合方案修复：模板添加空值保护（v-if），并在 logou
2026-03-01 13:11:34
1081
原创 从即时通讯的自动滚动需求，彻底搞懂Vue的nextTick 原理
摘要：本文通过即时通讯项目中自动滚动消息列表的需求，深入解析Vue的nextTick机制。文章阐述了nextTick的作用是确保DOM更新后执行回调，避免直接操作DOM获取旧值的问题。详细讲解了其实现原理基于事件循环和微任务机制，并列举了获取元素尺寸、集成第三方库等常见应用场景。同时介绍了window.scrollTo的高级用法和平滑滚动实现，以及在Vue3 Composition API中的使用方式。通过这个案例，揭示了Vue异步更新队列的核心机制。（149字）
2026-03-01 09:12:56
1159
原创 从一次复选框报错，彻底搞懂React受控组件
React受控组件问题解析与解决方案 本文通过一个todoList项目中的复选框报错案例，深入分析了React受控组件的工作原理。当开发者给复选框设置checked属性但未提供onChange处理函数时，React会抛出"只读字段"警告。文章详细对比了受控组件（由React state管理）与非受控组件（由DOM管理）的区别，并提出了三种解决方案：添加onChange处理函数、改用defaultChecked或添加readOnly属性。最终采用受控组件方案，通过本地state管理复选框状
2026-02-28 19:23:12
594
原创 Js中哪些方法不会改变原数组
本文总结了JavaScript数组方法的分类与特性。变更方法会修改原数组，包括增删元素（如push()、splice()）、顺序调整（sort()、reverse()）和填充复制（fill()）。非变更方法返回新数组或值而不改变原数组，涵盖拼接截取（concat()、slice()）、转换连接（join()）以及查找遍历（find()、map()）。特别说明了字符串split()方法的使用技巧，包括处理连续分隔符和正则分割的场景。通过对比两类方法的操作特性，帮助开发者根据需求选择合适方法，避免意外修改原数组
2026-02-28 09:25:17
405
原创 前端在浏览器存储的两种方式
HTML5提供了两种客户端存储方式：localStorage用于永久存储数据（同源窗口共享，约5MB容量），sessionStorage用于临时会话存储（标签页关闭即清除）。两者支持setItem()/getItem()等基本操作，仅能存储字符串，对象需JSON转换。localStorage适合长期保存用户偏好，sessionStorage适用于临时数据。注意存储容量限制，避免保存敏感信息，且操作是同步的。
2026-02-27 14:02:31
256
原创 Js中的this指向和改变this指向
JavaScript中函数this指向规则总结： 普通函数的this由调用方式决定，默认指向window，对象方法中指向调用对象； 箭头函数没有自己的this，继承外层作用域的this值； 可通过call/apply/bind方法改变普通函数的this指向： call立即执行，参数逐个传入 apply立即执行，参数数组传入 bind返回新函数，可延迟执行 注意：DOM事件和原型方法不建议使用箭头函数，因其this会指向全局对象。
2026-02-27 13:58:43
284
原创 Js中的逻辑中断详解
JavaScript中的逻辑中断（短路求值）指&&和||运算符在确定结果后立即停止执行的特性。&&在第一个值为假时返回该值，否则返回第二个值；||在第一个值为真时返回该值，否则返回第二个值。该特性常用于条件执行、设置默认值和安全访问嵌套属性等场景。虽然ES6+引入了可选链?.和空值合并??等替代方案，但理解逻辑中断对处理遗留代码和深入掌握JavaScript原理仍很重要。使用时需注意副作用、返回值类型和运算符优先级等问题。
2026-02-25 18:30:00
657
原创 为什么foreach里面为什么不能放promise
摘要： forEach 是同步执行的，无法正确处理内部的 Promise 或 async/await 操作。它不会等待异步任务完成，导致所有任务同时触发但无法获取结果或控制顺序。此外，forEach 中的异步错误无法被外层 try...catch 捕获，且存在 this 绑定问题。推荐使用 for...of（顺序执行）或 Promise.all + map（并行执行）替代。
2026-02-25 14:07:34
708
原创 css的媒体查询详解及其常用方法
摘要：媒体查询是响应式设计的核心技术，允许根据设备特性（如屏幕宽度、方向等）应用不同的CSS样式。其语法为@media 媒体类型 and (媒体特性){样式规则}，常用媒体类型包括screen、print等，特性包括min-width、orientation等。通过设置断点（如768px）实现布局适配，支持and/or/not逻辑组合。媒体查询能提升多设备兼容性、开发效率和用户体验，建议根据实际布局需求自定义断点而非完全依赖通用值。（149字）
2026-02-24 23:59:16
409
原创 父级设置特定属性会导致position: fixed的定位基准改变
CSS中，position: fixed默认相对于视口定位，但当父级设置transform、perspective、filter或backdrop-filter属性时，会创建新的包含块，导致子元素的fixed定位基准变为该父级。这是因为这些属性会触发浏览器创建独立的渲染层，隔离坐标系以优化渲染性能或确保视觉效果。解决方法包括将元素直接放在body下或移除父级的这些属性。核心机制是浏览器为特定属性生成独立坐标系，使fixed定位被限制在父级层内。
2026-02-24 14:29:17
916
原创 Vue中的Teleport组件详解和应用场景
Vue的Teleport组件用于将模板内容渲染到DOM任意位置，类似React的createPortal。它通过to属性指定目标位置（CSS选择器或DOM节点），保持组件逻辑上下文不变，仅改变DOM挂载位置。常用于弹窗、全局提示等需要脱离当前DOM层级的场景。相比position:fixed方案，Teleport能避免CSS上下文影响导致的定位问题，推荐优先使用。示例展示了如何用Teleport实现稳定定位的模态框，直接挂载到body元素，不受父级定位样式干扰。
2026-02-23 19:53:21
1062
原创 vue中template标签的作用及为什么不能使用v-show
Vue中的<template>标签在编译时会被完全剥离，不会出现在最终DOM中。它主要用于逻辑分组元素、配合条件/列表渲染以及定义插槽。由于v-show需要操作真实DOM元素的display属性，而<template>在运行时不存在，因此不能使用v-show。解决方案是改用v-if（推荐）或用真实元素包裹后使用v-show。
2026-02-23 10:12:51
930
原创 前端常用字符串/数组操作（含相关手撕）
摘要：本文详细介绍了JavaScript中字符串与数组的相互转换方法。字符串转数组主要使用split()、Array.from()、扩展运算符和Object.assign()等方法；数组转字符串则常用join()、toString()、JSON.stringify()等。文章还列举了数组和字符串的常用操作方法，包括查找、修改、遍历等，并提供了实际应用示例，如字符串反转、URL参数处理等。最后总结了各类方法的特点和使用场景，为开发者提供了全面的参考指南。
2026-02-22 14:14:12
1219
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人