<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[2202_75695913的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/2202_75695913</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; 2202_75695913]]></copyright><item><title><![CDATA[em，px，rem，vh，vw使用场景和区别]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148841932</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148841932</guid><author>2202_75695913</author><pubDate>Mon, 23 Jun 2025 10:59:42 +0800</pubDate><description><![CDATA[前端开发中常用CSS单位各有特点：px是绝对单位，适合固定尺寸；em基于父元素字体大小，适合局部调整；rem基于根元素字体大小，推荐全局布局；vw/vh根据视口宽高百分比变化，适合全屏设计。实践建议：固定元素用px，局部调整用em，全局布局用rem，响应式全屏用vw/vh，通过合理组合实现灵活适配多设备的页面效果。（148字）]]></description><category></category></item><item><title><![CDATA[div标签详细解说]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148696085</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148696085</guid><author>2202_75695913</author><pubDate>Mon, 16 Jun 2025 17:17:39 +0800</pubDate><description><![CDATA[div标签是通用的HTML容器，主要用于分组布局但不具有语义；而a标签具有明确的链接功能和语义。语义化标签（如header、footer）能提升代码可读性、SEO和可访问性。相比仅用div的非语义化结构，语义化标签使网页结构更清晰，便于维护和解析。开发时应优先选用语义化标签以优化用户体验和技术兼容性。]]></description><category></category></item><item><title><![CDATA[盒模型小全]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148590584</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148590584</guid><author>2202_75695913</author><pubDate>Wed, 11 Jun 2025 17:24:20 +0800</pubDate><description><![CDATA[CSS盒子模型是网页布局的核心概念，分为内容区、内边距、边框和外边距四部分。标准盒子模型(content-box)的宽度仅包含内容，而IE怪异盒子模型(border-box)的宽度包含内容、内边距和边框。通过box-sizing属性可切换两种模式，border-box模式更便于精确布局控制。正确理解盒子模型差异对实现页面排版至关重要，使用border-box能简化复杂布局的设计过程。]]></description><category></category></item><item><title><![CDATA[AntV X6实现]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148539455</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148539455</guid><author>2202_75695913</author><pubDate>Mon, 09 Jun 2025 17:39:28 +0800</pubDate><description><![CDATA[本文详细介绍了使用 AntV X6 库创建流程图编辑器的实现过程。主要内容包括：1）初始化准备，创建左右布局的 DOM 结构和样式；2）画布核心配置，包含网格、缩放、连线样式（曼哈顿路由+圆角连线）、节点交互等功能；3）工具栏初始化，设置分组和布局；4）快捷键绑定，实现复制粘贴、撤销重做等操作；5）自定义图片节点注册，定义节点样式和渲染结构。整个系统提供了完整的流程图编辑功能，包括节点拖拽、连线、缩放、快捷键操作等交互特性，并通过合理的 UI 设计优化用户体验。]]></description><category></category></item><item><title><![CDATA[原型链与继承]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148498305</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148498305</guid><author>2202_75695913</author><pubDate>Sat, 07 Jun 2025 17:38:46 +0800</pubDate><description><![CDATA[本文详细讲解了JavaScript的原型链、继承、类、实例和构造函数等核心概念。通过示例展示了原型链如何实现方法共享（如Person.prototype.sayHello），以及ES6类语法如何简化继承（如class Car）。同时解析了new操作符的工作原理和typeof与instanceof的类型检测区别。最后以Vue3为例，说明如何通过原型链扩展实例方法（如$set和$delete）。全文通过代码示例生动演示了这些概念的实际应用。]]></description><category></category></item><item><title><![CDATA[“组件、路由懒加载”，在 Vue3 和 React 中分别如何实现？ (copy)]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148498286</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148498286</guid><author>2202_75695913</author><pubDate>Sat, 07 Jun 2025 17:37:04 +0800</pubDate><description><![CDATA[摘要：本文介绍了Vue3和React实现组件懒加载的方法。React通过React.lazy和Suspense实现组件和路由的按需加载，Vue3则使用defineAsyncComponent实现异步组件加载，支持配置加载状态和错误处理。此外，Vue3还可使用vue3-lazyload插件实现图片懒加载。两种框架的懒加载机制都能有效提升页面性能。（148字）]]></description><category></category></item><item><title><![CDATA[promise和异步编程]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148424820</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148424820</guid><author>2202_75695913</author><pubDate>Wed, 04 Jun 2025 12:52:48 +0800</pubDate><description><![CDATA[摘要 Promise 是 JavaScript 处理异步操作的核心方案，能有效避免回调地狱，适用于网络请求、文件读写、定时任务等场景。其三种状态（pending、fulfilled、rejected）通过 then/catch 或 async/await 管理。Vue 3 中可结合 setup 使用 Axios 示例展示异步数据绑定。实现原理基于事件循环的微任务队列，核心静态方法包括 Promise.resolve、Promise.all（全成功才成功）、Promise.race（竞速响应）等，为不同异步场]]></description><category></category></item><item><title><![CDATA[websocket协议]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148401335</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148401335</guid><author>2202_75695913</author><pubDate>Tue, 03 Jun 2025 14:41:28 +0800</pubDate><description><![CDATA[WebSocket协议是一种实时双向通信协议，基于单一TCP连接实现全双工数据传输。通过HTTP握手升级连接后，支持文本帧和二进制帧传输，并具备心跳检测机制。相比HTTP协议，WebSocket具有低延迟、高效传输等优势，广泛应用于聊天应用、在线游戏和实时数据推送等场景。其核心特性包括持久连接、双向通信和精简的数据帧结构，有效提升了网络实时交互性能。]]></description><category></category></item><item><title><![CDATA[jwt token验证]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148401309</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148401309</guid><author>2202_75695913</author><pubDate>Tue, 03 Jun 2025 14:39:09 +0800</pubDate><description><![CDATA[JWT Token验证方法包括：从请求头获取Token、使用密钥验证签名和有效期，并提取用户信息。验证流程可通过拦截器实现自动化检查，建议结合密钥安全管理、合理设置Token有效期和完善异常处理机制。示例代码展示了如何提取Token、验证签名、获取用户信息及注册Spring拦截器。最佳实践强调密钥保护、Token时效性控制和安全的错误响应。]]></description><category></category></item><item><title><![CDATA[JS和TS的区别]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148352759</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148352759</guid><author>2202_75695913</author><pubDate>Sat, 31 May 2025 16:06:22 +0800</pubDate><description><![CDATA[JavaScript与TypeScript对比：前者是动态弱类型语言，适合快速开发；后者作为JS超集，添加静态类型系统，提供更完善的工具链和错误检查。TS需编译为JS运行，适合大型项目，而JS更适合小型项目。示例显示TS能在编译时捕获类型错误，显著提升代码质量。两者完全兼容，TS生态持续壮大，许多库已提供类型支持。]]></description><category></category></item><item><title><![CDATA[虚拟DOM和DOM是什么？有什么区别？虚拟DOM的优点是什么？]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148352741</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148352741</guid><author>2202_75695913</author><pubDate>Sat, 31 May 2025 16:04:40 +0800</pubDate><description><![CDATA[虚拟DOM是对真实DOM的轻量级抽象表示，通过JavaScript对象存储节点信息。相比直接操作真实DOM带来的性能损耗，虚拟DOM在内存中完成差异计算，仅更新必要的部分，显著提升动态页面的渲染效率。其优势包括性能优化、跨平台能力及简化开发流程，广泛应用于Vue、React等框架。示例代码展示了虚拟DOM的创建和渲染过程，通过h函数生成虚拟节点并映射到真实DOM，实现高效更新。]]></description><category></category></item><item><title><![CDATA[ReactHook有哪些]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148342426</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148342426</guid><author>2202_75695913</author><pubDate>Fri, 30 May 2025 17:42:25 +0800</pubDate><description><![CDATA[React Hooks 是 React 16.8 引入的核心特性，用于简化函数组件的开发。常用 Hooks 包括：useState 管理组件状态；useEffect 处理副作用；useContext 访问上下文；useReducer 管理复杂状态逻辑；useCallback 和 useMemo 优化性能；useRef 获取 DOM 引用；useLayoutEffect 同步测量 DOM；useImperativeHandle 自定义实例值；useDebugValue 调试自定义 Hook。这些 Hooks ]]></description><category></category></item><item><title><![CDATA[React和原生事件的区别]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148340032</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148340032</guid><author>2202_75695913</author><pubDate>Fri, 30 May 2025 16:00:48 +0800</pubDate><description><![CDATA[React事件系统与原生DOM事件在绑定方式、事件对象、传播机制等方面存在显著差异。React采用合成事件（SyntheticEvent）统一委托到根节点，封装原生事件以解决浏览器兼容性问题，并通过事件池优化性能。相比之下，原生事件直接绑定到DOM元素，需手动处理浏览器差异。React事件默认只有冒泡，而原生事件支持完整的捕获-目标-冒泡三阶段。触发顺序上，原生事件先于合成事件执行。React事件this指向默认undefined，需手动绑定。React18取消事件池后允许异步访问事件对象，而混合使用时原生]]></description><category></category></item><item><title><![CDATA[Vue的生命周期]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148306659</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148306659</guid><author>2202_75695913</author><pubDate>Thu, 29 May 2025 11:26:54 +0800</pubDate><description><![CDATA[Vue生命周期具体了解]]></description><category></category></item><item><title><![CDATA[git和gitee的常用语句命令]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148285735</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148285735</guid><author>2202_75695913</author><pubDate>Wed, 28 May 2025 15:50:05 +0800</pubDate><description><![CDATA[本文介绍了Git和Gitee的常用命令及基本操作。主要内容包括：1) Git基础配置方法；2) Git常用命令如状态检查、提交代码、分支管理等；3) Gitee平台特有操作；4) 团队协作权限管理；5) 编辑器集成建议。文章提供了从初始化仓库到推送代码的完整工作流程示例，适合开发者快速掌握版本控制工具的基本使用方法。所有命令均以简洁的代码格式呈现，便于直接参考使用。]]></description><category></category></item><item><title><![CDATA[如何理解UDP 和 TCP 区别 应用场景]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148256710</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148256710</guid><author>2202_75695913</author><pubDate>Tue, 27 May 2025 14:21:44 +0800</pubDate><description><![CDATA[摘要： UDP和TCP是两种主要传输层协议。UDP无连接、不可靠但高效，适用于实时通信（如视频、游戏）和DNS查询；TCP面向连接、可靠但较慢，适合文件传输、邮件等需数据完整性的场景。主要区别在于连接性、可靠性及效率，具体选择取决于应用需求。（150字）]]></description><category></category></item><item><title><![CDATA[什么是HTTP HTTP 和 HTTPS 的区别]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148237356</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148237356</guid><author>2202_75695913</author><pubDate>Mon, 26 May 2025 18:30:29 +0800</pubDate><description><![CDATA[本文概述了HTTP协议的定义、工作流程及与HTTPS、MQTT的区别。HTTP是一种无状态应用层协议，基于请求-响应模型，常用于网页浏览。相比于HTTP明文传输，HTTPS通过SSL/TLS加密保障安全性，但需要更多计算资源和数字证书。HTTP工作流程包括建立连接、发送请求、接收响应和关闭连接。与轻量级的MQTT协议相比，HTTP适合Web开发，而MQTT更适合实时消息推送和物联网场景。通过图文对比，清晰展示了各协议的特点及应用领域。]]></description><category></category></item><item><title><![CDATA[webpack的构建流程]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148194479</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148194479</guid><author>2202_75695913</author><pubDate>Sat, 24 May 2025 18:41:06 +0800</pubDate><description><![CDATA[Webpack 是一个现代 JavaScript 静态模块打包工具，其构建流程分为四个阶段：初始化、编译、打包和输出。初始化阶段加载配置文件并解析选项；编译阶段遍历依赖树，使用 Loader 预处理模块；打包阶段优化资源，如压缩代码；输出阶段将处理后的资源写入磁盘。示例代码展示了如何配置 Babel 转码、Terser 压缩及多入口支持等功能。综合案例包含 HTML 生成、CSS 提取和代码分离等高级特性，适用于生产环境构建。]]></description><category></category></item><item><title><![CDATA[webpack中常见语句命令]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148194467</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148194467</guid><author>2202_75695913</author><pubDate>Sat, 24 May 2025 18:39:36 +0800</pubDate><description><![CDATA[Webpack 是一个流行的 JavaScript 模块打包工具，用于优化前端资源加载。通过 pnpm 或 npm 可以安装 Webpack 及其 CLI 工具（pnpm add webpack webpack-cli --save-dev 或 npm install...）。基本构建可通过 webpack 或 npx webpack 运行，也可在 package.json 中配置脚本简化命令。开发时使用 webpack-dev-server 实现热更新，生产环境则通过插件（如 TerserPlugin）进]]></description><category></category></item><item><title><![CDATA[web常见的攻击方式有哪些？如何防御？]]></title><link>https://blog.youkuaiyun.com/2202_75695913/article/details/148194451</link><guid>https://blog.youkuaiyun.com/2202_75695913/article/details/148194451</guid><author>2202_75695913</author><pubDate>Sat, 24 May 2025 18:38:42 +0800</pubDate><description><![CDATA[本文总结了四种常见的Web攻击方式及防御策略： SQL注入：通过恶意SQL查询操纵数据库，防御措施包括参数化查询和输入验证。 XSS攻击：在网页中嵌入恶意脚本，可通过编码输出和CSP策略防范。 CSRF攻击：冒充用户执行非授权操作，建议使用一次性令牌和Referer检查。 文件上传漏洞：上传恶意文件导致安全风险，需采用白名单和文件扫描。 每种攻击均附有示例和具体防御方法，最后以表格和图表形式总结关键点，帮助快速理解与应对安全威胁。]]></description><category></category></item></channel></rss>