<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[用于分享前端相关的知识和架构体系]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/anglra</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; anglra]]></copyright><item><title><![CDATA[AI Agent 时代，如何让 AI 写出高质量代码？Code Quality Skill 设计指南]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/163244976</link><guid>https://blog.youkuaiyun.com/anglra/article/details/163244976</guid><author>anglra</author><pubDate>Mon, 27 Jul 2026 15:43:07 +0800</pubDate><description><![CDATA[随着 ChatGPT、Claude、Cursor、Copilot 等 AI Coding Agent的普及，代码生成效率正在快速提升。页面搭建组件开发API 接入数据处理工具函数编写但是实际开发中会发现：AI 生成的代码通常可以运行，但不一定具备长期维护价值。包含：- 活动信息- 课程列表- 作业上传- 视频播放- 弹窗- 权限判断- 状态处理最终：2000 行 Vue 文件功能完成页面正常修改困难逻辑混乱新需求容易产生 Bug。]]></description><category></category></item><item><title><![CDATA[MCP 是什么？一文搞懂 AI 工具调用协议]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/163154790</link><guid>https://blog.youkuaiyun.com/anglra/article/details/163154790</guid><author>anglra</author><pubDate>Fri, 24 Jul 2026 10:59:41 +0800</pubDate><description><![CDATA[随着 Cursor、Claude Desktop、ChatGPT 等 AI 工具的发展，MCP（Model Context Protocol）逐渐成为 AI 与外部系统连接的事实标准。MCP 从哪里来、为什么需要、核心组成、如何开发、如何连接 AI。description:"根据ID查询学生",})MCP 并不是新的后端框架，而是一套统一的 AI 工具调用协议。过去：人调用 API。现在：AI 调用 Tool，Tool 调用 API。]]></description><category></category></item><item><title><![CDATA[z-index 层级管理体系：从入门到企业级架构实践]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/162309952</link><guid>https://blog.youkuaiyun.com/anglra/article/details/162309952</guid><author>anglra</author><pubDate>Thu, 25 Jun 2026 16:57:24 +0800</pubDate><description><![CDATA[《彻底搞懂 z-index：从魔法数字到企业级分层架构》揭示了开发者滥用 z-index 的常见现象，通过分析层叠上下文机制指出随意使用大数值的问题根源。文章对比了Vue/React的Portal方案与主流组件库（Element/AntD/MUI）的z-index管理策略，提出企业级解决方案应遵循三个原则：建立分层体系（基础层0-99、弹窗层1000+等）、采用Design Token统一管理、结合Portal技术隔离层级。最终指出z-index本质是架构问题而非数字问题，规范化的分层设计能让团队彻底告别魔]]></description><category></category></item><item><title><![CDATA[前端如何实现水印效果？Canvas方案详解（支持参数配置与弧度解析）]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/160325557</link><guid>https://blog.youkuaiyun.com/anglra/article/details/160325557</guid><author>anglra</author><pubDate>Mon, 20 Apr 2026 10:19:25 +0800</pubDate><description><![CDATA[本文介绍了前端实现Canvas水印的核心方案，适用于企业级数据安全需求。重点讲解了Canvas水印的实现原理，包括创建旋转水印、设置重复背景等关键技术，并提供了可直接复用的代码模板。文章还详细说明了角度转弧度的计算原理，以及如何通过参数调整水印样式。最后给出了增强方案：通过定时检测防止水印被删除，以及支持多信息水印显示。该方案具有动态传参、不易删除等特点，是企业常用的水印实现方式。]]></description><category></category></item><item><title><![CDATA[前端已死？BOSS直聘2024-2026真实数据曝光：AI时代前端工程师还能活多久？]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/159986467</link><guid>https://blog.youkuaiyun.com/anglra/article/details/159986467</guid><author>anglra</author><pubDate>Thu, 09 Apr 2026 15:00:57 +0800</pubDate><description><![CDATA[AI时代前端开发者的真实生存现状：数据揭示行业转型而非消亡 通过分析2024-2026年BOSS直聘数据发现： 前端岗位需求持续增长12.2%，中高级岗位占比提升至78% 薪资水平上涨16.7%，AI相关前端岗位薪资涨幅达46.7% 初级岗位减少56%，行业正向高阶化、智能化转型 AI淘汰的是重复性工作，而非前端行业本身。具备AI集成能力的中高级开发者反而获得更大发展空间，大厂相关岗位年薪可达70万。前端开发正从代码编写向AI协作、系统设计等更高价值工作转型。]]></description><category></category></item><item><title><![CDATA[深入理解“句柄（Handle）“：从浏览器安全到文件系统访问]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/159977393</link><guid>https://blog.youkuaiyun.com/anglra/article/details/159977393</guid><author>anglra</author><pubDate>Thu, 09 Apr 2026 10:20:42 +0800</pubDate><description><![CDATA[本文探讨了前端开发中的&quot;句柄&quot;概念。句柄是一种受控引用，用于间接访问和控制资源，具有权限控制、生命周期管理等特征。文章分析了句柄的必要性（安全性、解耦资源、控制生命周期），列举了DOM、定时器、事件、网络等常见句柄类型，重点讲解了文件系统句柄的实现原理。通过对比浏览器与Node.js的访问方式，阐述了句柄的安全优势。最终指出现代前端的核心模式：JS通过API获取句柄来操作资源，而非直接访问资源本身。这种机制既保证了安全性，又提供了必要的资源操作能力。]]></description><category></category></item><item><title><![CDATA[什么是灰度发布？原理、实现方式及A/B测试详解（附代码示例）]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/159726828</link><guid>https://blog.youkuaiyun.com/anglra/article/details/159726828</guid><author>anglra</author><pubDate>Wed, 01 Apr 2026 13:57:26 +0800</pubDate><description><![CDATA[灰度发布（金丝雀发布）是一种逐步向部分用户推送新版本的策略，通过小范围验证控制风险并支持快速回滚。实现方式包括基于用户ID分流、请求头/Cookie、网关或配置中心。结合A/B测试可验证新功能效果，形成&quot;灰度发布→数据收集→分析决策→全量上线&quot;的闭环流程。企业级方案可引入功能开关和灰度发布平台，配合监控系统实现更稳、更可控的发布过程。灰度发布的本质是以可控方式试错，通过降低风险、提高稳定性和数据驱动决策来优化系统迭代。]]></description><category></category></item><item><title><![CDATA[SPA首屏接口过多导致卡顿？一套前端请求调度方案彻底解决]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/159466687</link><guid>https://blog.youkuaiyun.com/anglra/article/details/159466687</guid><author>anglra</author><pubDate>Wed, 25 Mar 2026 14:12:03 +0800</pubDate><description><![CDATA[请求调度优化方案摘要 针对前端常见请求管理问题，本文提出了一套完整的请求调度解决方案： 并发控制：通过请求队列限制同时发起的请求数量（如3个并发），避免网络阻塞 请求去重：对相同请求进行合并，避免重复调用浪费资源 缓存机制：对可复用数据实现缓存，减少无效请求 熔断保护：当接口连续失败时自动熔断，防止系统雪崩 统一Loading：全局管理多个请求的Loading状态 核心实现包括请求队列类、去重Map、缓存机制和熔断状态机等技术方案，可显著提升前端应用的请求管理能力和用户体验。]]></description><category></category></item><item><title><![CDATA[从“用户要求“到“产品需求“：产品如何正确判断与提炼]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/158389650</link><guid>https://blog.youkuaiyun.com/anglra/article/details/158389650</guid><author>anglra</author><pubDate>Wed, 25 Feb 2026 17:40:33 +0800</pubDate><description><![CDATA[产品经理需具备从用户要求中识别真需求的能力。用户提出的往往是具体解决方案（如&quot;改成24:00打卡&quot;），而真正的需求是系统性的能力缺失（如&quot;缺乏特殊打卡机制&quot;）。通过三层拆解法（表层表达→真实问题→抽象能力），判断需求的普遍性和扩展性，设计机制而非修改数值。优秀的产品方案应能解决一类问题，如构建灵活的班次规则引擎。产品经理的价值在于将具体抱怨转化为系统能力，实现从点需求到系统思维的跃迁。]]></description><category></category></item><item><title><![CDATA[在用户未登录之前，如何判断“用户是谁”？—— 浏览器指纹的工程实践]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/157901621</link><guid>https://blog.youkuaiyun.com/anglra/article/details/157901621</guid><author>anglra</author><pubDate>Mon, 09 Feb 2026 11:13:35 +0800</pubDate><description><![CDATA[本文探讨了在用户未登录状态下识别用户的几种技术方案。传统的Cookie/Session和localStorage依赖客户端存储，易被清理且防作弊能力弱。浏览器指纹技术通过采集硬件、系统、Canvas等特征生成唯一标识，无需存储且稳定性高，适合风控和反作弊场景。FingerprintJS是对浏览器指纹的工程化封装，提供开箱即用的解决方案。实际业务中建议组合使用多种技术手段，结合行为特征进行综合判断，在保障系统安全和公平性的同时提升用户体验。]]></description><category></category></item><item><title><![CDATA[视频自动播放全解析：能不能自动播？怎么播？]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/157695230</link><guid>https://blog.youkuaiyun.com/anglra/article/details/157695230</guid><author>anglra</author><pubDate>Tue, 03 Feb 2026 17:22:55 +0800</pubDate><description><![CDATA[摘要： 视频自动播放能否成功主要取决于浏览器策略而非autoplay属性。静音视频通常可自动播放，而有声视频需用户交互触发。关键HTML属性包括autoplay、muted和playsinline。浏览器通过用户手势、播放历史等判断是否允许有声播放，微信环境中iOS禁止有声自动播放，Android表现不稳定。推荐方案：首屏静音自动播放，用户点击后开启声音，JS需添加播放失败的兜底处理。开发者应默认按&quot;不能有声自动播放&quot;设计，通过用户行为解锁声音功能。]]></description><category></category></item><item><title><![CDATA[为什么 SEO 成败，往往取决于前端架构设计？]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/157693401</link><guid>https://blog.youkuaiyun.com/anglra/article/details/157693401</guid><author>anglra</author><pubDate>Tue, 03 Feb 2026 16:02:02 +0800</pubDate><description><![CDATA[SEO 本质不是讨好搜索引擎，而是：用“机器能理解的方式”，把内容清清楚楚地交代出来。用 SSR / SSGHTML 结构清晰页面够快内容有价值👉 SEO 自然不会差。]]></description><category></category></item><item><title><![CDATA[FLIP 动画详解：从浏览器渲染原理到工程级实践]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/157136368</link><guid>https://blog.youkuaiyun.com/anglra/article/details/157136368</guid><author>anglra</author><pubDate>Mon, 19 Jan 2026 15:22:05 +0800</pubDate><description><![CDATA[FLIP动画是一种高性能动画技术，通过四个步骤实现：记录初始位置（First）、直接修改布局（Last）、使用transform反向视觉抵消（Invert）、释放transform播放动画（Play）。其核心原理是利用transform动画模拟布局动画，避免触发浏览器的布局和重绘流程，仅触发合成阶段，从而显著提升性能。FLIP特别适用于列表排序、拖拽重排等场景，通过批量处理元素实现流畅动画。关键点包括必须使用requestAnimationFrame、注意transform覆盖问题等。掌握FLIP技术有助于]]></description><category></category></item><item><title><![CDATA[前端架构知识体系：深入理解 sessionStorage、opener 与浏览器会话模型]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/156903657</link><guid>https://blog.youkuaiyun.com/anglra/article/details/156903657</guid><author>anglra</author><pubDate>Tue, 13 Jan 2026 16:02:19 +0800</pubDate><description><![CDATA[window.open 默认会复制原页面的 sessionStorage，导致同一 URL 在不同打开方式下表现不一致。本文揭示了浏览器会话模型原理：window.open创建的新标签页会复制（非共享）原页面的 sessionStorage，而手动输入URL则不会。文章指出_blank参数的真实含义及安全隐患，建议使用noopener特性切断关联。最后强调架构设计原则：核心状态应存于URL而非sessionStorage，并提供了封装openNewTab的最佳实践方案，兼顾功能与安全性。]]></description><category></category></item><item><title><![CDATA[前端架构知识体系：通过发布-订阅者模式解耦路由和请求]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/155484853</link><guid>https://blog.youkuaiyun.com/anglra/article/details/155484853</guid><author>anglra</author><pubDate>Tue, 02 Dec 2025 10:35:08 +0800</pubDate><description><![CDATA[本文探讨了如何利用发布-订阅者模式解耦前端开发中的路由和请求管理。传统做法往往将路由跳转与数据请求紧密耦合，导致代码难以维护和扩展。通过建立事件中心，将路由变化作为事件发布，由请求模块订阅处理，实现了两者的解耦。文章详细介绍了事件中心的实现方法，并展示了如何将axios请求封装成可订阅的事件处理器。这种模式提高了代码模块化程度，便于扩展和维护，使路由跳转和请求处理更加灵活，为复杂前端应用提供了更优的架构方案。]]></description><category></category></item><item><title><![CDATA[前端设计模式全解（23 种）]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/151618065</link><guid>https://blog.youkuaiyun.com/anglra/article/details/151618065</guid><author>anglra</author><pubDate>Fri, 12 Sep 2025 14:39:04 +0800</pubDate><description><![CDATA[前端设计模式概述 设计模式是解决常见软件设计问题的可复用方案。在前端开发中，23种经典模式（由GoF提出）可提升代码质量。主要分为三类： 创建型模式：控制对象实例化，如单例模式（全局状态管理）、工厂模式（环境适配创建）、建造者模式（组件渐进构建） 结构型模式：处理对象组合，如适配器（接口兼容）、装饰器（功能扩展）、代理（访问控制） 行为型模式：管理对象交互，如责任链（请求处理链）、命令模式（操作封装） 典型应用包括： 状态管理（单例） 组件构建（工厂/建造者） API封装（外观/代理） 功能扩展（装饰器） ]]></description><category></category></item><item><title><![CDATA[CSS 动画实战：实现电商中“加入购物车”的抛物线效果]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/151613642</link><guid>https://blog.youkuaiyun.com/anglra/article/details/151613642</guid><author>anglra</author><pubDate>Fri, 12 Sep 2025 11:24:35 +0800</pubDate><description><![CDATA[本文介绍了如何利用CSS实现电商网站中常见的&quot;加入购物车&quot;抛物线动画效果。通过嵌套元素结构，将X轴和Y轴运动分离：外层元素使用linear实现匀速水平运动，内层元素利用cubic-bezier曲线模拟加速下落、减速上升的垂直运动。文章详细讲解了animation-timing-function的各种取值，并提供了完整的代码示例。这种纯CSS方案虽然简单优雅，但对于更精确的物理效果，建议结合JavaScript实现。该技术可提升用户体验，增加网站交互趣味性。]]></description><category></category></item><item><title><![CDATA[前端架构知识体系：Source Map 的用法和全面解析]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/151611272</link><guid>https://blog.youkuaiyun.com/anglra/article/details/151611272</guid><author>anglra</author><pubDate>Fri, 12 Sep 2025 10:16:26 +0800</pubDate><description><![CDATA[Source Map是源码与编译后代码的映射，用于调试和错误定位。Webpack 提供多种模式，开发环境和生产环境的取舍不同。开发环境：推荐，快且可调试。生产环境：推荐或，避免源码泄露。切记不要在生产环境暴露源码，否则会有严重安全风险。通过合理配置 Source Map，我们既能保证开发效率，又能在生产环境中安全高效地定位问题。]]></description><category></category></item><item><title><![CDATA[深入理解 async/await 原理：Generator 与 Promise 的结合]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/151579475</link><guid>https://blog.youkuaiyun.com/anglra/article/details/151579475</guid><author>anglra</author><pubDate>Thu, 11 Sep 2025 14:57:27 +0800</pubDate><description><![CDATA[本文深入解析了async/await的机制，比较了其与Promise的关系，并揭示其底层实现原理。async函数本质返回Promise，await相当于Promise.then的语法糖，底层由Generator函数+自动执行器实现。Generator通过yield实现&quot;暂停-恢复&quot;能力，配合自动执行器将异步代码写成同步风格。文章还介绍了异常处理机制，并建议结合Promise.all实现并行异步操作]]></description><category></category></item><item><title><![CDATA[深入理解 Vue3 Router：三种路由模式的工作原理与实战应用]]></title><link>https://blog.youkuaiyun.com/anglra/article/details/151573800</link><guid>https://blog.youkuaiyun.com/anglra/article/details/151573800</guid><author>anglra</author><pubDate>Thu, 11 Sep 2025 11:13:44 +0800</pubDate><description><![CDATA[本文介绍了Vue Router 4的三种路由模式。Hash模式基于location.hash，简单易用但URL带#号；History模式使用HTML5 History API，URL美观但需后端支持；Memory模式将路由存储在内存中，适合SSR和测试场景。三种模式在实现方式、优缺点和使用场景上各有不同：Hash模式适合中小项目，History模式适合大型应用，Memory模式则适用于非浏览器环境。开发者可根据项目需求选择合适的路由模式。]]></description><category></category></item></channel></rss>