- 博客(183)
- 收藏
- 关注
RSS订阅原创 解锁 JavaScript 模块的秘密：ES6模块内部结构详解
项目说明模块对象import * as mod 获取到的对象，包含所有导出成员模块级元信息，如 URL、环境变量等导入的是绑定引用，值是“活的”，会跟随原模块更新默认导出对应 mod.default 属性动态导入与懒加载使用 import() 动态加载模块顶层 await在模块最外层使用 await，更灵活地处理异步逻辑。
2025-07-30 14:14:16
639
原创 vue 不完美的多标签页解决方案
不使用KeepAlive，通过监听route，变化后就向list中添加达到打开标签页的功能，渲染list中的所有组件，然后为了让组件数据缓存下来，不能使用v-if而是使用v-show来隐藏组件。会发现，虽然是同一个组件，但生命周期也独立了，也就不需要考虑路由参数变化时重新获取数据，只需要在onMounted时获取一次数据就可以了。这下问题麻烦了，虽然使用不同的key多开了路由，但路由的组件名称是相同的，也就是说，就算能多开了，关闭却只能全部关闭，这种是不行的。
2025-07-30 12:00:28
973
原创 在SqlSugar的开发框架的Vue3+ElementPlus前端中增加对报表模块的封装处理，实现常规报表的快速处理
在我们开发业务系统的时候，往往都需要一些数据报表进行统计查看，本篇内容介绍如何在实际的前端中对报表内容进行的一些封装操作，以便提高报表模块开发的效率，报表模块的展示主要是结合Vue3中比较广泛使用的echarts图表组件进行展示。在前端界面开发中，良好的组件封装和使用，可以给我们提供更好的开发效率，因此为了业务的快速开发，我们不仅在代码生成代码的方面持续优化，也在一些前端页面的开发中，提取一些常用的场景组件，最大化的实现代码的快速开发。对于数据的处理，我们通过接口动态获取图表统计的data数据，如下所示。
2025-07-30 11:56:15
333
原创 JavaScript cookie 有大小限制吗？溢出会怎样？
根据测试结果可以得出：在使用 Cookie 时只建议用于存入关键数据，而不是用来做相关缓存！
2025-07-30 11:42:31
469
原创 Vue和React的数据流之争：双向绑定 vs 单向数据流，谁更适合你？
我在模板里改myName，数据自动更新；JS里修改myName，输入框内容也跟着变。双向同步，就像照镜子。双向绑定像自动驾驶——省心但要把控权交给框架；单向流像手动挡——更可控但也更费神。当你追求开发速度时，选Vue；当你需要绝对控制时，选React。当然，最厉害的开发者应该两种都掌握，就像老司机既能开自动挡也能玩手动挡。
2025-07-29 11:35:18
464
原创 前端权限控制实战：手把手教你玩转角色权限分配
权限控制就像给系统穿上合身的衣服 - 不能太紧影响活动，也不能太松走光。找到适合项目的平衡点很重要。希望我的这些经验能帮你少走弯路！
2025-07-29 11:29:29
377
原创 用户登录成功后，判断用户在10分钟内有没有操作，无操作自动退出登录怎么实现？
1️⃣ 在 main.js 中调用 app.use(AutoLogoutPlugin, { timeout: 10 })2️⃣ 插件的 install() 被执行，获取到 timeout 值3️⃣ 使用 app.mixin() 向所有组件中注入一段逻辑4️⃣ 每个组件在 setup() 阶段自动调用 useAutoLogout(timeout)5️⃣ 每个组件都注册了全局事件监听器，并设置了登出定时器 ✅ 这样一来，所有组件页面都拥有了自动登出功能，不需要你手动去每个页面加代码。
2025-07-24 14:29:26
937
原创 为什么我讨厌 React 的 useEffect？一篇让无数开发者共鸣的爆款吐槽！
• 自定义 Hook：把复杂副作用封装起来，减少重复代码• Zustand、Jotai 等状态管理库：弱化 useEffect 的存在感• React 18 的 useSyncExternalStore、useEvent 等新 API，尝试让副作用更结构化不是说 useEffect 一无是处。对于简单的副作用，比如页面加载数据、简单的事件监听，它还是很好用的。• 拆分副作用，减少 useEffect 的“胖钩子”• 多用自定义 Hook，复用逻辑。
2025-07-24 14:15:25
292
原创 使用JWT实现登录鉴权：从原理到实践
大家好！今天我们来聊聊现代Web开发中非常常见的登录鉴权方案——JWT（JSON Web Token）。作为一个开发者，我们几乎每天都要和用户认证打交道，而JWT提供了一种简洁高效的解决方案。JWT为我们提供了一种简洁、自包含的认证方案，特别适合分布式系统和前后端分离架构。通过zustand管理全局状态，结合JWT实现认证，我们可以构建出既安全又用户友好的应用。希望这篇文章能帮助你理解JWT的工作原理和实现方式。如果你有任何问题或建议，欢迎在评论区留言讨论！
2025-07-24 12:23:08
963
原创 我为什么在团队里，强制要求大家用pnpm而不是npm？
它的安装速度，尤其是在有缓存的情况下，或者在安装一个已经存在于全局仓库里的包时，几乎是“秒级”的。pnpm的全称是“performant npm”，意为“高性能的npm”。在一个团队里，工具的统一，是为了保证环境的一致性和协作的顺畅。而pnpm，在我看来，就是当前这个时代下，包管理工具的“最优解”。因为大部分依赖都是通过“链接”的方式实现的，而不是“复制”，所以pnpm在安装依赖时，大大减少了磁盘I/O操作。所以，这个“强制”，不是为了搞独裁，而是为了从根本上提升我们整个团队的开发效率和项目的长期稳定性。
2025-07-24 12:10:05
661
原创 Js也能写外挂？5 行 代码改掉《植物大战僵尸》的阳光值！
通过，即使是纯前端背景的开发者也可以轻松进入内存脚本开发的世界。利用现代 JS 工具链，我们可以封装一个安全、可维护的辅助工具。memoryjs。
2025-07-23 11:59:32
375
原创 前端权限系统怎么做才不会写吐？我们项目踩过的 3 套失败方案总结
上线前两个月，我们的权限系统崩了三次。于是，我们老老实实把整个权限体系拆了重构，从接口到路由、到组件、到 v-permission 指令，走了一遍完整的流程。这篇文章不讲理论，
2025-07-23 11:49:55
825
原创 面试官：如何解决按钮重复点击？这个问题挂了80%的人！
还记得上周我们团队在招聘前端工程师，一个看起来经验丰富的候选人坐在我对面。"你们项目中是如何处理按钮重复点击的问题的？"我抛出了这个看似简单的问题。"这个简单，使用防抖就可以了。"他很快回答。然而，当我继续追问细节时，他却陷入了沉思...实际上，这个问题看似简单，但是要真正的解决好，需要考虑很多细节。在我面试了很多候选人中，能完整答出来的不到20%。
2025-07-21 16:54:03
337
原创 1.3W字详解大厂经典面试题：输入URL回车之后发生了什么？
从输入URL回车，到页面显示”这一全过程，我在讲述浏览器生命周期时粗略地称其为“无状态”=>ACTIVE状态，但是这不是很准确。导航阶段（从输入URL到获取资源）输入URL并解析查找缓存DNS查询建立TCP连接（三次握手）发送HTTP请求处理服务器返回的响应报文渲染阶段（渲染页面，超重要！！！解析并渲染页面收尾工作关闭TCP连接（四次挥手）相信看完之后，你对计网相关的知识有了新的认识。如果帮到了你，那么我不胜荣幸1。
2025-07-21 16:50:00
654
原创 前端架构师都在用的目录生成神器：mkfolder 全面解析
template><% } %>-- 操作列 --><el-table-column label="操作"><el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button><% } %>},
2025-07-21 16:28:34
628
原创 Vite背后的技术原理：为什么选择Vite作为你的前端构建工具
vite和webpack一样都是一个构建工具，是一个可以让我们不用关心代码是如何在浏览器中运行的一个工具，构建工具帮我们解决了所有生产环境会遇到的问题，里面对一些处理工具进行了集成，我们只需要给构建工具提供配置一个文件即可帮助我们完成很多复杂的操作。市面上主流的构建工具有webpack、vite、esbuild、rollup、gulp等。
2025-07-18 11:37:04
564
原创 HTTP 进化史：从 1.0 到 3.0
HTTP/1.0 短连接 单车道 堵车HTTP/1.1 长连接 6 车道 顺序放行HTTP/2 单 TCP 多车道 无顺序HTTP/3 单 QUIC 多车道 无顺序 + 丢包不堵车如何让数据更快、更稳、更安全地到达用户。
2025-07-18 11:31:08
381
原创 React幽灵节点：＜＞＜/＞ Fragment如何拯救你的DOM树？
是什么 ：<></>是React.Fragment的语法糖，一个不渲染实际DOM的幽灵容器解决什么问题 ：避免多余div嵌套，保持DOM结构纯净核心优势 ：优化DOM树、提升性能、解决布局问题最佳实践 ：日常开发优先用<></>，列表渲染带key时用下次写JSX时，不妨试试这个小技巧，让你的DOM树清爽起来！如果你有其他Fragment的妙用，欢迎在评论区分享~
2025-07-18 11:25:33
330
原创 大文件上传难题？前端优雅解决方案全解析！
方案解决问题实现难度效果分片上传超时、内存溢出⭐⭐大幅提升成功率断点续传网络中断重传⭐⭐⭐用户体验质的飞跃文件校验数据一致性⭐⭐确保业务数据准确并发上传上传速度慢⭐显著缩短等待时间自有服务器开发：分片+断点续传+并发为核心快速集成：七牛云、阿里云 OSS 等第三方服务（提供完整 SDK）大文件上传已不再是前端“不可逾越之山”，通过合理的分片策略与断点续传机制，配合服务端稳健处理，完全可实现稳定高效的用户体验。关键在于分而治之的思想应用！
2025-07-17 17:15:18
429
原创 uniapp - 键盘上推 踩坑
这是一个很常见很普遍的功能了，在输入框获取到焦点后，弹出键盘，把页面上推。在uni-app关于textarea的介绍中有相关配置。adjust-position，默认为 true。键盘弹起时，是否自动上推页面那从哪里开始推，推哪个地方，我的整个【输入框-键盘】是一个组件，当然是希望将整个组件上推的。查阅文档，有个参数来处理这个推的的目标点。cursor-spacing，默认为 0。指定光标与键盘的距离，单位 px。
2025-07-17 17:11:11
356
原创 懒加载：让网页像优雅的绅士，只展示该展示的内容
懒加载不仅是性能优化手段，更是以用户为中心的设计哲学。懒加载通过data-*属性和滚动监听实现现代浏览器提供更高效的IntersectionObserver API正确实现可提升50%+的页面加载速度结合占位图和加载动画可优化用户体验优雅的网页如同绅士：不急于展示所有，只在恰当时机呈现最合适的内容。
2025-07-17 16:22:38
410
原创 Vite 构建库与构建应用的差异与最佳实践
是一个基于原生 ES 模块和 Rollup 构建的现代前端构建工具，它在构建应用和构建库时都表现优秀，但两者在使用上的配置和原理存在一定差异。了解这些差异，有助于我们更合理地利用 Vite 来构建高效的应用和可复用的库。
2025-07-16 19:14:58
1106
原创 uniapp图片上传组件封装，支持添加、压缩、上传（同时上传、顺序上传）、预览、删除
在做小程序、H5、uni-app开发中，经常会用到图片上传，今天给大家分享一个我自己封装的插件，使用方便，支持添加、压缩、上传、预览、删除。
2025-07-16 19:08:16
369
原创 JavaScript继承探秘：从原型链到ES6 Class
继承方式实例属性继承方式原型属性/方法继承方式引用类型共享问题可传参优点缺点适用场景原型链继承否是是否简单易实现引用类型共享，无法传参，无法初始化父类属性简单继承，父类无引用类型属性借用构造函数继承是否否是解决了引用类型共享，可传参方法无法复用，只能继承实例属性解决引用类型共享，需传参，通常不单独使用组合式继承是是否是解决了所有问题，最常用调用两次父类构造函数ES6前最常用且推荐的继承模式原型式继承否是是否简单，基于现有对象创建。
2025-07-15 17:37:02
864
原创 从零实现浏览器摄像头控制与视频录制：基于原生 JavaScript 的完整指南
通过本文的学习，你已经掌握了如何使用原生 JavaScript 实现浏览器摄像头控制和视频录制功能。我们使用了 MediaDevices API 获取摄像头流，MediaRecorder API 录制视频，以及 Canvas API 实现拍照功能。现在，你可以将这些知识应用到实际项目中，开发出更加复杂和专业的网页应用。
2025-07-15 17:34:17
774
原创 Vue 开发者的外挂工具：配置一个 JSON，自动造出一整套页面！
功能亮点支持交互式创建模块每个文件都能选模板、填内容支持配置文件驱动一次生成多个模块，结构清晰可复用多种模板类型可选支持 Vue2/Vue3，也可自定义路径支持嵌套结构生成灵活控制目录层级带颜色的日志提示提升用户体验，便于排查问题不只是一个脚手架工具，它更像是一位“代码建筑师”，你只需要告诉它你要什么结构，剩下的交给它就行。下次当你又要手写第 10 个 Vue 文件的时候，不妨试试这个工具，让你从重复劳动中解放出来，去做更有价值的事！
2025-07-15 17:28:12
270
原创 React初学者必备：用“状态管家”Reducer轻松管理复杂状态！
(当前状态, 动作指令) => 新状态一句话理解ReducerReducer是你应用状态更新的"规则手册"，Action是"修改指令单"，Dispatch是"指令发送器"，useReducer是React提供的管理工具。当你下次遇到复杂状态管理问题时，不妨问问自己："我的应用是否需要一位专业的状态管家？
2025-07-15 17:21:24
400
原创 如何在程序中嵌入有大量字符串的 HashMap
嵌入静态 HashMap 看起來很简单，但 naive 的方案总有各种代价需要牺牲。我们介绍了 MPHF 技术和字符串打包技术，可以在不牺牲任何方面的情况下实现该功能。启动耗时查询性能内存占用体积占用编译速度O(N)Θ(1)O(N)紧凑快mphf +&[&str]O(1)膨胀慢O(1)紧凑快。
2025-07-08 15:47:01
758
原创 react受控模式和非受控模式（日历的实现）
在现代Web开发中，React凭借其组件化开发和声明式编程的特性，已成为构建交互式用户界面的首选框架。项目搭建与环境配置通过Vite快速创建React项目，解析与的本质区别，掌握生产环境与开发环境的依赖管理策略。表单组件开发范式深度解析受控组件与非受控组件的实现差异，通过代码示例演示状态驱动（useStateonChange）与默认值控制（）两种开发模式的应用场景。复杂组件实战：日历控件日期计算逻辑（月份切换、日期填充）组件状态管理与外部通信（初始化 +onChange回调）
2025-07-08 15:43:40
738
原创 从 “等一下“ 到 “马上说“：React 牵手 DeepSeek 玩转文本大模型
在人工智能技术日新月异的当下，大型语言模型（Large Language Models, LLMs）无疑是自然语言处理（NLP）领域最具革命性的突破之一。这些模型展现出令人惊叹的理解、推理和生成类人文本的能力，深刻变革了问答系统、内容创作、代码生成、机器翻译等诸多应用场景。本文将结合一个具体的开发实例——基于 React 前端框架与 DeepSeek API 构建的智能问答应用。
2025-07-08 15:40:26
883
原创 vue3源码解析：响应式机制
组件初始化时创建响应式数据渲染过程中通过 effect 建立响应式包装渲染函数执行过程中进行依赖收集数据变化时触发更新，创建更新任务调度系统统一处理更新任务整个过程中涉及的数据结构（effect、dep、job、queue 等）都是为了服务于这个响应式更新流程，确保数据变化能够精确且高效地触发组件更新。后续我们就来分析依赖收集系统的具体实现。
2025-07-08 15:32:25
799
原创 JavaScript BOM 对象：浏览器的隐形控制塔
BOM 对象是 JavaScript 中不可或缺的一部分，它们为我们提供了与浏览器窗口、URL、历史记录等交互的能力。通过掌握 window、location、history、navigator 和 screen 等常用 BOM 对象，我们可以开发出更加丰富、交互性更强的网页应用。在实际项目中，合理运用 BOM 对象可以解决许多常见的开发需求，如滚动效果、路由实现、设备检测等。希望本文能帮助你更好地理解和使用 JavaScript 中的 BOM 对象，让你的 JavaScript 技能更上一层楼！
2025-07-08 15:27:13
618
原创 JavaScript引用数据类型
引用数据类型与基本数据类型不同，它们在内存中的存储方式更为复杂。。JavaScript中引用数据类型主要就是对象（Object） ，所有引用类型的原型链最终都指向。
2025-07-02 14:46:58
918
原创 Vite 构建优化全攻略：快，还能更快！
通过合理配置和优化，Vite 可以：秒级冷启动构建包体积大幅减小热更新丝滑流畅复杂项目模块清晰、可控没有最快，只有更快；Vite 构建优化，一定能让你的工程更“丝滑”。
2025-07-02 14:44:01
401
原创 跨标签页通信：7种实时消息推送方案
通过本文介绍的7种方案，你可以根据具体场景选择最佳实现方式。现代Web API的强大功能使跨标签页通信变得前所未有地强大而简单。利用localStorage作为消息通道，通过storage事件进行监听。通过Service Worker作为消息中转站，实现离线推送能力。在相同源（origin）下，通过命名管道建立广播通信通道。接下来，让我们深入探究每种技术的实现原理和适用场景。创建共享工作者线程作为通信中心枢纽。
2025-07-02 12:17:25
840
原创 2025 年大厂必考题：流式输出到底是什么？前端手把手教你实现
用 SSE（或 WebSocket）建立 “长连接”，实时接收后端分批数据，并即时更新 UI。它不只是一种技术，更是一种 “用户体验设计思维”—— 在等待不可避免时，想办法让用户 “不觉得在等”。长文本加载：小说网站 “边翻页边加载” 下一章内容；实时日志：后台系统实时显示服务器日志，不用刷新页面；进度提示：文件上传时，实时显示 “已上传 30%”“50%”。25 年大厂考这个，正是因为 AI 时代，这种 “渐进式体验” 会成为前端的基础能力。现在就动手试试上面的代码，感受一下流式输出的魅力吧！
2025-07-02 12:10:17
989
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人