- 博客(73)
- 收藏
- 关注
RSS订阅原创 深入理解 CSS 伪类和伪元素的本质区别
伪类选择元素的特定状态（如:hover、:focus）语法使用单冒号（如:hover不生成新内容，只针对元素本身的状态变化常见用途：用户交互反馈、结构位置选择伪元素创建并样式化元素的特定部分或虚拟内容语法使用双冒号（如::before常配合content属性生成新内容常见用途：插入装饰元素、样式化文本部分通过上面的内容，我也终于搞懂了伪类和伪元素的区别。
2025-12-22 14:11:31
974
原创 流式渲染 Incremark、ant-design-x markdown、streammarkdown-vue 全流程方案对比
侧重：完整的 AI 聊天 UI 解决方案提供 Bubble、Sender、Conversations 组件与 Ant Design 生态深度集成内置<thinking>等特殊块支持Ant Design 用户可快速上手适用场景：在 Ant Design 生态中构建 AI 聊天界面的团队。
2025-12-22 11:57:43
630
原创 一场组件的进化脱口秀——React从 “类” 到 “hooks” 的 “改头换面”
家人们，咱就是说，React这玩意儿就纯纯一个“互联网打工人”，几年不更新，直接从 “穿西装打领带的老派白领”类组件，进化成了 “穿卫衣踩拖鞋的高效新青年”函数组件hooks。但不得不说是真好用！看完你就知道这波“改头换面”到底有多爽。对比项类组件（16.8 前）函数组件 + hooks（17+）代码量要写 class、constructor、bind直接 function，一行 useState 搞定状态管理裹在 this.state 里，this 易迷路。
2025-12-18 10:57:54
577
原创 从40亿设备漏洞到AI浏览器：藏在浏览器底层的3个“隐形”原理
浏览器底层原理不是“面试八股文”，而是解决实际问题的钥匙。安全层面：涉及WebXR、Canvas等图形相关API时，严格校验输入数据，避免传入异常值触发内存读取漏洞；性能层面：减少重排重绘，优先使用合成层属性（transform、opacity）；批量操作DOM时用DocumentFragment；兼容层面：AI浏览器的预加载机制可能导致资源重复加载，需给静态资源设置合理的缓存策略（Cache-Control），避免浪费带宽。
2025-12-16 12:16:15
852
原创 npm发布报错急救手册：快速解决2FA与令牌问题
旧的“经典令牌”一旦泄露就永久有效，安全隐患极大。自动化令牌：CI/CD 专用，自动绕过 2FA，最长 90 天粒度访问令牌：精细权限控制，可选 bypass-2fa会话令牌npm login生成，仅 2 小时有效令牌类型对比场景推荐令牌类型有效期关键优势本地开发自动化令牌90天自动绕过2FA，一次配置长期使用CI/CD 流水线自动化令牌90天专为自动化优化，无需交互团队协作粒度访问令牌自定义精确权限控制，可 bypass-2fa临时发布npm login 会话。
2025-12-13 16:01:01
1306
1
原创 Vue Router 进阶指南：打造丝滑的滚动控制与惊艳的路由动画
滚动行为指的是用户在路由切换时，页面滚动位置的智能管理。想象一下这样的场景：您在一个长列表页面滚动到中间位置，点击某个项目进入详情页，然后点击浏览器返回按钮——您是否希望直接回到刚才的列表位置？这正是滚动行为要解决的问题。通过精心设计的滚动行为和流畅的路由过渡动画，我们可以将普通的单页应用提升到新的高度。Vue Router 提供的这些功能不仅仅是技术实现，更是连接用户与内容的桥梁。记住，最好的用户体验往往是用户感受不到的——自然的滚动恢复、流畅的页面过渡，这些细节共同构成了应用的品质感。
2025-12-11 12:20:47
295
原创 地址与地基：在 JavaScript 的堆栈迷宫里，重新理解“复制”的哲学
let a = 1let b = aage: 18把 a 的值赋值给 b ，这个是一种拷贝，但是把 obj 的值赋给另一个对象 obj2 ，它就不是拷贝，这是为啥呢，今天我们来深入探讨 js 中的拷贝--- 分为浅拷贝浅拷贝和深拷贝深拷贝，由于原始类型在任何语言层面操作都是值复制，没有共享问题，也就没有“深浅”维度；所以在这里，拷贝只针对引用类型，基于原对象，拷贝得到一个新对象，这也解释了为什么上面对象赋值不算拷贝。拷贝，看似只是“复制”二字，实则藏着 JS 内存模型的全部秘密。
2025-12-06 16:03:45
556
原创 解锁前端高阶调试：浏览器/IDE/Git技巧分享
本次分享系统梳理了提升前端开发效率的全链路技巧：从浏览器Console的高级用法和网络请求模拟，到IDE中的精准断点调试、可视化Git操作与多环境管理，最后引入代码化的HTTP Client接口调试。这些工具与方法的核心在于减少上下文切换、自动化重复劳动，旨在帮助大家构建一个更流畅、专注且高效的现代化前端开发工作流。
2025-12-04 12:18:39
605
原创 Node.js 的应用场景：为什么越来越多企业选择它？
高并发、非阻塞 I/O→ 适合实时通信和 API 服务前后端统一语言→ SPA 和同构渲染更高效轻量、启动快→ 微服务、Serverless、IoT 场景均适用因此，无论是互联网企业移动端后台，还是实时协作工具，Node.js 都能提供稳定、高效、可扩展的解决方案。如果你正在开发高并发、实时性要求高的应用，或者希望前后端技术统一，Node.js 是不可错过的选择。
2025-12-04 11:57:44
915
原创 JavaScript 词法作用域、作用域链与闭包：从代码看机制
在 JavaScript 中，每当一个函数被调用时，都会创建一个「执行上下文」（Execution Context），并压入调用栈（Call Stack）。变量环境（Variable Environment）：存储用var声明的变量和函数声明。词法环境（Lexical Environment）：存储用letconst声明的块级作用域变量。outer，它指向该函数定义时所在的作用域的词法环境。outer指针决定了作用域查找路径，即“作用域链”var myName = '极客邦'bar()
2025-12-04 11:26:00
825
原创 把原型链画成地铁图：坐 3 站路就能看懂 JS 的“继承”怎么跑
在 JavaScript 里，“原型原型”这个词听起来高大上，其实就是一个“默认备胎”：当对象自己找不到属性时，就沿着原型这条暗道去“亲戚家”借。没有类、没有蓝图，仅靠这条备胎链，就能把公共方法层层复用，让内存省一半、代码少一半。本文只聊“原型”本身——prototypeprototype、proto这些眼前能用的工具，把“借东西”的流程画成一张家谱图，帮你先看清“亲戚”是谁、住哪、怎么串门。至于后面更高阶的封装、多态、模块化，等我们把这条链走熟再升级也不迟。
2025-11-27 11:31:47
802
原创 Prisma 7 重磅发布：告别 Rust，拥抱 TypeScript，性能提升 3 倍
对 Prisma 团队而言，Prisma 7 不仅仅是一个版本发布，更是 Prisma ORM 和 Prisma Postgres 未来发展的基石。他们希望构建的工具能够为开发者提供最佳体验，让开发者能够专注于构建和发布出色的应用程序。如果开发者正在尝试 Prisma 7，可以向 Prisma 团队反馈想法和体验。
2025-11-27 11:20:29
288
原创 前端实时推送 & WebSocket 面试题（2026版）
WebSocket 是 HTML5 推出的一种全双工(Full-Duplex)、持久化(Persistent)的网络通信协议， 基于TCP协议构建，允许客户端(浏览器)与服务器之间建立一条长期稳定的连接通道，实现「服务器主动向客户端推送数据」和「客户端实时向服务器发送数据」的双向通信，无需频繁建立/断开连接。全双工：通信双方可同时发送/接收数据(区别于HTTP的「请求-响应」单向通信)；持久连接：连接建立后长期保持，避免HTTP每次通信都需重新握手的开销；轻量协议。
2025-11-19 11:39:20
737
原创 [特殊字符] Trae 国际版 Max 模型升级：算力与智能的共舞
假设 Trae 模型使用的核心架构类似 Transformer，既懂地道的英语笑话，也能认出你键盘下藏着的中文典故。更代表应用环境、法律合规和模型公平性的全球化升级。“Max” 这个命名在科技界几乎是一种仪式。理论上，若每次推理的平均功率下降 25%，这样的模型，就像一个有护照的 AI ——正如我们在 WebAIGC 中提到的，“国际版” 不仅仅指界面支持多语言，在大型部署下能直接节省上百万度电。
2025-11-17 14:24:07
415
原创 还在死磕模板语法？Vue渲染函数+JSX让你开发效率翻倍！
你看着那复杂的条件渲染，心里默默计算着要写多少v-if、v-switch，还有那些嵌套很深的组件结构，光是想想就头大。记住，模板、渲染函数、JSX都是Vue生态中的重要组成部分，它们各有适用的场景。作为开发者，我们的目标是掌握各种工具，然后在合适的场景选择合适的技术。学完今天的内容，你会掌握如何用JSX写出更简洁直观的组件代码，理解渲染函数的工作原理，还能在实际项目中灵活运用这些技术解决复杂问题。Vue的模板语法确实很友好，声明式、易上手，但在处理特别复杂的动态逻辑时，模板会变得冗长且难以维护。
2025-11-17 12:12:47
468
原创 我用AI重构了一段500行的屎山代码，这是我的Prompt和思考过程
每次产品经理提一个小需求，比如在提交订单时，增加一种新的优惠券类型，我们整个团队的表情都像被雷劈了。我要像一个指挥家一样，一步一步地引导AI，把这500行的代码，拆解成高内聚、低耦合的模块。现在，有了AI的帮助，它变成了我的靶场。我评估了一下，手动重构，至少需要一个资深工程师一周的时间，而且风险极大。我得先确认，它和我对这段代码的理解，在一个频道上。这篇文章，就是我人机协作，啃下这块硬骨头的完整复盘，大家继续看。AI很听话，它给我的，是一段看起来更整洁的代码——它把。GPT的回答，给了我一个惊喜。
2025-11-13 12:25:31
327
原创 HTML5 拖拽：让网页像现实世界一样“拿起来，放进去”
一个重要原因就是它的操作“傻瓜化”——你想移动一个图标，就直接用手指把它拿起来，放到新位置。Mobile First（移动优先），因为超过 80% 的网页访问来自移动设备。它让网页不再只是“点一点”，而是可以“拖一拖、放一放”，大大提升了交互的直观性和用户体验。Google 的文件上传、Trello 的任务卡片排序、网页版的文件管理器……属性和五大事件，再结合响应式设计，就能做出既美观又易用的拖拽功能，让网页更具现代感和亲和力。HTML5 拖拽，让用户操作更自然、更高效。的交互方式，让人一学就会。
2025-11-13 12:00:57
352
原创 栈与堆的精妙舞剧：JavaScript 数据类型深度解析
在 JavaScript 的世界里，数据类型并非简单的分类，而是一场由调用栈与堆内存共同演绎的精妙舞剧。每一种数据类型都有其专属的 “舞台位置”，而v8 引擎则是这场舞剧的幕后导演。让我们以色彩为笔，代码为证，拆解这场舞剧的每一个角色与舞台设计。这场由栈与堆共同演绎的数据存储舞剧，让 JavaScript 既有 “轻骑兵”（原始类型）的迅捷响应，又有 “豪华庄园”（引用类型）的包容能力。
2025-11-11 12:15:13
840
原创 tql，寥寥几行，实现无队列无感刷新
可能大家在项目中已经都用上了双 token，可能你的 refresh_token 至今为止都没派上用场。你可能已经看过了很多篇讲 token 无感刷新的文章了，看完的你可能有三种情况不知所云又臭又长，懒得看管理一个重试队列(queue)相信聪明又耐心的你们，大多处在第三种情况。而这篇文章特别短，将在最快的时间内教会你一种十分简单且更高效的刷新方式。新的无队列无感刷新！
2025-11-07 19:59:05
425
原创 [特殊字符] Vue3 高级组件封装实践指南：让你的组件更优雅、更好用
>()组件封装不是复制粘贴，而是理解框架底层能力 + 提炼业务场景的抽象。掌握好 props、slots、ref、TS 类型的正确使用方式，封装出来的组件才能真正做到“可复用、可维护、开发愉快”。
2025-10-30 18:12:20
961
原创 前端别再乱存数据了！这3种存储方案让你的应用快如闪电
通过今天的学习，相信你已经掌握了：✅ Fetch API 的现代用法和错误处理 ✅ 三种本地存储方案的适用场景 ✅ 如何构建智能缓存系统提升性能 ✅ 离线优先的设计思路 ✅ 各种性能优化和监控技巧数据交互不再是简单的"请求-显示"，而是要考虑缓存、离线、同步、性能等方方面面。一个好的数据层设计，能让你的应用用户体验提升好几个档次。
2025-10-30 18:07:02
457
原创 [特殊字符][特殊字符][特殊字符]Vue 3.5 核弹级小补丁：useTemplateRef 让 ref 一夜失业？
不是银弹，但在“模板引用”这个细分战场，它让命名自由、类型安全、动态 ref、逻辑复用四连击，写完直接删 30% 防御性代码香到隔壁 React 组都过来问链接。
2025-10-28 18:42:02
451
原创 [特殊字符] 真正实用的前端算法技巧：从 semver-compare 到智能版本排序
是一个极小的npm 库（仅十几行代码），功能非常单一：👉比较两个语义化版本号（SemVer），返回 -1 / 0 / 1。
2025-10-28 11:14:14
480
原创 前端面试官：你在项目开发中遇到过什么难点
最可惜的情况是，候选人技术实力不错，项目也做得扎实，但被问到“遇到过什么难点”时，要么支支吾吾说些不痛不痒的问题，要么滔滔不绝讲十分钟却让面试官抓不住重点。在接下来的部分，我会拿出在前端面试中高频出现的项目难点亮点和场景题。作为一名前端面试官，我想说个实在话：很多候选人在聊项目难点时，往往把送分题答成了送命题。- 你能否在业务开发中，敏锐地察觉到那些影响用户体验、开发效率或系统稳定性的关键问题？- 面对复杂问题，你能否把它分解成可执行、可解决的小模块？
2025-10-17 18:08:56
627
原创 四年！！React 你知道我这四年怎么过的吗
虽然 React 在性能优化方面曾经被诟病，虽然我们曾经写过无数的"屎山"代码，虽然 Vue 等框架在响应式更新方面确实更加优雅，但 React Compiler 的到来无疑为 React 开发者带来了福音。四年的等待，从 React Forget 到 babel-plugin-react-compiler，React 终于迎来了自动化的性能优化时代。它通过自动化的性能优化，简化了开发流程，降低了出错的风险。这种机制导致了大量不必要的重新渲染。在 React 的世界里，性能优化一直是个让人头疼的问题。
2025-10-16 19:15:12
967
原创 前端的设计模式？我觉得90%都是在过度设计！
最近Code Review的时候，我看到我们组一个很聪明的年轻同事，用观察者模式，写了一个极其复杂的全局状态订阅系统，就为了在一个组件里，响应另一个不相关的组件的点击事件。我们总觉得，能说出几个设计模式的名字，能把它们用在代码里，就代表自己的水平更高。为了通过面试，我们不得不去背诵它们的定义和用法，这就导致了一种为了应考的惯性思维。我反对的是，把那些20年前为Java/C++总结的、沉重的、面向对象的大招，生搬硬套到我们现代前端的开发范式里。，没有那么复杂的逻辑，但它蕴含了策略模式的思想。
2025-09-28 19:52:57
774
原创 大屏开发实战：用 autofit.js 实现 1920*1080 设计稿完美自适应，告别分辨率变形
用 autofit.js 实现大屏适配，核心是「让适配逻辑与业务逻辑分离分层设计：外层容器占满屏幕，中间层容器用 autofit 缩放，内层业务内容写固定像素；资源优化：用矢量图、高清字体，避免缩放后模糊；生命周期管理：组件卸载时调用，避免内存泄漏。这套方案已在多个生产级大屏项目中验证（如业务监控大屏、领导驾驶舱），适配效率比传统 rem 方案提升 80% 以上，且能应对 99% 的屏幕分辨率场景。你在大屏开发中还遇到过哪些适配问题？欢迎在评论区分享你的解决方案～
2025-09-28 19:49:03
942
原创 # vue实现拖拉拽效果，类似于禅道首页可拖拽排布展示内容（插件-Grid Layout）
gif 动图可能有点卡顿，但是实际效果还是不错的，希望有用！版本的话，可以使用 Vue Grid Layout。使用的话也比较简单，现在以vue3使用为例介绍。
2025-09-28 19:42:32
287
原创 React Ref揭秘：直接操作DOM的“秘密通道“
管理焦点、文本选择、媒体播放触发强制动画集成第三方DOM库需要直接测量DOM元素能用状态驱动解决的问题组件间的数据传递（应该用props）派生数据计算记住Ref是React的"逃生舱"，在大多数情况下，我们应该优先考虑React的数据流和状态管理。只有在真正需要直接操作DOM时，才请出这个强大的工具。
2025-09-28 19:34:41
209
原创 多语言维护太痛苦？我自研了一个翻译自动化 CLI 工具
简单来说，我自研的这个i18n CLI自动化翻译，减少重复劳动翻译复用，保证一致性校对闭环，翻译不会丢失开源、npm 即装即用、自由定制有了它，团队在做多语言时就能轻松很多，开发、翻译、校对的协作成本都降下来了。👉 如果你个人或者团队在做国际化站点，可以试试这个工具，真的很强！
2025-09-28 19:20:02
773
原创 Node.js v24.8.0 新功能预览！[特殊字符][特殊字符][特殊字符]
Node.js 发布了v24.8.0（Current）版本，让我们一起来了解这些新功能吧！总之，Node.js v24.8.0通过HTTP/2检查和crypto增强，进一步强化了其作为现代JavaScript运行时的地位，开发者可根据需求及时更新。
2025-09-11 18:18:08
438
原创 双 Token 认证机制：从原理到实践的完整实现
双 Token 机制通过 Access Token 和 Refresh Token 的协同工作，在安全性和用户体验之间取得了出色的平衡。本文提供的完整代码实现了从令牌签发、验证、刷新到登出的全流程，包含了前端和后端的关键处理逻辑。使用 Redis 等分布式存储替换内存存储，支持集群部署实现令牌黑名单机制，处理已吊销但未过期的令牌添加令牌撤销通知，在用户修改密码等场景立即失效所有令牌结合 JWT（JSON Web Token）实现无状态令牌验证，减轻服务器负担。
2025-09-11 18:16:03
1440
原创 面试官开始问我AI了，前端的危机真的来了吗？
如果你对它完全不了解、不使用，那在他们看来，你的学习能力和对新工具的拥抱程度，可能要打个问号❓。今天，不想聊那些虚无缥缈的未来预测，就想结合这些面试题，和大家聊聊我的真实看法：AI到底在如何改变我们的工作，我们又该如何应对？” 如果你说AI主要帮你写业务逻辑，那你等于告诉面试官，你的核心工作正在被自动化。如果你现在的工作，主要就是上面我提到的那三类可以被AI高效完成的任务——写样板代码、编写UI稿、实现简单逻辑——那么，危机确实已经来了。他想招的，是一个能驾驭AI，把AI当作工具，来解决更复杂问题的人。
2025-09-11 18:10:52
668
原创 面试官：一个接口使用postman这些测试很快，但是页面加载很慢怎么回事[特殊字符][特殊字符][特殊字符]
排查接口在页面加载慢的问题，可以先看 TTFB 和 Download 阶段：TTFB 高多半是后端或网络瓶颈，Download 高则可能是响应体过大或压缩缺失。若两者都正常但页面依旧卡顿，则通常是前端解析、渲染或第三方脚本拖慢了速度。除此之外，还要留意 CORS 预检、请求头膨胀（Cookie、自定义头） 以及 Service Worker 缓存逻辑，这些都是浏览器特有的额外开销。整体来说，Postman 快而页面慢，大多数情况都能归因到这些环节。
2025-08-21 18:31:31
936
原创 踩坑vue项目中使用 iframe 嵌套子系统无法登录，不报错问题！
最近项目中使用了iframe标签进行嵌套子系统时，遇到了无法登录、而且不报错的问题。本文记录自己的踩坑过程，也希望帮助到其他同学。我使用了方案4最简单的方式，直接弃用js-cookie，改用。重新将 b 项目打包部署后，在 a 项目的iframe标签内进行嵌套展示，发现登录成功后正常跳转到了 b 项目的首页，且功能正常。
2025-08-21 18:26:51
1120
原创 深入WeakMap和WeakSet：管理数据和防止内存泄漏
咱们做前端的，天天都在跟Object和Array打交道。WeakMap和WeakSet。说实话，我刚开始学这两个东西的时候，也觉得有点鸡肋。Map和Set用得好好的，为啥非要搞个“Weak（弱鸡）”版本？而且它们还不能遍历，功能上好像还是阉割版。直到有一次，我排查一个线上页面卡顿的问题，用Chrome的内存快照（Heap Snapshot）工具，发现了一些本该被销毁的DOM节点，却因为被我写的一个全局Map引用着，导致一直无法被垃圾回收（GC），造成了内存泄漏。从那次之后，我才真正理解了。
2025-08-21 18:25:21
883
原创 前端进阶必看：你真的懂 DOM 吗？（超全总结）
观察 DOM 变化（微任务队列中回调）。集合（DOM 变化会实时反映），但。小型富文本示例（基于选区拆分/替换）4.复用/重用同一观察者。
2025-08-21 18:21:12
1080
原创 虚拟DOM Diff算法时间复杂度分析
传统树Diff算法：O(n³) → 同层级比较：O(n²) → 组件类型+Key优化：O(n)Tree Diff：仅比较同级节点Component Diff：组件类型不同时整树替换Element Diff：使用唯一Key标识节点1000个节点操作次数从10亿级降至千级在现代浏览器中可实现60fps流畅更新为列表项提供稳定唯一的key避免组件类型频繁变化减少不必要的DOM深度。
2025-08-16 15:22:30
265
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人