<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[xuehao1997的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/xuehao1997</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; xuehao1997]]></copyright><item><title><![CDATA[Monorepo项目构建揭秘：公共packages如何融入独立项目打包]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/159987796</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/159987796</guid><author>xuehao1997</author><pubDate>Thu, 09 Apr 2026 15:20:24 +0800</pubDate><description><![CDATA[Monorepo项目中公共packages的打包机制是一个优雅的设计：通过workspace链接，公共库的源码直接参与应用的构建流程，利用现代构建工具的Tree Shaking能力实现按需打包。这种机制既保证了代码的复用性，又避免了不必要的包体积膨胀，是现代前端工程化的重要组成部分。但这种配置在Monorepo的workspace环境下较少使用，因为违背了代码共享和统一构建的初衷。这意味着公共库的源码会直接参与到应用的打包流程中，而不是作为一个独立的外部依赖。是一个独立的应用项目，而。]]></description><category></category></item><item><title><![CDATA[在Vibe Coding与优雅架构间找到平衡]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/159959734</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/159959734</guid><author>xuehao1997</author><pubDate>Wed, 08 Apr 2026 15:41:20 +0800</pubDate><description><![CDATA[本文探讨了在AI辅助编程时代如何平衡快速功能开发（Vibe Coding）与代码质量（优雅重构）的问题。作者提出分层策略：功能阶段允许临时性补丁代码但限制污染范围，稳定后进入重构阶段主动优化结构。给出了四步重构法和五项重构触发标准，建议开发者主导架构设计，让AI负责实现。核心观点是开发者需要在关键节点主动控制重构节奏，避免陷入补丁地狱，使AI成为真正的开发加速器而非技术债务制造者。最终目标是解决当前实际问题而非过度抽象未来需求。]]></description><category></category></item><item><title><![CDATA[Taro 小程序如何优雅地分包]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/159765897</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/159765897</guid><author>xuehao1997</author><pubDate>Thu, 02 Apr 2026 16:47:22 +0800</pubDate><description><![CDATA[本文以「AI作文」小程序为例，详细介绍了Taro框架下实现优雅分包的方法。通过集中式路由管理和显式分包声明，将写作功能和素材搜索功能分别放入不同分包，同时自动过滤主包页面。文章强调分包的本质是遵循小程序平台规范，Taro只是提供配置入口。指出了分包的必要性、常见误区及注意事项，如TabBar页面限制、分包间引用限制等。最后总结了通过路由统一管理和自动过滤机制，可以实现清晰可扩展的分包架构，适用于各类复杂业务场景。]]></description><category></category></item><item><title><![CDATA[小程序中简单 Loading 效果关键帧动画]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/159471666</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/159471666</guid><author>xuehao1997</author><pubDate>Wed, 25 Mar 2026 17:36:18 +0800</pubDate><description><![CDATA[本文介绍了小程序中利用CSS实现两种常见Loading动画的方法。首先提出前端动效设计原则：优先使用高性能的transform和opacity属性，通过@keyframes定义动画过程，用animation控制播放方式。然后详细讲解了两种动效的实现：1) 旋转式Loading，使用rotate实现图标持续旋转；2) 呼吸灯式Loading，结合scale和opacity实现星星闪烁效果，并通过animation-delay实现错峰动画。文章总结指出，利用CSS关键帧动画可以简洁高效地实现优雅的Loading]]></description><category></category></item><item><title><![CDATA[小程序分享功能（海报图，链接卡片）]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/159249941</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/159249941</guid><author>xuehao1997</author><pubDate>Thu, 19 Mar 2026 17:51:43 +0800</pubDate><description><![CDATA[微信小程序分享功能解析：三种主流实现方式 本文介绍了微信小程序中三种常见的分享场景实现方法： 胶囊按钮分享 - 通过useShareAppMessage配置分享卡片内容 自定义按钮分享 - 使用Button组件触发，支持动态生成分享内容 海报图片分享 - 通过showShareImageMenu分享本地图片并附带小程序入口 文章提供了详细的Taro框架代码示例，并给出最佳实践建议：统一管理分享逻辑、动态参数传递、真机测试和合规性注意事项。三种方式分别适用于不同业务场景，开发者可根据需求灵活选择。]]></description><category></category></item><item><title><![CDATA[前端开发神器 - Image Preview插件]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/159247808</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/159247808</guid><author>xuehao1997</author><pubDate>Thu, 19 Mar 2026 16:24:13 +0800</pubDate><description><![CDATA[🔍 前端开发必备神器：Image Preview 插件 这款 VS Code 插件让图片预览变得无比简单： 鼠标悬停即可预览 CDN/本地图片 支持 CSS background-image、HTML img 等多种引用方式 安装简单，直接在扩展市场搜索安装 💡 从此告别复制链接到浏览器查看的繁琐操作，提升开发效率！]]></description><category></category></item><item><title><![CDATA[Taro小程序生命周期]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/158771020</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/158771020</guid><author>xuehao1997</author><pubDate>Sat, 07 Mar 2026 12:06:16 +0800</pubDate><description><![CDATA[本文系统梳理了Taro框架中的生命周期钩子使用经验。重点介绍了全局生命周期（Taro.onAppShow、useLaunch）和页面级生命周期（useDidShow、useEffect）的调用时机和典型应用场景，包括应用启动初始化、页面数据刷新、埋点上报等核心功能。文章还分析了生命周期执行顺序，并给出5条最佳实践建议，如将初始化逻辑放在useLaunch、页面刷新使用useDidShow等，帮助开发者避免常见误区，编写更优雅的跨端小程序代码。适用于Taro 4.x + React技术栈的微信/支付宝等小程序]]></description><category></category></item><item><title><![CDATA[小程序如何发布体验版？]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/158428970</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/158428970</guid><author>xuehao1997</author><pubDate>Thu, 26 Feb 2026 17:34:37 +0800</pubDate><description><![CDATA[本文介绍了微信小程序发布体验版的标准流程：1）本地执行构建命令生成小程序代码；2）在微信开发者工具中调试确保功能正常；3）通过开发者工具上传代码至微信公众平台；4）在管理后台将上传版本设为体验版。整个过程包含构建、调试、上传、设置四个关键步骤，帮助开发新手快速掌握小程序体验版发布方法。文末还提供了微信公众平台相关页面的直接链接，便于开发者快速操作。]]></description><category></category></item><item><title><![CDATA[2026一月份面试问题笔记分享]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/157947060</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/157947060</guid><author>xuehao1997</author><pubDate>Tue, 10 Feb 2026 23:30:25 +0800</pubDate><description><![CDATA[本文整理了多家公司前端开发岗位的面试题目，涵盖字节跳动、阿里健康、杭州壹网壹创等企业。主要考察技术点包括：Git操作、SSR、TypeScript泛型、闭包、浏览器渲染原理、React Hooks、状态管理、DOM操作、事件循环、BFC、Promise串行请求、Webpack构建等。题目涉及基础概念理解、实际场景应用和手写代码能力，反映了企业对前端开发者技术广度和深度并重的要求，特别关注React/Vue框架、TypeScript和性能优化等核心技能。]]></description><category></category></item><item><title><![CDATA[CSS实现动画的几种方式]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156733918</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156733918</guid><author>xuehao1997</author><pubDate>Thu, 08 Jan 2026 22:21:56 +0800</pubDate><description><![CDATA[本文介绍了CSS实现动画的三种主流方式：Transition适用于简单属性过渡，Animation通过关键帧控制复杂动画，Transform用于元素几何变换。文章对比了各方式的特点和适用场景，提供了具体代码示例，并分享了提升动画性能的技巧（如使用GPU加速）。建议根据动画复杂度选择合适方式：简单状态切换用Transition，多状态动画用Animation，结合Transform实现更丰富效果。]]></description><category></category></item><item><title><![CDATA[从零开始：将本地代码推送到 GitHub 的完整流程与避坑指南]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156653234</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156653234</guid><author>xuehao1997</author><pubDate>Tue, 06 Jan 2026 17:23:14 +0800</pubDate><description><![CDATA[本文记录了将本地 Vue CLI 项目推送到 GitHub 时遇到的常见问题及解决方案。首先遇到&quot;未配置远程仓库&quot;错误，需通过git remote add添加；其次因 GitHub 禁用密码认证，必须改用 SSH 或 Token 方式。详细介绍了 SSH 密钥生成、GitHub 配置和测试流程，并强调了统一使用 SSH 地址的重要性。最后总结了一份踩坑清单，建议新项目统一使用 SSH 方式管理，定期备份私钥，并注意 GitHub 默认分支已改为 main。文章帮助初学者理解 Git 远程]]></description><category></category></item><item><title><![CDATA[webpack中loader和plugin的区别]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156166104</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156166104</guid><author>xuehao1997</author><pubDate>Tue, 06 Jan 2026 01:51:42 +0800</pubDate><description><![CDATA[本文详细解析了Webpack中Loader和Plugin的核心区别。Loader用于转换模块源代码，作用于单个文件，如babel-loader转换ES6代码；Plugin扩展Webpack功能，作用于整个构建流程，如HtmlWebpackPlugin生成HTML文件。关键差异包括：Loader处理文件内容，配置在module.rules中；Plugin操作编译过程，通过plugins数组注册。文章还列举了常用Loader和Plugin，强调二者配合使用才能构建高效前端工程体系。]]></description><category></category></item><item><title><![CDATA[面试：了解闭包吗？]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156483933</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156483933</guid><author>xuehao1997</author><pubDate>Thu, 01 Jan 2026 11:47:50 +0800</pubDate><description><![CDATA[摘要： 闭包（Closure）是函数访问并保留其词法作用域变量的机制，即使函数在外部调用仍能访问原作用域变量。其核心作用包括数据封装、状态保持（如计数器、防抖）和实现高阶函数（如柯里化）。但闭包可能导致内存泄漏（长期引用大对象）、意外状态共享（循环中变量共享）和调试困难（如React中的过期闭包问题）。最佳实践包括避免不必要的闭包、解除引用及监控内存使用。在React中需注意useEffect依赖项以避免闭包陷阱。]]></description><category></category></item><item><title><![CDATA[面试：React虚拟DOM是什么？解决了哪些问题？]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156411343</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156411343</guid><author>xuehao1997</author><pubDate>Tue, 30 Dec 2025 08:06:02 +0800</pubDate><description><![CDATA[React 的虚拟 DOM 是一种轻量级的 JavaScript 对象表示，用于高效更新 UI。它通过以下流程工作：重建虚拟 DOM、比较新旧树（diffing）、计算最小变更并批量更新真实 DOM（reconciliation）。这解决了频繁操作真实 DOM 导致的性能问题，减少了重绘和回流。虚拟 DOM 虽非最快方案，但平衡了开发体验与性能。React 18 的并发渲染进一步优化了调度能力，而 key 属性帮助识别列表元素唯一性。虚拟 DOM 是 React 提升性能的核心机制，通过智能批量更新解决 D]]></description><category></category></item><item><title><![CDATA[TypeScript 内置工具类型全解析]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156398235</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156398235</guid><author>xuehao1997</author><pubDate>Mon, 29 Dec 2025 21:39:45 +0800</pubDate><description><![CDATA[TypeScript内置工具类型全解析：提升开发效率的类型操作指南 本文系统介绍了TypeScript内置的实用工具类型(Utility Types)，它们能显著提升类型系统的灵活性和开发效率。主要内容包括： 属性操作类：Partial(可选)、Required(必填)、Readonly(只读)、Pick(选取)、Omit(剔除)等，用于对象类型的属性修饰和裁剪。 函数相关工具：ReturnType(返回值类型)、Parameters(参数元组)、Awaited(Promise解包)等，可提取函数类型信息。]]></description><category></category></item><item><title><![CDATA[http缓存]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156391030</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156391030</guid><author>xuehao1997</author><pubDate>Mon, 29 Dec 2025 15:46:18 +0800</pubDate><description><![CDATA[HTTP缓存分为强缓存和协商缓存两类。强缓存通过Cache-Control或Expires实现，浏览器直接使用本地资源；协商缓存通过Last-Modified或ETag验证资源是否更新。实际开发中，静态资源建议设置长期缓存并配合文件哈希，HTML文件建议禁用强缓存。合理配置缓存策略可显著提升性能，通过Chrome开发者工具可调试缓存行为。]]></description><category></category></item><item><title><![CDATA[HTTP和HTTPS的区别]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156390574</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156390574</guid><author>xuehao1997</author><pubDate>Mon, 29 Dec 2025 15:27:26 +0800</pubDate><description><![CDATA[HTTP是明文传输协议，HTTPS则在HTTP基础上加入SSL/TLS加密层，通过对称加密、非对称加密和数字证书保障数据安全性、完整性和身份认证。HTTP使用80端口，HTTPS默认443端口。HTTPS虽有一定性能开销，但现代优化技术已大幅降低影响。搜索引擎优先索引HTTPS网站，现代浏览器对HTTP标记不安全，且部分Web API仅支持HTTPS。开发中应始终使用HTTPS，并注意混合内容问题。]]></description><category></category></item><item><title><![CDATA[浏览器输入url后。。。]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156389530</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156389530</guid><author>xuehao1997</author><pubDate>Mon, 29 Dec 2025 14:48:40 +0800</pubDate><description><![CDATA[文章摘要： 当在浏览器输入URL并回车后，整个过程分为多个阶段：URL解析（补全协议）、DNS查询（从缓存到根域名服务器逐级解析）、TCP三次握手建立连接（HTTPS还需TLS握手）。随后浏览器发送HTTP请求，服务器处理并返回响应（HTML/CSS/JS等）。浏览器解析响应，构建DOM和CSSOM树，渲染页面并加载额外资源（如图片、脚本）。最终页面可交互（TTI）。关键优化点包括DNS预解析、HTTP/2多路复用、缓存策略及前端懒加载等。整个过程涉及网络协议、安全加密和浏览器渲染机制。（149字）]]></description><category></category></item><item><title><![CDATA[面试题：了解事件循环吗]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156386861</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156386861</guid><author>xuehao1997</author><pubDate>Mon, 29 Dec 2025 12:19:27 +0800</pubDate><description><![CDATA[本文深入解析了JavaScript事件循环机制，重点阐述了宏任务与微任务的区别及执行顺序。文章指出事件循环由调用栈、宏任务队列和微任务队列组成，强调微任务优先级高于宏任务。通过经典代码示例，详细展示了&quot;同步代码→微任务→宏任务&quot;的执行流程，并澄清了常见误区。核心结论是：每个宏任务执行后都会立即清空微任务队列，这一机制确保了Promise等微任务优先于setTimeout执行。理解这一原理对掌握JavaScript异步编程至关重要。]]></description><category></category></item><item><title><![CDATA[前端必知：什么是 GPU 加速？它如何提升 Web 性能？]]></title><link>https://blog.youkuaiyun.com/xuehao1997/article/details/156367599</link><guid>https://blog.youkuaiyun.com/xuehao1997/article/details/156367599</guid><author>xuehao1997</author><pubDate>Sun, 28 Dec 2025 23:00:02 +0800</pubDate><description><![CDATA[本文深入探讨了前端开发中的GPU加速技术。首先解释了GPU加速的概念，即通过将渲染任务从CPU转移到GPU来提升性能。接着分析了GPU加速的价值在于创建合成层，避免重排重绘。文章详细列出了触发GPU加速的CSS属性，如transform、will-change等，并提供了实战建议和注意事项。最后强调要合理使用该技术，避免过度创建图层导致性能下降。文中还推荐了相关学习资源，帮助开发者进一步优化Web性能。]]></description><category></category></item></channel></rss>