<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[懒羊羊我小弟的博客]]></title><description><![CDATA[总结记录遇到的问题，学习到的新知识；与大家共勉0—0]]></description><link>https://blog.youkuaiyun.com/IO14122</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; IO14122]]></copyright><item><title><![CDATA[Trae如何生成引入Skills最全文档]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/160356558</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/160356558</guid><author>IO14122</author><pubDate>Tue, 21 Apr 2026 09:44:00 +0800</pubDate><description><![CDATA[文章摘要： Skill是Trae IDE中的智能功能单元，通过结构化配置文件(SKILL.md)封装特定领域任务的执行逻辑。它具有按需加载、可复用共享等特点，适合规范输出、自动化流程和知识沉淀。Trae支持四种创建方式：手动创建、AI辅助生成、文件上传和社区导入。Skill文件包含YAML元数据和Markdown指令，可定义技术栈、编码规范和最佳实践。针对前端项目，提供了Vue3和React的详细Skill模板，涵盖组件设计、类型安全和性能优化等核心要求。通过Skill机制，开发者可以建立标准化的工作流程，]]></description><category></category></item><item><title><![CDATA[Day.js 使用文档]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/154026391</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/154026391</guid><author>IO14122</author><pubDate>Tue, 28 Oct 2025 18:31:08 +0800</pubDate><description><![CDATA[Day.js 是一个轻量级 JavaScript 日期处理库，仅 2KB 大小，API 与 Moment.js 兼容。它支持日期解析、格式化、计算等核心功能，所有操作都基于不可变的 Day.js 对象。常用功能包括格式化日期（format()）、时间计算（add()/subtract()）、比较差值（diff()）等。通过插件可扩展本地化、相对时间等能力。相比 Moment.js，Day.js 更轻量且支持 tree-shaking，适合对体积敏感的项目。安装简单，只需导入核心模块即可使用基础功能，按需加载]]></description><category></category></item><item><title><![CDATA[AI辅助前端开发：模型图生成代码技术文档]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/153396862</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/153396862</guid><author>IO14122</author><pubDate>Thu, 16 Oct 2025 10:51:19 +0800</pubDate><description><![CDATA[AI辅助前端开发：设计稿转代码技术指南 本文介绍了利用AI工具将UI/UX设计图自动转换为前端代码的方法。核心价值在于提升开发效率（缩短手动切图时间）、保证样式一致性，并让开发者更专注于业务逻辑。主流工具分为四类：在线设计平台内置AI（如Figma插件）、AI原生IDE（如v0）、开源模型（如screenshot-to-code）和代码助手插件（如GitHub Copilot）。建议采用&quot;生成-优化-集成&quot;标准化流程，强调生成代码后必须进行人工审查与优化（包括结构、样式、交互逻辑和可访问]]></description><category></category></item><item><title><![CDATA[Pinia 状态管理：从入门到精通]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/153200151</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/153200151</guid><author>IO14122</author><pubDate>Mon, 13 Oct 2025 16:19:21 +0800</pubDate><description><![CDATA[Pinia 是 Vue 官方推荐的状态管理库，作为 Vuex 的继任者，它简化了状态管理，原生支持 TypeScript 并与 Vue3 的 Composition API 完美契合。本文介绍了 Pinia 的核心优势：类型安全、模块化、轻量级等特点。详细讲解了安装配置、Store 定义（包括选项式和组合式两种风格）、组件使用方式，以及状态持久化、插件系统、Store 间通信等高级特性。最后还提供了项目结构的最佳实践建议。Pinia 通过简洁的 API 设计，为 Vue 应用提供了高效的状态管理方案。]]></description><category></category></item><item><title><![CDATA[vue3的组件通信方式汇总]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/153199239</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/153199239</guid><author>IO14122</author><pubDate>Mon, 13 Oct 2025 15:57:26 +0800</pubDate><description><![CDATA[Vue3 组件通信方式总结： Props/Emits：父子组件传值（父传子用 props，子传父用 emits） v-model：父子双向绑定（props + emits 语法糖） ref：父组件通过模板引用访问子组件实例（需子组件 expose） Provide/Inject：祖先组件向后代任意层级传递数据 不同场景推荐： 父子通信：props/emits 或 v-model 跨级通信：provide/inject 访问子组件：ref 合理选择通信方式可提升开发效率。]]></description><category></category></item><item><title><![CDATA[深入解析百万级数据表格：Vue3 + TypeScript 虚拟滚动实现方案]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/152929428</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/152929428</guid><author>IO14122</author><pubDate>Fri, 10 Oct 2025 16:08:56 +0800</pubDate><description><![CDATA[百万级表格虚拟滚动：Vue3+TS实现指南 虚拟滚动技术通过仅渲染可视区域数据（如600px高度仅需20行DOM），解决大数据量表格的性能瓶颈。核心实现包含三层DOM结构（滚动容器、占位元素、可视区域）和动态计算逻辑：1）根据滚动位置计算可视行索引区间；2）通过transform定位可视数据；3）用占位元素模拟整体高度。关键优化包括滚动节流（60fps）、缓冲行数（防空白）和固定行高（避免重排）。相比全量渲染，虚拟滚动将DOM节点从百万级降至几十个，性能提升显著。]]></description><category></category></item><item><title><![CDATA[TypeScript 高级类型详解]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/152272551</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/152272551</guid><author>IO14122</author><pubDate>Mon, 29 Sep 2025 16:13:53 +0800</pubDate><description><![CDATA[本文详解 TypeScript 高级类型核心特性，含交叉类型（合并多类型约束）、联合类型（多类型选其一，需类型收窄）、类型别名（简化复杂类型引用，与接口有差异）、索引类型（用 keyof 和 T [K] 安全操作属性）、映射类型（基于现有类型生成新类型，含 Readonly/Partial 等内置工具）、条件类型（按条件选类型，支持分布式应用）及类型断言 / 守卫（辅助类型检查）。
内容结合实战示例，说明各类型用法与场景，帮助开发者用高级类型描述业务逻辑，提升代码健壮性与协作效率，为泛型进阶等打下基础。]]></description><category></category></item><item><title><![CDATA[TypeScript 基础类型详解]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/152269639</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/152269639</guid><author>IO14122</author><pubDate>Mon, 29 Sep 2025 14:58:07 +0800</pubDate><description><![CDATA[本文详解 TypeScript 基础类型，含 JavaScript 原生类型（string/number/boolean/array 等）与 TS 特有类型（元组 / 枚举 /any/unknown/never/ 字面量类型），结合开发场景、代码示例及规则对比，助开发者掌握静态类型标注。
核心覆盖：array 的方括号 / 泛型标注与只读约束、元组的函数多返回值应用、枚举的遍历方法、any 与 unknown 安全区别、字面量类型的取值约束，并给出 “能具体不模糊” 的类型选择原则，适合 TS 入门者，可作]]></description><category></category></item><item><title><![CDATA[TypeScript 简介与项目中配置]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/152223579</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/152223579</guid><author>IO14122</author><pubDate>Sun, 28 Sep 2025 16:45:08 +0800</pubDate><description><![CDATA[本文介绍 TypeScript（JavaScript 超集，添静态类型）的简介、全局安装与项目配置，详解 tsconfig.json 核心选项（目标版本、模块、严格检查、输出控制等），提供 Node.js、React、工具库、Monorepo 等场景配置预设，助开发者快速上手 TypeScript 项目配置，提升代码健壮性与可维护性。]]></description><category></category></item><item><title><![CDATA[手写符合Promise/A+规范的Promise类]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147925866</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147925866</guid><author>IO14122</author><pubDate>Tue, 13 May 2025 15:26:44 +0800</pubDate><description><![CDATA[本文围绕手写符合 Promise/A + 规范的 Promise 类展开，阐述核心架构设计，包括三态机制、构造函数逻辑；解析异步调度系统，实现微任务调度与回调队列触发；说明链式调用原理及值穿透实现；介绍静态方法功能。给出完整代码及基础调用、异常处理、并发控制等应用场景示例。亮点在于严格状态控制、完善错误处理、优化异步调度与链式调用支持，可作为学习 Promise 原理参考，建议结合官方测试套件验证。
]]></description><category></category></item><item><title><![CDATA[Promise/A+ 规范中文解读]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147898216</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147898216</guid><author>IO14122</author><pubDate>Mon, 12 May 2025 15:46:51 +0800</pubDate><description><![CDATA[Promise/A + 是 JavaScript Promise 标准，旨在定义then方法行为以确保互操作性。文档介绍了 Promise、Thenable 等术语，阐述 Promise 的状态、then方法及解决过程等核心规范，还提及注释与实现细节，指出规范通过标准化then方法，提供可预测行为模型，确保不同实现的互操作性，为开发者构建异步处理机制提供参考。]]></description><category></category></item><item><title><![CDATA[使用 ECharts GL 实现交互式 3D 饼图：技术解析与实践]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147836888</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147836888</guid><author>IO14122</author><pubDate>Fri, 09 May 2025 20:31:16 +0800</pubDate><description><![CDATA[本文基于 Vue 3 与 ECharts GL，实现交互式 3D 饼图。通过参数方程构建立体扇形与底座，实现立体视觉效果；结合点击选中位移、悬停高亮放大等动态交互设计，增强用户体验；采用混合渲染技术，融合 3D 曲面与 2D 饼图标签，并通过暗色背景搭配网格纹理提升科技感。同时介绍环境搭建、事件处理、样式优化等核心技术，给出性能优化建议与完整代码示例，为开发者快速构建强交互性 3D 可视化组件提供参考。
]]></description><category></category></item><item><title><![CDATA[ES6 Map/WeakMap/Set/WeakSet 全解指南]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147538333</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147538333</guid><author>IO14122</author><pubDate>Sat, 26 Apr 2025 16:11:45 +0800</pubDate><description><![CDATA[本文是 ES6 中 Map、WeakMap、Set、WeakSet 的全解指南。介绍其设计思想，对比传统数据结构的优势及四大对象间特性差异，详解实例方法与属性。结合 DOM 节点元数据存储、私有属性实现等场景阐述使用技巧，给出性能优化策略与内存管理建议。通过对比表、决策树等总结不同特性与适用场景，为开发者在不同需求下选择合适的数据结构提供参考 。]]></description><category></category></item><item><title><![CDATA[React Router v7 从入门到精通指南]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147537144</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147537144</guid><author>IO14122</author><pubDate>Sat, 26 Apr 2025 15:04:22 +0800</pubDate><description><![CDATA[本文是 React Router v7.5.0 从入门到精通指南。涵盖设计思想与核心原理、安装与基础配置、核心 API 解析等内容，包括多级路由配置实践、优化方案与高级技巧、注意事项及最佳实践，还介绍了高级路由模式、数据流管理、微前端路由、性能监控、TypeScript 集成、移动端处理、生态工具链整合等，最后展望未来演进方向，如 React Server Components 集成、智能化预加载。]]></description><category></category></item><item><title><![CDATA[ECharts 关系图表开发指南与 Vue3 组件封装]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147462982</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147462982</guid><author>IO14122</author><pubDate>Wed, 23 Apr 2025 20:49:07 +0800</pubDate><description><![CDATA[本文介绍 ECharts 关系图配置与使用，涵盖核心配置解析，包括基础与完整配置项、Force 布局参数等；讲解事件监听处理、高级样式配置；介绍响应式与性能优化方法，如自适应容器、大数据优化；进行 Vue3 组件封装，包括组件实现、使用示例及点击节点关闭子节点功能；还给出数据格式化、性能优化、交互增强等最佳实践技巧，为 ECharts 关系图的使用提供全面指导。]]></description><category></category></item><item><title><![CDATA[React JSX 语法深度解析与最佳实践]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147314621</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147314621</guid><author>IO14122</author><pubDate>Thu, 17 Apr 2025 21:52:27 +0800</pubDate><description><![CDATA[本文深度解析 React JSX 语法，涵盖编译机制（转换为React.createElement）、属性规范（className替代class等）、子元素处理（文本、表达式、数组渲染等）、高级渲染模式（条件渲染、性能优化如key正确使用）、安全防御（XSS 防护）及工程化最佳实践（代码组织、ESLint 等工具）。通过原理剖析、示例与错误排查，助开发者掌握 JSX 核心规则，规避陷阱，构建规范代码]]></description><category></category></item><item><title><![CDATA[Vue与React组件化设计对比]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147310745</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147310745</guid><author>IO14122</author><pubDate>Thu, 17 Apr 2025 17:41:41 +0800</pubDate><description><![CDATA[本文对比 Vue 与 React 的组件化设计。在模板语法上，Vue 用基于 HTML 的模板，React 采用 JSX；数据管理中，Vue 支持双向绑定，React 是单向数据流，且状态管理方案各有特点。组件通信与复用、性能优化策略、生态系统也存在差异。通过计数器组件实例展示实现方式，总结得出 Vue 易用适合中小项目，React 灵活利于复杂应用，开发者应依项目需求等综合选择。]]></description><category></category></item><item><title><![CDATA[深入浅出 JavaScript 拖拽 API：从基础到实战]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147305924</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147305924</guid><author>IO14122</author><pubDate>Thu, 17 Apr 2025 14:39:23 +0800</pubDate><description><![CDATA[本文介绍 HTML5 原生拖拽 API 及应用。其核心概念包括拖拽源和放置目标两个角色，开始拖拽、拖拽中、进入目标区域、释放元素四个阶段。基础使用步骤为标记元素可拖拽并监听相关事件。实战展示了文件拖拽上传和拖拽排序的代码。还介绍了自定义拖拽图像、跨窗口拖拽等高级功能。注意浏览器兼容性，移动端支持差，要阻止 dragover 默认行为。核心要点为标记可拖拽元素、用事件传数据、利用 dataTransfer 管理内容和效果。]]></description><category></category></item><item><title><![CDATA[前端跨页面通信完全指南]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147077610</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147077610</guid><author>IO14122</author><pubDate>Tue, 08 Apr 2025 21:08:36 +0800</pubDate><description><![CDATA[本文围绕前端跨页面通信展开，从同源页面、不同源页面、父子框架三个维度，详细介绍如 Broadcast Channel API、LocalStorage 事件、Window.postMessage 等多种实现方案。提供代码示例，对比各方案在适用场景、数据量、实时性、兼容性方面的表现，并给出选型建议，同时强调跨页面通信中的安全注意事项，助力构建高效可靠的通信系统 。]]></description><category></category></item><item><title><![CDATA[瀑布流布局的实现方式]]></title><link>https://blog.youkuaiyun.com/IO14122/article/details/147038098</link><guid>https://blog.youkuaiyun.com/IO14122/article/details/147038098</guid><author>IO14122</author><pubDate>Mon, 07 Apr 2025 10:26:43 +0800</pubDate><description><![CDATA[本文聚焦瀑布流布局实现。其以参差不齐多栏排列，页面滚动时新元素持续加载，能充分利用空间。核心原理含多列布局、元素精准定位及动态加载。通过 JS+flex、grid 等具体方案可实现，还需注重响应式与性能优化，为开发者打造高效适配的瀑布流布局页面提供思路。]]></description><category></category></item></channel></rss>