- 博客(195)
- 收藏
- 关注
RSS订阅原创 解锁 JavaScript 模块的秘密：ES6模块内部结构详解
项目说明模块对象import * as mod 获取到的对象，包含所有导出成员模块级元信息，如 URL、环境变量等导入的是绑定引用，值是“活的”，会跟随原模块更新默认导出对应 mod.default 属性动态导入与懒加载使用 import() 动态加载模块顶层 await在模块最外层使用 await，更灵活地处理异步逻辑。
2025-07-30 14:14:16
522
原创 25年，一天面了10个web前端，水平真的令人堪忧啊
近几个月面试前端候选人时，我发现几个普遍存在的短板，如果不解决，真的很难给offer！1. JavaScript 基础不扎实 问题表现：对闭包、事件循环、原型链等核心概念理解模糊，手写代码时容易卡壳（比如实现Promise.all或深拷贝）。建议： 深入理解V8引擎的运作机制（如宏任务/微任务、内存回收）。能解释清楚this绑定规则、async/await底层原理（Generator + Promise）。
2025-07-30 14:11:56
1135
原创 vue 不完美的多标签页解决方案
不使用KeepAlive，通过监听route，变化后就向list中添加达到打开标签页的功能，渲染list中的所有组件，然后为了让组件数据缓存下来，不能使用v-if而是使用v-show来隐藏组件。会发现，虽然是同一个组件，但生命周期也独立了，也就不需要考虑路由参数变化时重新获取数据，只需要在onMounted时获取一次数据就可以了。这下问题麻烦了，虽然使用不同的key多开了路由，但路由的组件名称是相同的，也就是说，就算能多开了，关闭却只能全部关闭，这种是不行的。
2025-07-30 12:00:28
772
原创 在SqlSugar的开发框架的Vue3+ElementPlus前端中增加对报表模块的封装处理，实现常规报表的快速处理
在我们开发业务系统的时候，往往都需要一些数据报表进行统计查看，本篇内容介绍如何在实际的前端中对报表内容进行的一些封装操作，以便提高报表模块开发的效率，报表模块的展示主要是结合Vue3中比较广泛使用的echarts图表组件进行展示。在前端界面开发中，良好的组件封装和使用，可以给我们提供更好的开发效率，因此为了业务的快速开发，我们不仅在代码生成代码的方面持续优化，也在一些前端页面的开发中，提取一些常用的场景组件，最大化的实现代码的快速开发。对于数据的处理，我们通过接口动态获取图表统计的data数据，如下所示。
2025-07-30 11:56:15
214
原创 JavaScript cookie 有大小限制吗？溢出会怎样？
根据测试结果可以得出：在使用 Cookie 时只建议用于存入关键数据，而不是用来做相关缓存！
2025-07-30 11:42:31
359
原创 Vue和React的数据流之争：双向绑定 vs 单向数据流，谁更适合你？
我在模板里改myName，数据自动更新；JS里修改myName，输入框内容也跟着变。双向同步，就像照镜子。双向绑定像自动驾驶——省心但要把控权交给框架；单向流像手动挡——更可控但也更费神。当你追求开发速度时，选Vue；当你需要绝对控制时，选React。当然，最厉害的开发者应该两种都掌握，就像老司机既能开自动挡也能玩手动挡。
2025-07-29 11:35:18
401
原创 前端权限控制实战：手把手教你玩转角色权限分配
权限控制就像给系统穿上合身的衣服 - 不能太紧影响活动，也不能太松走光。找到适合项目的平衡点很重要。希望我的这些经验能帮你少走弯路！
2025-07-29 11:29:29
349
原创 上周我跑了十几场前端面试，发现很少问传统八股了，背场景题遥遥领先！
七月初，我决定跳槽，一口气面了十几家互联网公司。本以为凭借多年经验，面试不过是走个过场，没想到却遭遇了“滑铁卢”。过去面试，无非是问问“闭包”、“原型链”、“CSS盒模型”这些“八股文”，背一背就能应付。可如今，面试官们仿佛商量好了似的，全都热衷于考察场景题：“如何设计一个高并发的实时评论系统？”、“如何优化一个超大型前端项目的构建速度？”...这些问题没有标准答案，更考验实际项目经验和技术深度。
2025-07-25 17:51:03
911
原创 其实，很多前端开发岗都是混进去再说.....
近几个月面试前端候选人时，我发现几个普遍存在的短板，如果不解决，真的很难给offer！1. JavaScript 基础扎实 问题表现：对闭包、事件循环、原型链等核心概念理解模糊，手写代码时容易卡壳（比如实现Promise.all或深拷贝）。建议： 深入理解V8引擎的运作机制（如宏任务/微任务、内存回收）。能解释清楚this绑定规则、async/await底层原理（Generator + Promise）。
2025-07-24 16:47:34
522
原创 用户登录成功后，判断用户在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
933
原创 为什么我讨厌 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
961
原创 我为什么在团队里，强制要求大家用pnpm而不是npm？
它的安装速度，尤其是在有缓存的情况下，或者在安装一个已经存在于全局仓库里的包时，几乎是“秒级”的。pnpm的全称是“performant npm”，意为“高性能的npm”。在一个团队里，工具的统一，是为了保证环境的一致性和协作的顺畅。而pnpm，在我看来，就是当前这个时代下，包管理工具的“最优解”。因为大部分依赖都是通过“链接”的方式实现的，而不是“复制”，所以pnpm在安装依赖时，大大减少了磁盘I/O操作。所以，这个“强制”，不是为了搞独裁，而是为了从根本上提升我们整个团队的开发效率和项目的长期稳定性。
2025-07-24 12:10:05
661
原创 2025别卷八股文了！现在前端面试都问场景题了
毕竟，在前端开发中，面对复杂多变的项目需求，能够迅速找到问题所在并给出解决方案，才是最为关键的。3.构建环境下的优化:尽管 Vite 在开发环境下不进行打包构建，但在生产环境下，它会通过预构建的方式生成高性能的静态资源，以提高页面加载速度。1.模块级别的热更新:Vite 使用浏览器原生的 ES 模块系统，可以实现模块级别的热更新，即只更新修改的模块，而不需要刷新整个页面。适配层:由于我们使用的运行时框架不是统一的，所以统一使用适配层将不同运行框架的差异部分，通过接口对外，让渲染层注册/适配对应所需的方法。
2025-07-23 12:30:25
1016
原创 Js也能写外挂？5 行 代码改掉《植物大战僵尸》的阳光值！
通过，即使是纯前端背景的开发者也可以轻松进入内存脚本开发的世界。利用现代 JS 工具链，我们可以封装一个安全、可维护的辅助工具。memoryjs。
2025-07-23 11:59:32
371
原创 前端权限系统怎么做才不会写吐？我们项目踩过的 3 套失败方案总结
上线前两个月，我们的权限系统崩了三次。于是，我们老老实实把整个权限体系拆了重构，从接口到路由、到组件、到 v-permission 指令，走了一遍完整的流程。这篇文章不讲理论，
2025-07-23 11:49:55
823
原创 2025年跑了十几家前端面试，发现很少问八股！！
近期有在面试Web前端岗的宝子应该都发现了，现在面试很少问八股文了，都是考察项目场景题，我把100多道常见题型都整理出来了，，争取金九银十拿到心仪offer！
2025-07-21 17:08:49
1087
原创 面试官：如何解决按钮重复点击？这个问题挂了80%的人！
还记得上周我们团队在招聘前端工程师，一个看起来经验丰富的候选人坐在我对面。"你们项目中是如何处理按钮重复点击的问题的？"我抛出了这个看似简单的问题。"这个简单，使用防抖就可以了。"他很快回答。然而，当我继续追问细节时，他却陷入了沉思...实际上，这个问题看似简单，但是要真正的解决好，需要考虑很多细节。在我面试了很多候选人中，能完整答出来的不到20%。
2025-07-21 16:54:03
336
原创 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
原创 2025年前端热门面试八股文大合集
2025年秋招已经不到两个月时间了，很多同学会问前端面试八股文有必要背吗？你可以讨厌这种模式，但你一定要去背，因为不背你就进不了大厂，八股文能快速检验出求职者是否为科班出身，专业基础强不强。整套涵盖了Html、Css、Javascript、Vue、React、小程序、算法 等各种常考必考技术点，文档共分为15个部分，1337页，其中包含多个大厂的面试原题和详细答案，而有完整的代码实例。拿它查漏补缺也是相当不错~
2025-07-18 11:59:23
1588
原创 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
380
原创 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
427
原创 uniapp - 键盘上推 踩坑
这是一个很常见很普遍的功能了，在输入框获取到焦点后，弹出键盘，把页面上推。在uni-app关于textarea的介绍中有相关配置。adjust-position，默认为 true。键盘弹起时，是否自动上推页面那从哪里开始推，推哪个地方，我的整个【输入框-键盘】是一个组件，当然是希望将整个组件上推的。查阅文档，有个参数来处理这个推的的目标点。cursor-spacing，默认为 0。指定光标与键盘的距离，单位 px。
2025-07-17 17:11:11
355
原创 2025年前端热门面试八股文大合集
2025年秋招已经不到两个月时间了，很多同学会问前端面试八股文有必要背吗？你可以讨厌这种模式，但你一定要去背，因为不背你就进不了大厂，八股文能快速检验出求职者是否为科班出身，专业基础强不强。整套资料内容涵盖了等各种常考必考技术点，文档共分为15，其中包含多个大厂的面试原题和详细答案，而有完整的代码实例。就算平时技术积累不俗，拿它查漏补缺也是相当不错~不管大家最近要不要去面试，大家先保存起来，后面自己肯定是能够用得上的！
2025-07-17 17:09:26
1027
原创 懒加载：让网页像优雅的绅士，只展示该展示的内容
懒加载不仅是性能优化手段，更是以用户为中心的设计哲学。懒加载通过data-*属性和滚动监听实现现代浏览器提供更高效的IntersectionObserver API正确实现可提升50%+的页面加载速度结合占位图和加载动画可优化用户体验优雅的网页如同绅士：不急于展示所有，只在恰当时机呈现最合适的内容。
2025-07-17 16:22:38
410
原创 Vite 构建库与构建应用的差异与最佳实践
是一个基于原生 ES 模块和 Rollup 构建的现代前端构建工具，它在构建应用和构建库时都表现优秀，但两者在使用上的配置和原理存在一定差异。了解这些差异，有助于我们更合理地利用 Vite 来构建高效的应用和可复用的库。
2025-07-16 19:14:58
1105
原创 uniapp图片上传组件封装，支持添加、压缩、上传（同时上传、顺序上传）、预览、删除
在做小程序、H5、uni-app开发中，经常会用到图片上传，今天给大家分享一个我自己封装的插件，使用方便，支持添加、压缩、上传、预览、删除。
2025-07-16 19:08:16
368
原创 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
757
原创 react受控模式和非受控模式（日历的实现）
在现代Web开发中，React凭借其组件化开发和声明式编程的特性，已成为构建交互式用户界面的首选框架。项目搭建与环境配置通过Vite快速创建React项目，解析与的本质区别，掌握生产环境与开发环境的依赖管理策略。表单组件开发范式深度解析受控组件与非受控组件的实现差异，通过代码示例演示状态驱动（useStateonChange）与默认值控制（）两种开发模式的应用场景。复杂组件实战：日历控件日期计算逻辑（月份切换、日期填充）组件状态管理与外部通信（初始化 +onChange回调）
2025-07-08 15:43:40
738
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人