- 博客(58)
- 收藏
- 关注
RSS订阅原创 惊艳同事的 Canvas 事件流程图，这篇教会你
HTML5 Canvas 绘制一个高颜值、支持交互的事件流程图，展示从到的完整飞行事件时间线，包含播放 / 暂停 / 重置动画控制功能。
2025-09-15 18:16:09
615
原创 Vue3 小白的疑惑：为什么用 const 定义的变量还能改？
只要是响应式变量，就用 const；只有非响应式变量需要重新赋值时，才用 let。变量类型推荐声明方式原因ref 创建的变量const只改.value，不改变量引用reactive 创建的变量const只改对象内部属性，不改变量引用非响应式且需要重新赋值的变量let比如普通名字切换let tempName = "小明";tempName = "小红"函数（方法、钩子）const函数不需要重新赋值，用 const 更安全// 响应式变量：用const。
2025-09-15 18:14:07
525
原创 我为什么认为 CSS-in-JS 是一个失败的技术？
它用一种激进的方式，暴露了原生CSS的种种痛点，并倒逼CSS标准和前端社区，去寻找更好的、性能更高的解决方案。它没有失败在它的解决思路上——它的思想在当时是革命性的。当初我们选择CSS-in-JS的那些痛点，在2025年的今天，大部分已经被浏览器和现代工具链，用更优雅、代价更小的方式解决了。当我们的项目越来越复杂，用户对性能的要求越来越高，CSS-in-JS的代价开始逐渐显现，并最终让我们无法忍受。为了解决一个CSS的问题，却让我们的JS背上了更重的负担，这在性能优化的视角下，有点本末倒置。
2025-09-15 18:07:56
613
原创 讲真，今年前端行情还不错！
除此之外，还发现很多招聘都要求会 Vue 3 了，Vue 团队去年底宣布停止对 Vue 2 的支持，现在越来越多的公司转向了 Vue 3。而且，和市面上的其他资料不同，这份资料不是扫描版的，里面的文字都可以直接复制，从解析到源码全都有，学习起来很方便。所以我在这份资料中，整理了专门针对前端面试的算法题汇总。为了梳理前端知识体系，充分的准备面试，今天就来晒一份爆肝两个月整理出的《2025 前端开发进阶秘籍》，内最新版本的八股文（包含最新 Vue 3 面试题）、高频算法题和大佬面经，全是今年的新知识点。
2025-09-15 15:31:54
497
原创 JavaScript高级程序设计(第5版)：前端的能力边界
了解一门语言能做什么很重要，既是，也是。JavaScript曾被认为是“玩具”语言，谁都想不到，它后来把触角伸到了服务端、工具链、App、桌面端、甚至是硬件和深度学习。本文是此系列的最终篇，我们来探究一下，除了按照正确的语法和良好的组织去写代码，前端到底能做什么？
2025-09-10 15:50:23
1019
原创 前端国际化适配提速 90%！这款 JS 脚本 CLI 工具，自动提中文、分模块、做替换，比 AI 更稳定
前言在全球化协作持续深化的大背景下，越来越多前端项目对国际化适配提出了快速落地的需求。然而，许多项目在初期规划阶段并未纳入国际化方案，导致代码中遗留了大量中文硬编码——这类硬编码广泛分布于各类文件中，数量少则上千，多则可达四五千甚至更多。若依赖人工逐文件排查、提取中文并替换为支持语言包动态切换的写法，不仅需耗费大量时间，且工作内容重复机械，缺乏技术价值。
2025-09-10 15:40:59
754
原创 [特殊字符]分享一个CSS技巧：用径向渐变实现弯曲框缺口效果
在上面的基础实现中，咱们已经掌握了弯曲框的基本原理。但是实际项目中，咱们可能需要实现不同方向的弯曲效果，比如左下角弯曲、右上角弯曲等等。简单来说，就是在指定位置 "挖" 出一个透明的圆形，从而形成弯曲的视觉效果。前面，咱们介绍使用单个径向渐变创建了一个缺口，但要实现完整的弯曲框效果，我们需要组合多个径向渐变。Em...存在一些尖角，这还不是我们想要的弯曲效果，现在就需要径向渐变上场了！不会影响元素的布局，而且可以更好地配合后面的径向渐变效果。的小技巧，瞧着有趣就记录下来，效果如下，请诸君按需食用哈。
2025-09-10 15:34:30
489
原创 校招生问我在vue中，什么时候该用 render 函数？
最近有一位校招生入职两个多月了，开始参与组件库封装工作，其中就包含了和<space>组件，这两个组件本身并不难。他在实现过程中遇到了一些困惑，特别是对于何时该使用 render 函数感到迷茫。我建议他先参考其他成熟组件库的实现方式，并结合 render 函数来完成需求。那什么时候该用 render 函数？需要高度控制组件渲染逻辑时需要根据运行时数据动态生成组件结构时需要实现复杂的条件渲染时开发可复用组件库时。
2025-08-26 18:38:03
561
原创 实现大文件上传全流程详解(补偿版本)
核心难点解决方案代码关键位置大文件哈希计算慢抽样读取片段（首尾全量 + 中间分片抽样）calHash 函数并发请求过多导致崩溃用「请求池 + Promise.race」限制并发数uploadChunks 函数用户需要手动中断上传用 AbortController 中断请求 + 清理状态abortUpload 函数分片合并顺序错乱按分片序号排序，用流按固定位置写入后端 /merge 接口的排序逻辑刷新页面后需从头上传校验时返回已上传分片，前端过滤后再上传。
2025-08-26 18:17:21
399
原创 还在用html2canvas？介绍一个比它快100倍的截图神器！
在前端开发里，DOM 截图是一个常见但“让人头疼”的需求。html2canvas 代表的传统方案，虽然功能强大，但性能和体验常常拖后腿；而 snapDOM 借助浏览器原生渲染能力，让截图变得又快又稳。一句话： 如果你还在为截图慢、卡顿、模糊烦恼，不妨试试 snapDOM —— 可能会刷新你对前端截图的认知。
2025-08-26 18:15:34
890
原创 在浏览器里“养”一只会写字的仓鼠——AI SSE 流式文本生成全攻略
AI 不再是神秘的水晶球，而是一只可观察、可打断、可撸毛的仓鼠。给它一条跑道（SSE），你就能看到字节像毛毛雨一样落下。下次面试官问你：“如何实现实时文本生成？你可以淡定地回答——“我开了个农场，养了一只会打字的仓鼠。祝编码愉快，愿你的仓鼠永不掉线！
2025-08-22 17:51:35
510
原创 明明这三行代码没用到，我注释了之后页面却白屏了
在重构时，不要轻易删除或注释看起来"无用"的代码，特别是在复杂的依赖关系中。有时候一行看似无关的代码可能在维持整个系统的平衡。重构是好事，但要谨慎。特别是在复杂的项目中，看似简单的改动可能会触发意想不到的问题。解决问题要从根源入手，不要只是绕过问题。有时候，最简单直接的解决方案往往是最有效的！理解代码的依赖关系，比盲目地删除"无用"代码更重要。
2025-08-22 17:41:42
585
原创 跟原子CSS说不！！！PageLayout布局组件封装技巧
左侧导航顶部工具栏主体内容。可扩展性好：插槽式设计，内容与布局解耦体验优化：支持拖拽、折叠动画、移动端适配可定制：支持样式覆盖与 props 配置非常适合在 中后台系统 中作为统一的页面容器使用。
2025-08-22 17:31:04
564
原创 封装那些Vue3.0中好用的指令
最近在维护一个老项目，发现项目中用了很多的自定义指令。突然发现，自己已经很久没有封装过指令了，特别是vue3.0时代以来，这个功能我好像用的越来越少了。其实以前在2.0时代的时候，封装指令是很常见的写法（勾起了当年的回忆）。那现在既然遇到了，就封装一些很常见的指令在日常开发中可以用到的。其实关于指令的使用，vue3.0的官网写的已经很仔细了，对新手很友好。写法主要还是在提供在不同钩子函数中，执行不同操作。下面 这些是官网给出的钩子函数的执行时机// 在绑定元素的 attribute 前。
2025-08-22 17:25:09
1009
原创 有了它 ，我彻底告别了 try-finally [特殊字符][特殊字符][特殊字符]
前几天看到 Rspack 团队宣布即将支持using声明，今天我们来看看using的神奇用法！开发者可以为自定义对象实现或，以支持 “using” 声明。这种灵活性让 “using” 声明适用于各种场景，从内存管理到外部资源清理。使用 “using” 声明，代码更简洁，清理逻辑自动处理，减少出错风险～如果文章中存在错误的地方欢迎指正！
2025-08-20 17:39:16
440
原创 TypeScript类型收窄：精准控制变量类型
类型收窄是TypeScript类型系统的重要特性，它让我们在享受类型安全的同时，保持代码的灵活性。通过typeof、instanceof、类型谓词和可辨别联合等手段，我们可以精确控制变量在不同代码分支中的类型，减少类型断言的使用。掌握类型收窄的关键在于理解TypeScript的控制流分析机制——编译器如何跟踪变量类型的变化。避免常见的收窄陷阱，遵循最佳实践，能帮助我们写出更安全、更易维护的TypeScript代码。
2025-08-16 17:24:40
1052
原创 告别重复造轮子！我从 0 到 1 封装一个搞定全场景的弹窗库！
在 Flutter 开发的旅程中，我们与“弹窗”的邂逅几乎是家常便饭。一个简单的 Toast、一个模态的加载框、一个需要用户抉择的对话框，它们是构成 App 交互体验不可或缺的元素。然而，看似简单的需求背后，却隐藏着不少重复劳动和潜在的“坑”。官方提供的 API 固然灵活，但在项目迭代中，我发现自己和团队成员反复被以下问题所困扰，效率和体验都大打折扣。今天，我想和大家分享的，不仅仅是一个造好的轮子——，更是一次从痛点分析到架构设计，再到具体实现的全过程复盘。
2025-08-16 14:35:33
1130
原创 前端面试，其实就是在筛选太老实的人…
不要以前卷八股文现在还卷八股文，那这样是很难拿offer的，后面的项目场景题文档很全，结合一下自身情况去理解一下解题思路，对面试也会有一定的帮助。第4题：使用同⼀个链接， 如何实现 PC 打开是 web 应用、手机打开是⼀个 H5 应用？第28题：[重要]用 nodejs 实现⼀个命令行工具， 统计输入目录下面指定代码的行数。第31题：[腾讯]为什么 SPA 应用都会提供一个 hash 路由，好处是什么？第35题：[腾讯]用户访问页面白屏了， 原因是啥， 如何排查？
2025-08-13 15:23:31
592
原创 【Vue3 实战】从0到1封装一个“框选截图”组件，顺便聊聊 html2canvas 的那些“坑”
至此，一个功能完善、体验良好、考虑周全的组件就诞生了。职责分离：通过<slot>将内容与组件能力解耦，使其更通用。精确交互：利用document监听和实现了精准、流畅的跨区域鼠标追踪。像素级复刻：借助将复杂DOM转为图片，并通过二次canvas实现裁剪。魔鬼在细节：处理高分屏模糊、忽略特定元素、小尺寸图片兜底、事件清理（记得在中）……封装组件的过程，远不止是代码的堆砌，它更像是一场与需求、技术和用户体验的博弈。每一次踩坑和优化，都是一次宝贵的成长。
2025-08-12 12:21:28
954
原创 前端组件通信新姿势：用mitt实现Toast组件的优雅通信
mitt是一个超轻量级的事件总线库，只有200字节大小，却提供了强大的功能：支持事件的监听(on)和触发(emit)支持一次性事件支持清除所有事件TypeScript友好// 监听事件// 触发事件// 清除所有事件通过mitt实现的事件总线模式，我们打造了一个灵活、解耦的Toast通知系统。全局模态框控制用户登录状态通知跨组件的数据同步复杂的多步骤交互记住，技术选型没有银弹，事件总线虽好，但也要根据实际场景合理使用。
2025-08-12 12:16:48
634
原创 Vue3 + ECharts 实现动态地图切换与平滑过渡动画
本文将详细解析如何使用 Vue3 和 ECharts 实现市级地图展示功能，并添加地图切换时的平滑过渡动画效果。功能概述。
2025-08-12 12:06:31
497
原创 为什么 position: absolute 在 Flexbox 里会失效？
Flexbox 是页面布局的利器，而 `position: absolute` 则擅长将元素脱离文档流进行精确定位。（Tooltips）等需要精确定位且不影响其他 Flex 项目布局的场景。在 Flex 容器内为何会导致“怪异行为”，并给出正确的解决方案。，构建出既灵活又精确的布局，告别莫名其妙的布局崩溃！但有时，它会让你的布局。那么，把它们结合使用岂不是如虎添翼？在 Flexbox 容器内使用。掌握了这些关键点，你就能。当你将一个元素设置为。
2025-08-12 12:03:12
383
原创 TailwindCSS：原子化CSS的革命，让React开发爽到飞起！[特殊字符]
TailwindCSS是一个实用优先(Utility-First)的CSS框架。不同于Bootstrap等传统框架，它不提供预制的组件，而是提供了一系列细粒度的工具类（utility classes），让你可以直接在HTML中组合使用。p-4→→rounded-lg→经过一段时间的实践，我发现Tailwind不仅提高了我的开发效率，还改变了我的设计思维。现在我可以像搭积木一样快速实现设计稿，再也不用为CSS类名争吵了！最后的小建议。
2025-08-09 11:34:11
880
原创 轻松实现图片拖拽交互：让网页元素像 iPad 一样流畅移动
可以！使用技术点说明使元素可拖拽dragstartdragend控制拖拽源样式dragover允许投放的关键drop最终处理投放逻辑移动端兼容建议使用专业库核心口诀dragover加dragenterleave改样式drop里处理逻辑。
2025-08-09 11:28:16
500
原创 uni-app 自定义路由封装模块详解（附源码逐行解读）
💡统一跳转 API：支持 navigateTo、switchTab、reLaunch 等🔒导航守卫机制：登录拦截与后置回调🔄query/params 分离处理🧩模块化配置，支持挂载 ctx你可以在此基础上继续拓展如：权限校验、页面缓存、历史记录管理、动画过渡管理等功能。
2025-08-09 11:25:52
453
原创 Vue3 新时代：告别 Mixin，拥抱 Composition API 的优雅革命
更清晰的代码结构更强大的类型支持更灵活的逻辑复用更可维护的项目架构"Composition API 是 Vue 生态系统的未来，它为我们提供了构建复杂应用所需的全部工具，同时保持了 Vue 标志性的简洁性。" —— Evan You（Vue 创始人）
2025-08-09 11:24:43
506
原创 [特殊字符] 前段时间火了个SSE，如今MCP为何全都弃了???
2025年5月9日，MCP（Model Context Protocol）迎来重磅升级——Streamable HTTP正式发布，取代了HTTP SSE, 成为AI模型通信的新标准！
2025-08-09 11:21:16
1084
原创 HTML ＜picture＞ 元素：让图片根据设备 “智能切换” 的响应式方案
picture>元素作为响应式图片的原生解决方案，彻底改变了图片适配的实现方式。原生智能切换：浏览器自动根据设备条件选择图片，无需JavaScript。提升性能：减少不必要的带宽消耗（小屏不加载大图，普通屏不加载高清图）。格式兼容：优先使用现代图片格式（WebP、AVIF），兼顾旧浏览器。语义化清晰<picture>明确表示“这是一组响应式图片”，提升代码可读性。在图片成为页面加载性能主要瓶颈的今天，<picture>元素的价值愈发凸显。无论是电商网站、新闻平台还是内容博客，合理使用。
2025-08-09 11:20:08
658
原创 给大家普及一下过前端面试需要达到的强度
4.使用同一个链接， 如何实现 PC 打开是 web 应用、手机打 开是一个 H5 应用?▸ “Bundle 体积减 60%：Tree Shaking +SVG 雪碧图”▸ “SSR 用 Next.js 还是 Nuxt？▸ 对比 == 与 ===，深挖隐式转换规则（[] ==!4.谈谈 Vue 事件机制，并手写$on、$off、$emit、$once。▸ “首屏加载从 5s→1.2s：代码分割 + 图片懒加载 + CDN”6.如何让 var [a, b]={a:1,b: 2}解构赋值成功?
2025-08-09 11:16:20
1072
原创 git 提交代码到别的分支
直接把当前改动“搬运”到别的分支并保持当前分支干净。这样改动只会落到目标分支，当前分支不会有任何记录。你现在的修改还在工作区（或暂存区）里，如果你想。不过这方式有风险，容易造成冲突，不建议日常用。你是想要我帮你做这个“一条命令搞定”的版本吗？这样可以不丢改动，但过程稍复杂。如果你愿意，我还可以帮你写一个。
2025-08-08 14:50:19
197
原创 [特殊字符]9种继承写法全解，第7种99%人没用过？⚠️
i18n文件转多语言 JSONplugin 注入构建时间、git commit hashsplitChunks 优化：第三方库单独打包 + 长缓存// 自定义插件示例}));});⚠️插件 hook 选错了会导致内存泄漏？
2025-08-08 14:49:25
842
原创 Vue 前端高效分包指南：从 “卡成 PPT” 到 “丝滑如德芙” 的蜕变
前端分包不是一劳永逸的工作，而是需要随着项目迭代不断调整的持续优化过程。就像给代码 “断舍离”，定期审视哪些资源可以延迟加载，哪些可以合并优化。记住，优秀的前端性能不是一蹴而就的，而是在一次次分析、调整、测试中慢慢打磨出来的。希望本文的实战经验能帮你避开分包路上的坑，让你的 Vue 项目从此告别 “加载焦虑”，给用户带来飞一般的体验！最后送大家一句我优化成功后的感悟：“代码如人生，适当的‘分包’才能轻装上阵，跑得更快更远。” 祝大家的项目都能加载如闪电，体验如德芙般丝滑~~~
2025-08-08 14:45:36
985
原创 别再用Express了！用Node.js原生HTTP模块装逼的正确姿势
你以为HTTP只是浏览器和服务器的"悄悄话"？其实它是互联网七层模型的顶流！今天就让我们用Node.js，带你从底层TCP“搬砖”，一路笑到高阶Web服务上线！🤪。
2025-08-08 14:42:50
242
原创 跨域问题解析：从同源策略到JSONP与CORS
跨域问题源于浏览器的同源策略(Same-Origin Policy)，这是浏览器的一种安全机制。当Web应用程序尝试从一个与自身"源"不同的域、协议或端口请求资源时，就会发生跨域问题。协议（如http/https）域名（如example.com）端口号（如80/443）任何一项不匹配，浏览器就会认为这是跨域请求。→（协议不同）→（端口不同）→（域名不同）CORS(Cross-Origin Resource Sharing)是现代浏览器支持的标准跨域解决方案。
2025-08-08 14:40:12
636
原创 从 jQuery 到 React 再到 Svelte：我眼中的前端组件化演进史
干了8年前端，有时候回头看，感觉就像看了一部浓缩的科技史。今天不聊某个具体的技术，我想聊聊我作为一个亲历者，是如何看待前端组件化思想这近十年的演进的。如果说React是把“如何更新DOM”的复杂工作，从“开发者”交给了“框架的运行时”，那么Svelte则更进一步，它把这项工作，从“我们写的代码越来越少，框架和工具为我们做的事情越来越多，让我们能更专注于业务逻辑本身。技术名词在变，框架在变，但背后有一条主线，我觉得一直没变，那就是我们对。回顾这八年，前端组件化的演进，在我看来，本质上就是一部经典的前端历史。
2025-08-06 18:26:51
1156
原创 面试官：后端一次性返回给前端十万条数据，渲染这十万条数据怎么能保证不卡顿
海量数据渲染优先选择后端分页处理是最好的，毕竟海量数据通过接口传输比较慢，用户等待时间长。并且数据尽量在后端完成全部的处理工作，最后交给前端只进行渲染，不再操作，尽可能节省浏览器资源。如果非得选择一次性渲染全部数据，则虚拟滚动是比较好的方案。
2025-08-06 18:21:29
453
原创 前端，真的让我感受到了信息闭塞的恐怖
以前是背八股文，现在是记背场景题，果然面试测不出来一个人的水平，一点都不影响你去敲代码，建议把面试想简单点，顺的场景题近期有面试的，希望对大家面试有帮助，适合3年经验以上的：github.com/encode-studio-fe/natural_traffic/wiki/scan_material10
2025-08-06 18:13:26
954
原创 【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
MCP (Model Context Protocol，模型上下文协议)是一种标准化的通信框架，用于大型语言模型(LLM)与外部数据源、API和工具之间的交互。这一协议解决了LLM固有的知识时效性限制问题 - 即模型只能基于训练数据回答问题，无法获取训练截止日期后的实时信息(如今日天气、最新新闻)或执行特定功能(如计算、搜索)。简单来说，我们可以把 MCP 之于 LLM 想象为扩展插件之于 VSCode，在核心功能外，给它提供更多自定义功能。接下来我们就来写个 MCP 的 “扩展程序”。
2025-08-05 12:04:05
934
原创 前端视角下的单点登录（SSO）从原理到实战
单点登录的前端实现，本质是在 "用户体验" 与 "系统安全" 之间寻找平衡。不碰敏感信息：客户端密钥、令牌兑换逻辑必须由后端处理严格校验来源：跨域通信（如 postMessage）必须验证origin遵循最小权限：令牌仅包含必要权限，且设置合理有效期。
2025-08-05 11:56:32
1003
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人