- 博客(39)
- 收藏
- 关注
RSS订阅原创 Monorepo项目构建揭秘：公共packages如何融入独立项目打包
Monorepo项目中公共packages的打包机制是一个优雅的设计：通过workspace链接，公共库的源码直接参与应用的构建流程，利用现代构建工具的Tree Shaking能力实现按需打包。这种机制既保证了代码的复用性，又避免了不必要的包体积膨胀，是现代前端工程化的重要组成部分。但这种配置在Monorepo的workspace环境下较少使用，因为违背了代码共享和统一构建的初衷。这意味着公共库的源码会直接参与到应用的打包流程中，而不是作为一个独立的外部依赖。是一个独立的应用项目，而。
2026-04-09 15:20:24
421
原创 在Vibe Coding与优雅架构间找到平衡
本文探讨了在AI辅助编程时代如何平衡快速功能开发（Vibe Coding）与代码质量（优雅重构）的问题。作者提出分层策略：功能阶段允许临时性补丁代码但限制污染范围，稳定后进入重构阶段主动优化结构。给出了四步重构法和五项重构触发标准，建议开发者主导架构设计，让AI负责实现。核心观点是开发者需要在关键节点主动控制重构节奏，避免陷入补丁地狱，使AI成为真正的开发加速器而非技术债务制造者。最终目标是解决当前实际问题而非过度抽象未来需求。
2026-04-08 15:41:20
355
原创 Taro 小程序如何优雅地分包
本文以「AI作文」小程序为例，详细介绍了Taro框架下实现优雅分包的方法。通过集中式路由管理和显式分包声明，将写作功能和素材搜索功能分别放入不同分包，同时自动过滤主包页面。文章强调分包的本质是遵循小程序平台规范，Taro只是提供配置入口。指出了分包的必要性、常见误区及注意事项，如TabBar页面限制、分包间引用限制等。最后总结了通过路由统一管理和自动过滤机制，可以实现清晰可扩展的分包架构，适用于各类复杂业务场景。
2026-04-02 16:47:22
665
原创 小程序中简单 Loading 效果关键帧动画
本文介绍了小程序中利用CSS实现两种常见Loading动画的方法。首先提出前端动效设计原则：优先使用高性能的transform和opacity属性，通过@keyframes定义动画过程，用animation控制播放方式。然后详细讲解了两种动效的实现：1) 旋转式Loading，使用rotate实现图标持续旋转；2) 呼吸灯式Loading，结合scale和opacity实现星星闪烁效果，并通过animation-delay实现错峰动画。文章总结指出，利用CSS关键帧动画可以简洁高效地实现优雅的Loading
2026-03-25 17:36:18
476
原创 小程序分享功能（海报图，链接卡片）
微信小程序分享功能解析：三种主流实现方式 本文介绍了微信小程序中三种常见的分享场景实现方法： 胶囊按钮分享 - 通过useShareAppMessage配置分享卡片内容 自定义按钮分享 - 使用Button组件触发，支持动态生成分享内容 海报图片分享 - 通过showShareImageMenu分享本地图片并附带小程序入口 文章提供了详细的Taro框架代码示例，并给出最佳实践建议：统一管理分享逻辑、动态参数传递、真机测试和合规性注意事项。三种方式分别适用于不同业务场景，开发者可根据需求灵活选择。
2026-03-19 17:51:43
807
原创 前端开发神器 - Image Preview插件
🔍 前端开发必备神器：Image Preview 插件 这款 VS Code 插件让图片预览变得无比简单： 鼠标悬停即可预览 CDN/本地图片 支持 CSS background-image、HTML img 等多种引用方式 安装简单，直接在扩展市场搜索安装 💡 从此告别复制链接到浏览器查看的繁琐操作，提升开发效率！
2026-03-19 16:24:13
157
原创 Taro小程序生命周期
本文系统梳理了Taro框架中的生命周期钩子使用经验。重点介绍了全局生命周期（Taro.onAppShow、useLaunch）和页面级生命周期（useDidShow、useEffect）的调用时机和典型应用场景，包括应用启动初始化、页面数据刷新、埋点上报等核心功能。文章还分析了生命周期执行顺序，并给出5条最佳实践建议，如将初始化逻辑放在useLaunch、页面刷新使用useDidShow等，帮助开发者避免常见误区，编写更优雅的跨端小程序代码。适用于Taro 4.x + React技术栈的微信/支付宝等小程序
2026-03-07 12:06:16
458
原创 小程序如何发布体验版？
本文介绍了微信小程序发布体验版的标准流程：1）本地执行构建命令生成小程序代码；2）在微信开发者工具中调试确保功能正常；3）通过开发者工具上传代码至微信公众平台；4）在管理后台将上传版本设为体验版。整个过程包含构建、调试、上传、设置四个关键步骤，帮助开发新手快速掌握小程序体验版发布方法。文末还提供了微信公众平台相关页面的直接链接，便于开发者快速操作。
2026-02-26 17:34:37
1108
原创 2026一月份面试问题笔记分享
本文整理了多家公司前端开发岗位的面试题目，涵盖字节跳动、阿里健康、杭州壹网壹创等企业。主要考察技术点包括：Git操作、SSR、TypeScript泛型、闭包、浏览器渲染原理、React Hooks、状态管理、DOM操作、事件循环、BFC、Promise串行请求、Webpack构建等。题目涉及基础概念理解、实际场景应用和手写代码能力，反映了企业对前端开发者技术广度和深度并重的要求，特别关注React/Vue框架、TypeScript和性能优化等核心技能。
2026-02-10 23:30:25
520
原创 CSS实现动画的几种方式
本文介绍了CSS实现动画的三种主流方式：Transition适用于简单属性过渡，Animation通过关键帧控制复杂动画，Transform用于元素几何变换。文章对比了各方式的特点和适用场景，提供了具体代码示例，并分享了提升动画性能的技巧（如使用GPU加速）。建议根据动画复杂度选择合适方式：简单状态切换用Transition，多状态动画用Animation，结合Transform实现更丰富效果。
2026-01-08 22:21:56
464
原创 从零开始：将本地代码推送到 GitHub 的完整流程与避坑指南
本文记录了将本地 Vue CLI 项目推送到 GitHub 时遇到的常见问题及解决方案。首先遇到"未配置远程仓库"错误，需通过git remote add添加；其次因 GitHub 禁用密码认证，必须改用 SSH 或 Token 方式。详细介绍了 SSH 密钥生成、GitHub 配置和测试流程，并强调了统一使用 SSH 地址的重要性。最后总结了一份踩坑清单，建议新项目统一使用 SSH 方式管理，定期备份私钥，并注意 GitHub 默认分支已改为 main。文章帮助初学者理解 Git 远程
2026-01-06 17:23:14
691
原创 webpack中loader和plugin的区别
本文详细解析了Webpack中Loader和Plugin的核心区别。Loader用于转换模块源代码，作用于单个文件，如babel-loader转换ES6代码；Plugin扩展Webpack功能，作用于整个构建流程，如HtmlWebpackPlugin生成HTML文件。关键差异包括：Loader处理文件内容，配置在module.rules中；Plugin操作编译过程，通过plugins数组注册。文章还列举了常用Loader和Plugin，强调二者配合使用才能构建高效前端工程体系。
2026-01-06 01:51:42
783
原创 面试：了解闭包吗？
摘要： 闭包（Closure）是函数访问并保留其词法作用域变量的机制，即使函数在外部调用仍能访问原作用域变量。其核心作用包括数据封装、状态保持（如计数器、防抖）和实现高阶函数（如柯里化）。但闭包可能导致内存泄漏（长期引用大对象）、意外状态共享（循环中变量共享）和调试困难（如React中的过期闭包问题）。最佳实践包括避免不必要的闭包、解除引用及监控内存使用。在React中需注意useEffect依赖项以避免闭包陷阱。
2026-01-01 11:47:50
439
原创 面试：React虚拟DOM是什么？解决了哪些问题？
React 的虚拟 DOM 是一种轻量级的 JavaScript 对象表示，用于高效更新 UI。它通过以下流程工作：重建虚拟 DOM、比较新旧树（diffing）、计算最小变更并批量更新真实 DOM（reconciliation）。这解决了频繁操作真实 DOM 导致的性能问题，减少了重绘和回流。虚拟 DOM 虽非最快方案，但平衡了开发体验与性能。React 18 的并发渲染进一步优化了调度能力，而 key 属性帮助识别列表元素唯一性。虚拟 DOM 是 React 提升性能的核心机制，通过智能批量更新解决 D
2025-12-30 08:06:02
370
原创 TypeScript 内置工具类型全解析
TypeScript内置工具类型全解析：提升开发效率的类型操作指南 本文系统介绍了TypeScript内置的实用工具类型(Utility Types)，它们能显著提升类型系统的灵活性和开发效率。主要内容包括： 属性操作类：Partial(可选)、Required(必填)、Readonly(只读)、Pick(选取)、Omit(剔除)等，用于对象类型的属性修饰和裁剪。 函数相关工具：ReturnType(返回值类型)、Parameters(参数元组)、Awaited(Promise解包)等，可提取函数类型信息。
2025-12-29 21:39:45
914
原创 http缓存
HTTP缓存分为强缓存和协商缓存两类。强缓存通过Cache-Control或Expires实现，浏览器直接使用本地资源；协商缓存通过Last-Modified或ETag验证资源是否更新。实际开发中，静态资源建议设置长期缓存并配合文件哈希，HTML文件建议禁用强缓存。合理配置缓存策略可显著提升性能，通过Chrome开发者工具可调试缓存行为。
2025-12-29 15:46:18
372
原创 HTTP和HTTPS的区别
HTTP是明文传输协议，HTTPS则在HTTP基础上加入SSL/TLS加密层，通过对称加密、非对称加密和数字证书保障数据安全性、完整性和身份认证。HTTP使用80端口，HTTPS默认443端口。HTTPS虽有一定性能开销，但现代优化技术已大幅降低影响。搜索引擎优先索引HTTPS网站，现代浏览器对HTTP标记不安全，且部分Web API仅支持HTTPS。开发中应始终使用HTTPS，并注意混合内容问题。
2025-12-29 15:27:26
1063
原创 浏览器输入url后。。。
文章摘要： 当在浏览器输入URL并回车后，整个过程分为多个阶段：URL解析（补全协议）、DNS查询（从缓存到根域名服务器逐级解析）、TCP三次握手建立连接（HTTPS还需TLS握手）。随后浏览器发送HTTP请求，服务器处理并返回响应（HTML/CSS/JS等）。浏览器解析响应，构建DOM和CSSOM树，渲染页面并加载额外资源（如图片、脚本）。最终页面可交互（TTI）。关键优化点包括DNS预解析、HTTP/2多路复用、缓存策略及前端懒加载等。整个过程涉及网络协议、安全加密和浏览器渲染机制。（149字）
2025-12-29 14:48:40
627
原创 面试题：了解事件循环吗
本文深入解析了JavaScript事件循环机制，重点阐述了宏任务与微任务的区别及执行顺序。文章指出事件循环由调用栈、宏任务队列和微任务队列组成，强调微任务优先级高于宏任务。通过经典代码示例，详细展示了"同步代码→微任务→宏任务"的执行流程，并澄清了常见误区。核心结论是：每个宏任务执行后都会立即清空微任务队列，这一机制确保了Promise等微任务优先于setTimeout执行。理解这一原理对掌握JavaScript异步编程至关重要。
2025-12-29 12:19:27
647
原创 前端必知：什么是 GPU 加速？它如何提升 Web 性能？
本文深入探讨了前端开发中的GPU加速技术。首先解释了GPU加速的概念，即通过将渲染任务从CPU转移到GPU来提升性能。接着分析了GPU加速的价值在于创建合成层，避免重排重绘。文章详细列出了触发GPU加速的CSS属性，如transform、will-change等，并提供了实战建议和注意事项。最后强调要合理使用该技术，避免过度创建图层导致性能下降。文中还推荐了相关学习资源，帮助开发者进一步优化Web性能。
2025-12-28 23:00:02
1200
原创 你了解react合成事件吗
React 合成事件（SyntheticEvent）是 React 封装的一套跨浏览器事件系统，用于统一事件行为和提升性能。它通过事件委托在根容器上监听事件，捕获原生事件后在虚拟组件树中模拟冒泡过程，依次调用事件处理器。从 React 17 开始，事件委托目标改为应用根容器以避免全局污染，并移除了事件池机制，使异步访问事件对象更安全。合成事件确保了高性能和一致的事件处理体验。
2025-12-28 21:12:06
269
原创 当面试官问：“介绍下 Fiber” —— 一篇深入浅出的 React Fiber 解析
React Fiber 是 React 16 引入的核心协调引擎，它采用可中断的链表数据结构替代传统的递归渲染方式。Fiber 通过任务切片和优先级调度实现异步渲染，将工作分为协调（可中断）和提交（不可中断）两个阶段，显著提升了应用响应性。其核心优势包括支持时间分片、多优先级任务调度，为并发模式奠定基础，解决了复杂更新导致的卡顿问题，是现代 React 高性能的关键机制。
2025-12-24 19:42:54
970
原创 webpack构建流程
本文详细解析了Webpack构建流程的三个核心阶段：初始化阶段读取配置并创建Compiler对象；编译阶段从入口出发构建依赖图谱；输出阶段将模块组合成Chunk并生成最终Bundle文件。文章还深入探讨了事件流机制和关键概念（Module/Chunk/Bundle），并提供了流程总结表格，帮助理解Webpack如何通过分析模块依赖关系实现资源打包。
2025-12-21 11:24:37
576
原创 用 `@microsoft/fetch-event-source` 实现可靠的 SSE 对话流：从原理到封装实践
摘要：基于 @microsoft/fetch-event-source 实现 AI 对话流式响应 本文探讨了使用 SSE（Server-Sent Events）技术实现 AI 对话流式响应的方法，重点介绍了 @microsoft/fetch-event-source 库的封装实践。原生 EventSource 存在无法发送 POST 请求、错误处理薄弱等缺陷，而 @microsoft/fetch-event-source 通过结合 fetch API 和 SSE 协议，解决了这些问题。文章详细展示了如何封装
2025-12-18 16:32:26
1230
原创 TypeScript 中 type 与 interface 的区别详解
TypeScript 中 type 和 interface 是两种主要的类型定义方式，它们有以下关键区别：1) type 是类型别名，可以为任意类型创建新名称，而 interface 只能描述对象结构；2) type 使用 & 扩展，interface 用 extends 并支持多继承；3) type 支持联合、元组等复杂类型，interface 不行；4) interface 支持声明合并，type 不允许重复定义。建议对象结构优先用 interface，复杂类型用 type，团队项目保持一致性。
2025-12-17 17:58:36
494
原创 什么是原型方法
本文从数组的 map() 方法入手，通俗易懂地讲解了 JavaScript 的原型机制。核心观点是：数组方法并非数组实例自身拥有，而是通过原型链从 Array.prototype 继承而来。文章首先通过 Dog 构造函数的例子引入原型概念，然后揭示 [1,2,3].map() 实际上是调用 Array.prototype.map，并通过 hasOwnProperty 验证方法来源。最后解释了原型链的工作原理和这种设计的内存节省优势，总结出原型方法、共享特性和原型链查找三个关键要点，帮助初学者理解 JavaS
2025-12-14 16:24:41
603
原创 前端自动化测试全解析：从单元测试到端对端测试
本文系统介绍了前端自动化测试的四大类型：单元测试（验证最小代码单元）、集成测试（检查模块交互）、UI测试（确认界面呈现）和端对端测试（模拟用户完整流程）。针对每种测试类型，文章详细阐述了其核心价值、适用场景和主流技术方案（如Jest、Cypress等），并通过代码示例展示具体实现。作者强调自动化测试对预防Bug、提升重构信心和团队效率的重要作用，建议团队根据项目阶段逐步建立测试体系，从单元测试开始，最终实现完整的E2E测试流水线。
2025-12-02 23:45:31
1128
原创 从“点击按钮”到“AI 理解”：前端工程师也能看懂的 Transformer 全流程
《前端视角：从点击到AI理解的Transformer全流程》 本文以前端工程师视角解析Transformer架构，用通俗类比揭示AI思考过程：1）输入文本通过分词和嵌入层转为向量；2）位置编码标记词序；3）编码器通过自注意力机制（类似JS的map和权重计算）分析词间关系；4）多头注意力像"阅读时圈重点"，前馈网络增强语义表达。Transformer的并行处理和全局感知能力使其成为GPT等大模型的基石。前端开发者理解该流程可优化加载动画、调试RAG应用并设计高效Prompt，让AI交互更自
2025-11-09 18:45:56
986
原创 从“点击按钮”到“AI 决策”：前端工程师也能看懂的神经网络入门
摘要： 神经网络是一种模仿人脑的数学模型，通过输入数据经多层计算输出结果。它由输入层、隐藏层和输出层组成，通过线性变换和非线性激活函数处理数据，利用反向传播和梯度下降自动调参。前端工程师虽不直接训练模型，但在AI应用中需理解神经网络的输入输出关系，以优化交互设计、提升用户体验。神经网络并非神秘黑盒，而是复杂数学函数的组合，前端作为AI的“眼睛和嘴巴”，需与其协同工作。理解神经网络原理有助于前端开发者在智能客服、推荐系统等场景中更好地与算法协作，实现更高效的人机交互。
2025-11-09 15:45:06
690
原创 从“传统模型”到大模型：我们是如何一步步走向智能的
文章摘要：本文探讨了从传统模型到大模型的技术演进历程。传统模型采用"输入→映射→输出"的数学工具模式，通过固定格式的数据训练，在特定领域表现稳定可靠。随着深度学习发展，大模型凭借多模态输入、通用预训练和万亿级参数等优势，实现了从"专业工匠"到"通才学生"的转变。当前行业正致力于构建大模型开发平台和智能Agent系统，推动AI从被动响应向主动思考的进阶。理解这一演进过程，对把握AI技术发展方向具有重要意义。（149字）
2025-11-08 18:27:12
572
原创 在 UmiJS 工程中集成 TailwindCSS
TailwindCSS 是一个功能类 utility-first的 CSS 框架，它不提供预设组件（如按钮、卡片等），而是通过一系列原子化的类名来构建界面。例如：</这里的text-white等都是 Tailwind 提供的“实用类”，它们直接映射到具体的 CSS 属性。TailwindCSS 以其极简的设计哲学和强大的灵活性，正在改变我们编写样式的习惯。而在 UmiJS 这样的现代化框架中集成它，不仅简单高效，还能充分发挥其潜力。
2025-11-05 11:05:16
1294
原创 前端工程师如何理解实体
“单个实体”是软件系统中可唯一标识的具体实例，如ID为123的任务。它与实体集合（如所有任务列表）在操作逻辑上有本质区别：单个实体支持精确的增删改查，而集合主要用于查询和批量创建。在数据库、API设计和面向对象编程中，区分单个实体和集合是构建清晰系统的关键。RESTful接口中，单个实体通过/tasks/{id}等路径标识，体现唯一性和独立性。理解这一概念有助于规范数据建模和接口设计。
2025-11-03 17:52:36
362
原创 rem是什么？
摘要： rem 是基于根元素（<html>）字体大小的相对单位，默认 1rem = 16px（浏览器预设）。与固定单位 px 不同，rem 会随根字体大小变化，支持响应式布局和无障碍适配。相比 em（继承父级字体），rem 更稳定，适合全局尺寸控制。通过修改 html { font-size } 可统一调整所有 rem 元素比例，推荐用于现代CSS开发以实现一致性、可扩展性和用户友好性。
2025-11-03 14:01:03
566
原创 踩坑！类数组HTMLCollection遍历
文章摘要：作者遇到一个JavaScript问题，发现document.getElementById返回的值无法直接使用forEach遍历。文中提出了两种解决方案：一是使用Array.from进行强制转换，二是为HTMLCollection原型添加forEach方法。作者通过代码示例展示了第二种方案，利用Array.prototype.slice将类数组对象转为数组后调用forEach。这个方法适用于HTMLCollection和NodeList等类数组对象，解决了直接遍历DOM集合的问题。（149字）
2023-08-07 18:26:10
1351
1
原创 Cookie 中的 SameSite 属性详解
本文详细介绍了Cookie的SameSite属性及其在防范CSRF攻击中的作用。SameSite有三种取值：Strict（完全禁止跨站请求携带Cookie）、Lax（默认值，允许安全GET请求携带）、None（需配合Secure属性允许所有跨站请求）。文章解释了同站与跨站的区别，建议大多数网站使用Lax，高安全场景用Strict，仅在必要时用None并确保HTTPS。该属性能有效平衡安全性与用户体验。
2023-06-04 21:43:55
702
1
原创 封装 Axios：构建健壮、统一的前端请求层
本文介绍了如何封装Axios构建统一的前端请求层。指出Axios相比原生请求工具的优势包括Promise支持、跨平台兼容、自动JSON转换和拦截器功能等。通过封装示例展示了如何实现统一请求头、表单序列化、请求取消、自动重试等特性，并分析了封装带来的好处：简化调用、统一错误处理、增强安全性、便于扩展和提升健壮性。最终目的是创建更易用、可靠的HTTP请求工具，提高开发效率和代码质量。
2023-03-30 20:07:51
58
原创 Vue.js 入门指南（初学者友好）
1.为什么要用前端框架？js框架对一下几点操作都有自己近乎趋近完美的解决方案渲染数据操作DOM操作cookie等存储机制api2.MV*模式介绍阮一峰MVC模型(Model):数据保存视图(View):用户假面控制器(controller):数据保存1.View 传送指令到 Controller2.Controller 完成业务逻辑后，要求 Model 改变状态3....
2019-10-17 20:21:44
168
原创 NoSql非关系型数据库
MongoDB是一种非关系型(NoSQL)数据库，采用文档形式存储数据，核心概念包括数据库、集合和文档。文档采用BSON格式存储，是JSON的二进制扩展，支持更多数据类型。MongoDB提供完整的CRUD操作：插入文档(insert/save)、查询文档(find)、更新文档(update)和删除文档(remove)，并支持排序、限制等查询功能。其特点包括灵活的文档模型、高性能、强大的扩展能力、高可用性以及丰富的查询语言。相比传统SQL数据库，MongoDB没有固定表结构，更适合处理半结构化或非结构化数据。
2019-10-15 11:22:11
215
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人