<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[m0_73761441的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/m0_73761441</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; m0_73761441]]></copyright><item><title><![CDATA[Web Deep Learning，一个可以随手试算法的小实验台]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/169366098</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/169366098</guid><author>m0_73761441</author><pubDate>Wed, 28 Oct 2026 20:42:41 +0800</pubDate><description><![CDATA[Web Deep Learning 是一个无需安装、即开即用的浏览器端机器学习实验平台，支持分类、回归、聚类与降维任务。通过可视化界面可快速试错参数、观察模型边界变化，直观理解算法行为。内置数据与本地实验记录功能，适合学习阶段对比不同模型表现。基于前端技术实现训练计算，虽不适用于大规模生产，但极大降低实践门槛，是理解机器学习原理的理想教学工具。]]></description><category></category></item><item><title><![CDATA[CSS 实现渐变毛玻璃：从 `backdrop-filter` 到多层 `mask`]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/163241021</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/163241021</guid><author>m0_73761441</author><pubDate>Mon, 27 Jul 2026 13:37:15 +0800</pubDate><description><![CDATA[单层backdrop-filter只能实现均匀毛玻璃。渐变毛玻璃采用多层不同模糊半径图层，搭配mask渐变蒙版，依靠重叠过渡区间打造渐变模糊效果。文章区分渐变底色方案与多层渐变毛玻璃差异，提供完整 Demo，讲解参数调节、常见坑点、性能优化与兼容方案，适用于底部工具栏、悬浮导航等场景。]]></description><category></category></item><item><title><![CDATA[CSS 折叠引发的 scrollHeight 异常 —— 一次 Blink 引擎的诡异 Bug]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/158071197</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/158071197</guid><author>m0_73761441</author><pubDate>Sat, 14 Feb 2026 16:23:59 +0800</pubDate><description><![CDATA[项目中遇诡异滚动问题：外层滚动容器渲染消息列表，答案消息的思考步骤可折叠，折叠时用 max-height:0、opacity:0、overflow:hidden实现动画。普通正常，但步骤高约 18000px 时，折叠后容器底部现大片空白，scrollHeight异常约 12000。排查为 Blink 引擎（Chrome/Edge）边界 Bug——该 CSS 组合未正确约束 scrollHeight，致内部高度泄漏。可用 contain:layout或 transform:scaleY(0)解决，最终选后者。]]></description><category></category></item><item><title><![CDATA[移动端惯性滚动下 Click 事件失效：底层原理深度解析]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/156154578</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/156154578</guid><author>m0_73761441</author><pubDate>Mon, 22 Dec 2025 17:00:06 +0800</pubDate><description><![CDATA[移动端惯性滚动下 Click 事件失效原理分析 在移动端开发中，惯性滚动状态下点击事件失效的根本原因是浏览器采用了&quot;制动优先&quot;原则。当用户快速滚动时，触摸动作会被滚动控制器拦截，优先判定为减速指令而非点击意图。现代浏览器的多线程架构进一步加剧了这一问题：合成器线程直接处理滚动动画，而主线程负责事件派发，导致点击事件链（touchstart→touchend→click）在滚动状态下被截断。相比之下，touchstart作为原子级物理信号能即时触发，不受此限制。]]></description><category></category></item><item><title><![CDATA[vue2中transition使用方法解析，包含底部弹窗示例、样式未生效踩坑记录]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/155453002</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/155453002</guid><author>m0_73761441</author><pubDate>Mon, 01 Dec 2025 15:24:40 +0800</pubDate><description><![CDATA[本篇博客围绕Vue2中Transition组件展开，核心介绍其通过自动切换CSS类名实现过渡动画的原理，自定义name属性可避免全局样式冲突。结合底部弹出弹窗实战示例，讲解通过v-if控制弹窗显隐触发动画，样式层利用transform控制垂直位移、opacity实现淡入淡出，逻辑层以单布尔值管控弹窗状态的实现方式。还分析了动画类样式不生效的问题：容器样式后定义覆盖transform属性，给出调整样式书写顺序、移除冲突属性、临时提高动画类权重三种解决方案，最后总结掌握类名时序和样式优先级规则的重要性。]]></description><category></category></item><item><title><![CDATA[Vue 2 响应式系统常见问题与解决方案（包含_demo以下划线开头命名的变量导致响应式丢失问题）]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/153686822</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/153686822</guid><author>m0_73761441</author><pubDate>Tue, 21 Oct 2025 13:37:51 +0800</pubDate><description><![CDATA[Vue 2的响应式系统基于Object.defineProperty实现，存在一些容易忽略的陷阱。本文详细分析了常见的响应式问题，包括数组变更检测限制、下划线前缀属性命名陷阱等。重点介绍了使用_开头属性名会导致Vue无法代理该属性，从而失去响应式的问题。同时探讨了深拷贝与响应式的关系，JSON.parse(JSON.stringify())虽能实现深拷贝但会丢失响应式。文章提供了多种解决方案，如使用$set确保响应式、避免使用特殊前缀命名、正确处理数组更新等。通过理解这些陷阱和最佳实践，开发者可以避免Vu]]></description><category></category></item><item><title><![CDATA[移动端触摸事件与鼠标事件的触发机制详解]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/151721799</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/151721799</guid><author>m0_73761441</author><pubDate>Mon, 15 Sep 2025 17:06:24 +0800</pubDate><description><![CDATA[本文解析了移动端触摸与鼠标事件的触发机制。在移动设备上，一次触摸操作会按 “touchstart→touchend→mouseenter→mousemove→mousedown→mouseup→click” 顺序触发事件，点击其他区域还会触发 mouseleave。这是浏览器为兼容桌面端交互设计的模拟机制，既触发原生触摸事件，又模拟鼠标事件。文章分析了该机制的历史原因与逻辑，指出可能的事件冲突问题，建议通过设备类型判断差异化绑定事件。同时提供测试 Demo，帮助开发者直观理解触发顺序，助力解决移动端交互开发]]></description><category></category></item><item><title><![CDATA[使用Whistle自定义接口返回内容：Mock流式JSON数据全解析]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/149397501</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/149397501</guid><author>m0_73761441</author><pubDate>Wed, 16 Jul 2025 15:21:28 +0800</pubDate><description><![CDATA[本文详细介绍了使用 Whistle 工具 Mock 流式 JSON 数据的完整流程。从定位接口、准备 Mock 数据到配置基础规则，重点解决了流式 JSON 因响应头不符导致的页面加载问题。通过自定义响应头为 text/event-stream，结合具体配置示例，帮助开发者快速实现接口 Mock，同时提供常见问题排查技巧，适用于需要调试 SSE 格式接口的场景。]]></description><category></category></item><item><title><![CDATA[Vue2函数式组件实战：手写可调用的动态组件，适用于toast轻提示、tip提示、dialog弹窗等]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/146916759</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/146916759</guid><author>m0_73761441</author><pubDate>Tue, 01 Apr 2025 16:53:53 +0800</pubDate><description><![CDATA[在Vue2开发中，函数式组件提供了一种动态调用的灵活方案，特别适合全局弹窗、消息通知等需要脱离当前组件树的场景。本文通过实战代码演示如何实现一个可命令式调用的组件：通过`Vue.extend`创建构造器，结合单例模式管理实例，并自动处理DOM挂载与销毁。相比传统组件写法，函数式组件无需预置模板即可在任意位置调用，但需注意手动管理实例生命周期以避免内存泄漏。文章详细剖析了核心实现逻辑，对比了不同方案的优劣，并提供了多实例支持、SSR兼容等进阶优化建议，帮助开发者在灵活性与可维护性之间取得平衡。适用于需要动态控]]></description><category></category></item><item><title><![CDATA[CSS布局陷阱：max-width与定位属性组合引发的意外折行及解决方案]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/146479291</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/146479291</guid><author>m0_73761441</author><pubDate>Mon, 24 Mar 2025 16:41:14 +0800</pubDate><description><![CDATA[在CSS布局实践中，开发者常会遇到一个隐蔽的排版问题：当元素同时设置`max-width`与定位属性（absolute/fixed）时，配合`left`偏移和`transform`变换使用，会出现内容未达最大宽度却提前折行的异常现象。其本质原因是定位元素与变形属性的组合导致逻辑可用空间被压缩——浏览器在计算`left`百分比偏移时参考父容器宽度，而`transform`的百分比转换却基于元素自身宽度，形成环形依赖的宽度计算。通过创建分层容器结构，将定位属性与尺寸控制分离（外层容器承载`position/tr]]></description><category></category></item><item><title><![CDATA[仿Ant Design Vue风格自定义浏览器滚动条样式]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/146176373</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/146176373</guid><author>m0_73761441</author><pubDate>Tue, 11 Mar 2025 13:22:00 +0800</pubDate><description><![CDATA[本文详细讲解了如何通过CSS自定义浏览器滚动条样式以匹配Ant Design Vue风格。核心步骤包括：使用::-webkit-scrollbar系列伪元素选择器定制滚动条轨道、滑块、箭头按钮样式，重点解决了默认样式不统一的问题。关键代码演示了滚动条宽度、滑块圆角、悬停效果及SVG箭头图标集成，同时指出需关注-webkit前缀兼容性和移动端适配要点，为Ant Design Vue项目提供即用方案。]]></description><category></category></item><item><title><![CDATA[vue2项目中使用markdown-it插件教程，同时解决代码块和较长单词不换行问题]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/146100127</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/146100127</guid><author>m0_73761441</author><pubDate>Fri, 07 Mar 2025 17:03:07 +0800</pubDate><description><![CDATA[markdown-it插件可以将流式数据转换为markdown格式，并渲染成html，在页面中展示，# 可能遇到的问题
1. markdown-it中渲染代码块时，转换为code标签，导致内部段落不会自动换行，不分段会导致撑开宽度，设置white-space:normal即可
2. markdown-it组件中，如果输入较长的单词，不会自动换行，导致宽度撑开；结合::v-deep和*选择器，在markdown-it组件内设置word-break: break-all 和 overflow-wrap: br
]]></description><category></category></item><item><title><![CDATA[Vuex 跨 Module 方法调用，使用root:true解决]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/145797861</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/145797861</guid><author>m0_73761441</author><pubDate>Sat, 22 Feb 2025 17:15:52 +0800</pubDate><description><![CDATA[开启命名空间(namespaced: true)对于防止多个模块间可能存在的同名mutation/action造成干扰；使用 { root: true } 让特定上下文中发生的更改能被正确识别并应用至整个应用程序范围内的目标位置；]]></description><category></category></item><item><title><![CDATA[前端js面试知识点思维导图（脑图）]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/144141220</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/144141220</guid><author>m0_73761441</author><pubDate>Fri, 29 Nov 2024 16:57:55 +0800</pubDate><description><![CDATA[本文围绕 js 相关面试要点展开，涵盖数据类型、继承、this、作用域、数组、异步编程、内存泄漏、es6、原型、执行上下文等方面，具体涉及各知识点的概念、判断方法、实现原理、应用场景及相关特性等内容。]]></description><category></category></item><item><title><![CDATA[解锁 Vue 项目中 TSX 配置与应用简单攻略]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/144090817</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/144090817</guid><author>m0_73761441</author><pubDate>Wed, 27 Nov 2024 17:54:17 +0800</pubDate><description><![CDATA[本文探讨在 Vue 项目中如何配置 TSX 写法，涉及安装关键插件到 Vite 与 TypeScript 的详细配置步骤。同时，展示了 TSX 在 Vue 中的各种实用语法示例，包括 v-model、v-show、v-if 等常见指令的 TSX 实现方式，以及数组遍历、事件绑定、样式引入和父子组件传参等重要应用场景。]]></description><category></category></item><item><title><![CDATA[tsx中使用el-dialog设置visible.sync，解决弹窗右上角叉号失效问题]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/143961827</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/143961827</guid><author>m0_73761441</author><pubDate>Fri, 22 Nov 2024 09:37:44 +0800</pubDate><description><![CDATA[在 Vue 2 中，.sync 修饰符用于在父子组件之间同步属性值。然而，在 TSX 中并没有类似的 .sync 修饰符。如果要在 TSX 中实现类似的功能，需要手动实现。具体来说，可以通过监听 update:visible 事件来更新 dialogVisible 的值。]]></description><category></category></item><item><title><![CDATA[vue前端使用pdfjs与pdfdist-mergeofd 实现预览pdf并翻页，同时解决预览pdf显示模糊的问题]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/143282468</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/143282468</guid><author>m0_73761441</author><pubDate>Mon, 28 Oct 2024 10:19:04 +0800</pubDate><description><![CDATA[pdfjs与pdfdist-mergeofd 实现预览pdf并翻页，同时使用css的transform属性解决预览pdf显示模糊的问题]]></description><category></category></item><item><title><![CDATA[使用js和canvas、html实现简单的俄罗斯方块小游戏]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/143214553</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/143214553</guid><author>m0_73761441</author><pubDate>Thu, 24 Oct 2024 17:23:40 +0800</pubDate><description><![CDATA[使用js和canvas、html实现简单的俄罗斯方块小游戏，点击开始游戏后，使用键盘上的←→控制移动，↑控制方块旋转，↓控制方块加速下落，累计一行即可消除并获得分数，触碰到顶部时游戏结束html代码复制即用，可阅读注释]]></description><category></category></item><item><title><![CDATA[解决vue使用pdfdist-mergeofd插件时报错polyfills]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/143212200</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/143212200</guid><author>m0_73761441</author><pubDate>Thu, 24 Oct 2024 16:20:23 +0800</pubDate><description><![CDATA[该插件主要是为了解决pdf-js和ofd-js共同使用时产生的依赖冲突问题，这个错误是由于 pdfjs-dist 库在 Webpack 5 中缺少对 Node.js 核心模块的 polyfill。Webpack 5 不再默认包含这些 polyfill，因此需要手动配置它们。]]></description><category></category></item><item><title><![CDATA[使用js和canvas实现绘制一只丑萌的小猫，一步步绘制]]></title><link>https://blog.youkuaiyun.com/m0_73761441/article/details/143058738</link><guid>https://blog.youkuaiyun.com/m0_73761441/article/details/143058738</guid><author>m0_73761441</author><pubDate>Fri, 18 Oct 2024 17:25:00 +0800</pubDate><description><![CDATA[使用js和canvas实现绘制一只丑萌的小猫，一步步绘制，闲来无事就画了个这个东西，真的怪丑的，大家看个乐子就好，下面的html文件复制即用]]></description><category></category></item></channel></rss>