- 博客(51)
- 收藏
- 关注
RSS订阅原创 校招生问我在vue中，什么时候该用 render 函数？
最近有一位校招生入职两个多月了，开始参与组件库封装工作，其中就包含了和<space>组件，这两个组件本身并不难。他在实现过程中遇到了一些困惑，特别是对于何时该使用 render 函数感到迷茫。我建议他先参考其他成熟组件库的实现方式，并结合 render 函数来完成需求。那什么时候该用 render 函数？需要高度控制组件渲染逻辑时需要根据运行时数据动态生成组件结构时需要实现复杂的条件渲染时开发可复用组件库时。
2025-08-26 18:38:03
348
原创 实现大文件上传全流程详解(补偿版本)
核心难点解决方案代码关键位置大文件哈希计算慢抽样读取片段（首尾全量 + 中间分片抽样）calHash 函数并发请求过多导致崩溃用「请求池 + Promise.race」限制并发数uploadChunks 函数用户需要手动中断上传用 AbortController 中断请求 + 清理状态abortUpload 函数分片合并顺序错乱按分片序号排序，用流按固定位置写入后端 /merge 接口的排序逻辑刷新页面后需从头上传校验时返回已上传分片，前端过滤后再上传。
2025-08-26 18:17:21
340
原创 还在用html2canvas？介绍一个比它快100倍的截图神器！
在前端开发里，DOM 截图是一个常见但“让人头疼”的需求。html2canvas 代表的传统方案，虽然功能强大，但性能和体验常常拖后腿；而 snapDOM 借助浏览器原生渲染能力，让截图变得又快又稳。一句话： 如果你还在为截图慢、卡顿、模糊烦恼，不妨试试 snapDOM —— 可能会刷新你对前端截图的认知。
2025-08-26 18:15:34
367
原创 在浏览器里“养”一只会写字的仓鼠——AI SSE 流式文本生成全攻略
AI 不再是神秘的水晶球，而是一只可观察、可打断、可撸毛的仓鼠。给它一条跑道（SSE），你就能看到字节像毛毛雨一样落下。下次面试官问你：“如何实现实时文本生成？你可以淡定地回答——“我开了个农场，养了一只会打字的仓鼠。祝编码愉快，愿你的仓鼠永不掉线！
2025-08-22 17:51:35
464
原创 明明这三行代码没用到，我注释了之后页面却白屏了
在重构时，不要轻易删除或注释看起来"无用"的代码，特别是在复杂的依赖关系中。有时候一行看似无关的代码可能在维持整个系统的平衡。重构是好事，但要谨慎。特别是在复杂的项目中，看似简单的改动可能会触发意想不到的问题。解决问题要从根源入手，不要只是绕过问题。有时候，最简单直接的解决方案往往是最有效的！理解代码的依赖关系，比盲目地删除"无用"代码更重要。
2025-08-22 17:41:42
574
原创 跟原子CSS说不！！！PageLayout布局组件封装技巧
左侧导航顶部工具栏主体内容。可扩展性好：插槽式设计，内容与布局解耦体验优化：支持拖拽、折叠动画、移动端适配可定制：支持样式覆盖与 props 配置非常适合在 中后台系统 中作为统一的页面容器使用。
2025-08-22 17:31:04
543
原创 封装那些Vue3.0中好用的指令
最近在维护一个老项目，发现项目中用了很多的自定义指令。突然发现，自己已经很久没有封装过指令了，特别是vue3.0时代以来，这个功能我好像用的越来越少了。其实以前在2.0时代的时候，封装指令是很常见的写法（勾起了当年的回忆）。那现在既然遇到了，就封装一些很常见的指令在日常开发中可以用到的。其实关于指令的使用，vue3.0的官网写的已经很仔细了，对新手很友好。写法主要还是在提供在不同钩子函数中，执行不同操作。下面 这些是官网给出的钩子函数的执行时机// 在绑定元素的 attribute 前。
2025-08-22 17:25:09
977
原创 有了它 ，我彻底告别了 try-finally [特殊字符][特殊字符][特殊字符]
前几天看到 Rspack 团队宣布即将支持using声明，今天我们来看看using的神奇用法！开发者可以为自定义对象实现或，以支持 “using” 声明。这种灵活性让 “using” 声明适用于各种场景，从内存管理到外部资源清理。使用 “using” 声明，代码更简洁，清理逻辑自动处理，减少出错风险～如果文章中存在错误的地方欢迎指正！
2025-08-20 17:39:16
425
原创 TypeScript类型收窄：精准控制变量类型
类型收窄是TypeScript类型系统的重要特性，它让我们在享受类型安全的同时，保持代码的灵活性。通过typeof、instanceof、类型谓词和可辨别联合等手段，我们可以精确控制变量在不同代码分支中的类型，减少类型断言的使用。掌握类型收窄的关键在于理解TypeScript的控制流分析机制——编译器如何跟踪变量类型的变化。避免常见的收窄陷阱，遵循最佳实践，能帮助我们写出更安全、更易维护的TypeScript代码。
2025-08-16 17:24:40
1021
原创 告别重复造轮子！我从 0 到 1 封装一个搞定全场景的弹窗库！
在 Flutter 开发的旅程中，我们与“弹窗”的邂逅几乎是家常便饭。一个简单的 Toast、一个模态的加载框、一个需要用户抉择的对话框，它们是构成 App 交互体验不可或缺的元素。然而，看似简单的需求背后，却隐藏着不少重复劳动和潜在的“坑”。官方提供的 API 固然灵活，但在项目迭代中，我发现自己和团队成员反复被以下问题所困扰，效率和体验都大打折扣。今天，我想和大家分享的，不仅仅是一个造好的轮子——，更是一次从痛点分析到架构设计，再到具体实现的全过程复盘。
2025-08-16 14:35:33
1113
原创 前端面试，其实就是在筛选太老实的人…
不要以前卷八股文现在还卷八股文，那这样是很难拿offer的，后面的项目场景题文档很全，结合一下自身情况去理解一下解题思路，对面试也会有一定的帮助。第4题：使用同⼀个链接， 如何实现 PC 打开是 web 应用、手机打开是⼀个 H5 应用？第28题：[重要]用 nodejs 实现⼀个命令行工具， 统计输入目录下面指定代码的行数。第31题：[腾讯]为什么 SPA 应用都会提供一个 hash 路由，好处是什么？第35题：[腾讯]用户访问页面白屏了， 原因是啥， 如何排查？
2025-08-13 15:23:31
585
原创 【Vue3 实战】从0到1封装一个“框选截图”组件，顺便聊聊 html2canvas 的那些“坑”
至此，一个功能完善、体验良好、考虑周全的组件就诞生了。职责分离：通过<slot>将内容与组件能力解耦，使其更通用。精确交互：利用document监听和实现了精准、流畅的跨区域鼠标追踪。像素级复刻：借助将复杂DOM转为图片，并通过二次canvas实现裁剪。魔鬼在细节：处理高分屏模糊、忽略特定元素、小尺寸图片兜底、事件清理（记得在中）……封装组件的过程，远不止是代码的堆砌，它更像是一场与需求、技术和用户体验的博弈。每一次踩坑和优化，都是一次宝贵的成长。
2025-08-12 12:21:28
916
原创 前端组件通信新姿势：用mitt实现Toast组件的优雅通信
mitt是一个超轻量级的事件总线库，只有200字节大小，却提供了强大的功能：支持事件的监听(on)和触发(emit)支持一次性事件支持清除所有事件TypeScript友好// 监听事件// 触发事件// 清除所有事件通过mitt实现的事件总线模式，我们打造了一个灵活、解耦的Toast通知系统。全局模态框控制用户登录状态通知跨组件的数据同步复杂的多步骤交互记住，技术选型没有银弹，事件总线虽好，但也要根据实际场景合理使用。
2025-08-12 12:16:48
618
原创 Vue3 + ECharts 实现动态地图切换与平滑过渡动画
本文将详细解析如何使用 Vue3 和 ECharts 实现市级地图展示功能，并添加地图切换时的平滑过渡动画效果。功能概述。
2025-08-12 12:06:31
439
原创 为什么 position: absolute 在 Flexbox 里会失效？
Flexbox 是页面布局的利器，而 `position: absolute` 则擅长将元素脱离文档流进行精确定位。（Tooltips）等需要精确定位且不影响其他 Flex 项目布局的场景。在 Flex 容器内为何会导致“怪异行为”，并给出正确的解决方案。，构建出既灵活又精确的布局，告别莫名其妙的布局崩溃！但有时，它会让你的布局。那么，把它们结合使用岂不是如虎添翼？在 Flexbox 容器内使用。掌握了这些关键点，你就能。当你将一个元素设置为。
2025-08-12 12:03:12
352
原创 TailwindCSS：原子化CSS的革命，让React开发爽到飞起！[特殊字符]
TailwindCSS是一个实用优先(Utility-First)的CSS框架。不同于Bootstrap等传统框架，它不提供预制的组件，而是提供了一系列细粒度的工具类（utility classes），让你可以直接在HTML中组合使用。p-4→→rounded-lg→经过一段时间的实践，我发现Tailwind不仅提高了我的开发效率，还改变了我的设计思维。现在我可以像搭积木一样快速实现设计稿，再也不用为CSS类名争吵了！最后的小建议。
2025-08-09 11:34:11
861
原创 轻松实现图片拖拽交互：让网页元素像 iPad 一样流畅移动
可以！使用技术点说明使元素可拖拽dragstartdragend控制拖拽源样式dragover允许投放的关键drop最终处理投放逻辑移动端兼容建议使用专业库核心口诀dragover加dragenterleave改样式drop里处理逻辑。
2025-08-09 11:28:16
459
原创 uni-app 自定义路由封装模块详解（附源码逐行解读）
💡统一跳转 API：支持 navigateTo、switchTab、reLaunch 等🔒导航守卫机制：登录拦截与后置回调🔄query/params 分离处理🧩模块化配置，支持挂载 ctx你可以在此基础上继续拓展如：权限校验、页面缓存、历史记录管理、动画过渡管理等功能。
2025-08-09 11:25:52
430
原创 Vue3 新时代：告别 Mixin，拥抱 Composition API 的优雅革命
更清晰的代码结构更强大的类型支持更灵活的逻辑复用更可维护的项目架构"Composition API 是 Vue 生态系统的未来，它为我们提供了构建复杂应用所需的全部工具，同时保持了 Vue 标志性的简洁性。" —— Evan You（Vue 创始人）
2025-08-09 11:24:43
472
原创 [特殊字符] 前段时间火了个SSE，如今MCP为何全都弃了???
2025年5月9日，MCP（Model Context Protocol）迎来重磅升级——Streamable HTTP正式发布，取代了HTTP SSE, 成为AI模型通信的新标准！
2025-08-09 11:21:16
1040
原创 HTML ＜picture＞ 元素：让图片根据设备 “智能切换” 的响应式方案
picture>元素作为响应式图片的原生解决方案，彻底改变了图片适配的实现方式。原生智能切换：浏览器自动根据设备条件选择图片，无需JavaScript。提升性能：减少不必要的带宽消耗（小屏不加载大图，普通屏不加载高清图）。格式兼容：优先使用现代图片格式（WebP、AVIF），兼顾旧浏览器。语义化清晰<picture>明确表示“这是一组响应式图片”，提升代码可读性。在图片成为页面加载性能主要瓶颈的今天，<picture>元素的价值愈发凸显。无论是电商网站、新闻平台还是内容博客，合理使用。
2025-08-09 11:20:08
634
原创 给大家普及一下过前端面试需要达到的强度
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
1060
原创 git 提交代码到别的分支
直接把当前改动“搬运”到别的分支并保持当前分支干净。这样改动只会落到目标分支，当前分支不会有任何记录。你现在的修改还在工作区（或暂存区）里，如果你想。不过这方式有风险，容易造成冲突，不建议日常用。你是想要我帮你做这个“一条命令搞定”的版本吗？这样可以不丢改动，但过程稍复杂。如果你愿意，我还可以帮你写一个。
2025-08-08 14:50:19
147
原创 [特殊字符]9种继承写法全解，第7种99%人没用过？⚠️
i18n文件转多语言 JSONplugin 注入构建时间、git commit hashsplitChunks 优化：第三方库单独打包 + 长缓存// 自定义插件示例}));});⚠️插件 hook 选错了会导致内存泄漏？
2025-08-08 14:49:25
826
原创 Vue 前端高效分包指南：从 “卡成 PPT” 到 “丝滑如德芙” 的蜕变
前端分包不是一劳永逸的工作，而是需要随着项目迭代不断调整的持续优化过程。就像给代码 “断舍离”，定期审视哪些资源可以延迟加载，哪些可以合并优化。记住，优秀的前端性能不是一蹴而就的，而是在一次次分析、调整、测试中慢慢打磨出来的。希望本文的实战经验能帮你避开分包路上的坑，让你的 Vue 项目从此告别 “加载焦虑”，给用户带来飞一般的体验！最后送大家一句我优化成功后的感悟：“代码如人生，适当的‘分包’才能轻装上阵，跑得更快更远。” 祝大家的项目都能加载如闪电，体验如德芙般丝滑~~~
2025-08-08 14:45:36
901
原创 别再用Express了！用Node.js原生HTTP模块装逼的正确姿势
你以为HTTP只是浏览器和服务器的"悄悄话"？其实它是互联网七层模型的顶流！今天就让我们用Node.js，带你从底层TCP“搬砖”，一路笑到高阶Web服务上线！🤪。
2025-08-08 14:42:50
240
原创 跨域问题解析：从同源策略到JSONP与CORS
跨域问题源于浏览器的同源策略(Same-Origin Policy)，这是浏览器的一种安全机制。当Web应用程序尝试从一个与自身"源"不同的域、协议或端口请求资源时，就会发生跨域问题。协议（如http/https）域名（如example.com）端口号（如80/443）任何一项不匹配，浏览器就会认为这是跨域请求。→（协议不同）→（端口不同）→（域名不同）CORS(Cross-Origin Resource Sharing)是现代浏览器支持的标准跨域解决方案。
2025-08-08 14:40:12
626
原创 从 jQuery 到 React 再到 Svelte：我眼中的前端组件化演进史
干了8年前端，有时候回头看，感觉就像看了一部浓缩的科技史。今天不聊某个具体的技术，我想聊聊我作为一个亲历者，是如何看待前端组件化思想这近十年的演进的。如果说React是把“如何更新DOM”的复杂工作，从“开发者”交给了“框架的运行时”，那么Svelte则更进一步，它把这项工作，从“我们写的代码越来越少，框架和工具为我们做的事情越来越多，让我们能更专注于业务逻辑本身。技术名词在变，框架在变，但背后有一条主线，我觉得一直没变，那就是我们对。回顾这八年，前端组件化的演进，在我看来，本质上就是一部经典的前端历史。
2025-08-06 18:26:51
1116
原创 面试官：后端一次性返回给前端十万条数据，渲染这十万条数据怎么能保证不卡顿
海量数据渲染优先选择后端分页处理是最好的，毕竟海量数据通过接口传输比较慢，用户等待时间长。并且数据尽量在后端完成全部的处理工作，最后交给前端只进行渲染，不再操作，尽可能节省浏览器资源。如果非得选择一次性渲染全部数据，则虚拟滚动是比较好的方案。
2025-08-06 18:21:29
416
原创 前端，真的让我感受到了信息闭塞的恐怖
以前是背八股文，现在是记背场景题，果然面试测不出来一个人的水平，一点都不影响你去敲代码，建议把面试想简单点，顺的场景题近期有面试的，希望对大家面试有帮助，适合3年经验以上的：github.com/encode-studio-fe/natural_traffic/wiki/scan_material10
2025-08-06 18:13:26
947
原创 【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
MCP (Model Context Protocol，模型上下文协议)是一种标准化的通信框架，用于大型语言模型(LLM)与外部数据源、API和工具之间的交互。这一协议解决了LLM固有的知识时效性限制问题 - 即模型只能基于训练数据回答问题，无法获取训练截止日期后的实时信息(如今日天气、最新新闻)或执行特定功能(如计算、搜索)。简单来说，我们可以把 MCP 之于 LLM 想象为扩展插件之于 VSCode，在核心功能外，给它提供更多自定义功能。接下来我们就来写个 MCP 的 “扩展程序”。
2025-08-05 12:04:05
802
原创 前端视角下的单点登录（SSO）从原理到实战
单点登录的前端实现，本质是在 "用户体验" 与 "系统安全" 之间寻找平衡。不碰敏感信息：客户端密钥、令牌兑换逻辑必须由后端处理严格校验来源：跨域通信（如 postMessage）必须验证origin遵循最小权限：令牌仅包含必要权限，且设置合理有效期。
2025-08-05 11:56:32
877
原创 Web Components 实践指南：如何优雅使用 Shadow DOM？
我们常见的 Web Components 示例通常只关注自定义元素（Custom Elements），比如这样的标签。自定义元素（Custom Elements）HTML 模板（HTML Templates）影子 DOM（Shadow DOM）这意味着：你可以只用自定义元素而不必引入 Shadow DOM，但一旦你需要封装样式、避免冲突、提高组件的复用性，Shadow DOM 就会变得不可或缺。Shadow DOM 是什么？什么时候应该用？怎么用才安全高效？
2025-08-05 11:50:18
791
原创 【JavaScript】浅聊作用域和作用域链
作用域直接影响代码的执行逻辑和变量的生命周期作用域决定了程序中其中存放的变量、函数、对象是都可以在当前环境被访问或修改。作用域就是一个代码区块中各种资源可以发挥作用的范围var innerVar = '函数内部变量'console.log(innerVar) // '函数内部变量'outer() // 需要调用函数，不然不知到里面是什么变量innerVar在全局范围内没有声明。所以在outer函数体范围外的全局作用域下取值会报错。作用域相当于一块单独的区域，将各个区域的变量隔离开，防止暴露。
2025-08-01 17:15:05
632
原创 告别“if-else”条件判断：5 个让 JavaScript 逻辑更优雅的写法
在 JavaScript 的世界里，if-else就像一把瑞士军刀：简单、万能、随处可见。但业务一旦膨胀，层层嵌套的判断语句就会像一团乱麻，剪不断、理还乱。好消息是，这门灵活的语言给我们提供了不少“换刀”方案——既保留语义，又让代码看上去像精心排版的文章，而不是绕口令。下面分享 5 种“无痛替代”思路，配合代码示例，帮你把“面条状”条件判断梳理成“鱼骨图”。
2025-08-01 17:03:09
421
原创 前端必会：Promise 全解析，从原理到实战
Promise 是 ES6 引入的一种异步编程的新解决方案，它是一个对象，代表了一个异步操作的最终完成（或成功）及其结果值。简单来说，Promise 就像是一个容器，里面保存着某个未来才会结束的事件（通常是异步操作）的结果。从语法上讲，Promise 是一个对象，通过它可以获取异步操作的消息，并且提供了统一的 API，使得各种异步操作都能用同样的方式进行处理。
2025-08-01 12:05:59
836
原创 “全栈”正在淘汰“前端”吗？一个前端专家的焦虑与思考
而一个前端专家，他的核心竞争力，应该体现在对用户体验的全方位把控上：交互的细节、动画的流畅度、加载的性能、操作的便捷性、视觉的保真度、以及对所有人群都友好的无障碍设计。在一个团队里，当所有全栈工程师都能快速实现一个80分的功能时，那个能站出来，把一个核心功能的性能从80分优化到95分，或者解决一个极其诡异的浏览器兼容性Bug的专家，他的价值是无可替代的。拓宽自己的知识广度（T的横向），去了解Node.js，了解部署，是必须的。在抱怨之前，我得承认，这个趋势的出现，是技术发展和商业需求的必然结果。
2025-08-01 11:26:10
458
原创 调试代码，是每个前端逃不过的必修课[特殊字符][特殊字符][特殊字符]
launch可自动启动 Chrome 并打开页面，使用简单，适合本地开发调试；而attach则需手动启动带调试端口的 Chrome，适合更复杂的场景。通过配置，你可以设置断点、跳过第三方库（如 node_modules），并在编辑器中查看变量与调用栈。相比 Chrome DevTools，VSCode 调试集成度更高，避免频繁切换窗口，效率更优。注意使用skipFiles提升调试专注度，调试体验会更加流畅。
2025-08-01 11:20:13
600
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人