<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[Mo_jon的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/Mo_jon</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Mo_jon]]></copyright><item><title><![CDATA[vite + vue 快速构建 html 页面 （舒适编写html文件）]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/157060117</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/157060117</guid><author>Mo_jon</author><pubDate>Sat, 17 Jan 2026 10:16:44 +0800</pubDate><description><![CDATA[本文介绍了使用Vite+Vue快速开发HTML模板的方法。首先需要安装Node.js、Vite、Vue和Prettier，然后安装vite-plugin-html-vue-ssr插件（支持源码修改）。通过配置vite.config.js文件即可使用该插件，文中提供了示例项目链接。同时推荐了Webpack5+Vue3的替代方案。整个流程简洁高效，适合快速构建静态页面项目。]]></description><category></category></item><item><title><![CDATA[javascript 加载 ifram 时自动计算高度，不显示滚动条、附带loading效果]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/155136619</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/155136619</guid><author>Mo_jon</author><pubDate>Mon, 24 Nov 2025 09:07:42 +0800</pubDate><description><![CDATA[该代码实现了一个动态加载和调整iframe尺寸的解决方案。loader.js脚本会监听页面中带有特定属性的script标签，自动创建包含加载动画的容器和iframe。当iframe内容加载完成后，通过postMessage通信机制向父页面发送尺寸信息，父页面收到后动态调整iframe大小并移除加载动画。iframe页面则持续监测内容高度变化，实时更新尺寸。整个方案实现了无缝的内容嵌入和自适应高度调整，同时提供了优雅的加载过渡效果。]]></description><category></category></item><item><title><![CDATA[javascript鼠标hover事件（防抖处理）]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/153181163</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/153181163</guid><author>Mo_jon</author><pubDate>Mon, 13 Oct 2025 10:26:41 +0800</pubDate><description><![CDATA[本文介绍了一个封装好的hover事件处理函数hoverEvent。该函数实现了防抖处理，可防止快速鼠标移动导致的事件频繁触发。函数接收三个参数：选择器selector、鼠标移入mouseenter和移出mouseleave的回调函数。使用时只需传入对应参数即可，如示例中为&quot;.hover-el&quot;元素绑定hover事件。该封装简化了hover事件处理，并内置了100ms的防抖延迟，提升了交互体验。]]></description><category></category></item><item><title><![CDATA[iframe 全屏切换函数 Javascript 实现]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/152810376</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/152810376</guid><author>Mo_jon</author><pubDate>Thu, 09 Oct 2025 17:52:33 +0800</pubDate><description><![CDATA[这个代码片段实现了一个全屏切换功能。toggleFullScreen函数检查当前是否处于全屏状态，如果不是则让指定元素进入全屏模式，否则退出全屏。它兼容多种浏览器前缀（webkit、moz、ms）。示例中展示了如何调用该函数使一个iframe元素切换全屏状态。该函数提供了跨浏览器的全屏API统一封装，便于在网页中实现全屏功能。]]></description><category></category></item><item><title><![CDATA[用 javascript 实现一个通用分页构造器 “createPaginator“ ，内部自动维护 page 参数]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/152000026</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/152000026</guid><author>Mo_jon</author><pubDate>Tue, 23 Sep 2025 15:31:42 +0800</pubDate><description><![CDATA[本文介绍了如何实现一个通用的分页构造器createPaginator，并演示了其在分页加载场景中的应用。该构造器支持配置初始页码、前后置钩子函数和分页处理逻辑，通过next()方法控制分页状态。在示例中，结合scrollToBottom实现了滚动到底部自动加载更多数据的功能，同时处理了加载状态显示和数据请求逻辑。代码包含防抖机制、滚动兼容性处理和内存泄漏预防等细节，为前端分页功能提供了可复用的解决方案。]]></description><category></category></item><item><title><![CDATA[css 遮盖滚动条，鼠标移上显示]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/151226429</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/151226429</guid><author>Mo_jon</author><pubDate>Fri, 05 Sep 2025 16:45:14 +0800</pubDate><description><![CDATA[该HTML文档展示了一种使用CSS隐藏横向滚动条的技巧。通过::after伪元素和绝对定位，在PC端（宽度≥768px时）创建一个20px高的白色遮罩层覆盖滚动条区域。当鼠标悬停时遮罩消失，滚动条可见。这种方法保持了内容可横向滚动功能，同时实现了视觉上隐藏滚动条的UI效果。核心代码包括overflow-x-scroll类实现滚动，cover-scrollbar-x类实现遮盖逻辑，利用:has()选择器和hover状态控制遮罩显隐。]]></description><category></category></item><item><title><![CDATA[CSS 瀑布流图片简易实现]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/151187103</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/151187103</guid><author>Mo_jon</author><pubDate>Thu, 04 Sep 2025 16:20:11 +0800</pubDate><description><![CDATA[本文介绍了四种实现瀑布流布局的CSS方法：1) 使用float:left实现固定高度的常规浮动布局；2) 使用flex-wrap:wrap实现固定高度的弹性盒子布局；3) 使用column-count实现列数固定、宽高自适应的多列布局；4) 使用Grid布局结合grid-auto-flow:dense实现列数变化、宽高自适应的网格布局。每种方法都提供了对应的HTML结构和CSS样式代码示例，适用于不同需求场景下的瀑布流实现。]]></description><category></category></item><item><title><![CDATA[Promise 极简实现，执行 resolve 就是执行了 then 传入的 callback]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/150550938</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/150550938</guid><author>Mo_jon</author><pubDate>Wed, 20 Aug 2025 12:08:59 +0800</pubDate><description><![CDATA[文章摘要：本文展示了一个简化版的 Promise 实现代码，核心逻辑包括构造函数、then 方法和 resolve 功能。通过 setTimeout 演示了异步操作如何触发 resolve，进而执行 then 方法中注册的回调函数。代码示例清晰地展现了 Promise 的基本工作机制：resolve 实际上就是执行 then 传入的回调函数。]]></description><category></category></item><item><title><![CDATA[Chrome 浏览使用 SwitchyOmega 扩展插件，替代 host 文件配置功能（以代理方式实现）]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/150441323</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/150441323</guid><author>Mo_jon</author><pubDate>Sat, 16 Aug 2025 10:07:19 +0800</pubDate><description><![CDATA[本文介绍了SwitchyOmega代理插件的安装与配置方法。首先通过图片展示插件安装界面，然后分两步详细说明配置过程：1）创建代理设置；2）建立自定义规则。最后指导用户如何启用配置好的规则。全文配有清晰的界面截图，帮助用户直观了解每个操作步骤。]]></description><category></category></item><item><title><![CDATA[js 实现洋葱模型、洋葱反向模型]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/150072596</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/150072596</guid><author>Mo_jon</author><pubDate>Fri, 08 Aug 2025 18:30:25 +0800</pubDate><description><![CDATA[摘要 本文通过JavaScript代码演示了两种中间件执行模式：正向链式调用和洋葱模型。第一种模式展示了函数按顺序调用但执行顺序反转的现象；第二种模式则实现了经典的洋葱模型，中间件按嵌套顺序依次执行，再逆序返回。代码示例清晰地展示了两种模式下函数调用的执行顺序差异，并通过控制台输出直观呈现了执行过程。文中配图展示了两种模式的具体执行结果，帮助理解中间件处理流程的特点。]]></description><category></category></item><item><title><![CDATA[react native (expo) 骨架屏简单实现，带闪烁动画（跨平台）]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/148745571</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/148745571</guid><author>Mo_jon</author><pubDate>Wed, 18 Jun 2025 18:07:53 +0800</pubDate><description><![CDATA[react native (expo) 骨架屏简单实现，带闪烁动画]]></description><category></category></item><item><title><![CDATA[JQuery 禁止页面滚动（防止页面抖动）]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/148068797</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/148068797</guid><author>Mo_jon</author><pubDate>Mon, 19 May 2025 17:16:54 +0800</pubDate><description><![CDATA[这段JavaScript代码提供了两个函数，用于控制页面的滚动行为。unScroll函数通过设置body元素的宽度和overflow-y属性为hidden，禁止页面上下滚动。reUnScroll函数则通过将overflow-y属性恢复为auto并移除宽度设置，重新启用页面滚动。这两个函数可以用于在特定场景下（如弹出层显示时）临时禁用页面滚动，以提升用户体验。
]]></description><category></category></item><item><title><![CDATA[react native 实现 AutoHeightImage 组件]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/147740462</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/147740462</guid><author>Mo_jon</author><pubDate>Tue, 06 May 2025 15:34:38 +0800</pubDate><description><![CDATA[react native 实现 AutoHeightImage 组件]]></description><category></category></item><item><title><![CDATA[react native 实现 WebViewAutoHeight （兼容H5、已实际用于expo项目中）]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/147616034</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/147616034</guid><author>Mo_jon</author><pubDate>Tue, 29 Apr 2025 17:33:55 +0800</pubDate><description><![CDATA[用于替代 import AutoHeightWebView from “react-native-autoheight-webview”注意 react-native-autoheight-webview 加载内容动态变化时存在闪问题。]]></description><category></category></item><item><title><![CDATA[jquery 发送验证码，倒计时按钮处理通用函数]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/146538263</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/146538263</guid><author>Mo_jon</author><pubDate>Wed, 26 Mar 2025 19:07:48 +0800</pubDate><description><![CDATA[【代码】jquery 发送验证码，倒计时按钮处理通用函数。]]></description><category></category></item><item><title><![CDATA[多行省略号 后加上自定义符号]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/146371260</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/146371260</guid><author>Mo_jon</author><pubDate>Wed, 19 Mar 2025 15:18:44 +0800</pubDate><description><![CDATA[通过比较文本的实际高度 (scrollHeight) 和容器的最大高度 (maxHeight) 来判断文本是否超出容器范围。如果文本被截断，则显示“查看更多”按钮；* 省略号显示自定义字符。/* 省略号自定义字符 *//* 两行省略号 */]]></description><category></category></item><item><title><![CDATA[layui 远程搜索下拉选择组件（多选）]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/145727262</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/145727262</guid><author>Mo_jon</author><pubDate>Wed, 19 Feb 2025 14:08:39 +0800</pubDate><description><![CDATA[layui 远程搜索下拉选择组件（多选）]]></description><category></category></item><item><title><![CDATA[css 内容超过 100px 高度显示透明遮罩]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/145203049</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/145203049</guid><author>Mo_jon</author><pubDate>Fri, 17 Jan 2025 11:28:04 +0800</pubDate><description><![CDATA[【代码】css 内容超过 100px 高度显示透明遮罩。]]></description><category></category></item><item><title><![CDATA[给 ＜style＞ 中所有的 css 增加一个父级 class]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/144744867</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/144744867</guid><author>Mo_jon</author><pubDate>Thu, 26 Dec 2024 15:03:23 +0800</pubDate><description><![CDATA[【代码】给  中所有的 css 增加一个父级 class。]]></description><category></category></item><item><title><![CDATA[设置rem基准值]]></title><link>https://blog.youkuaiyun.com/Mo_jon/article/details/144631309</link><guid>https://blog.youkuaiyun.com/Mo_jon/article/details/144631309</guid><author>Mo_jon</author><pubDate>Sat, 21 Dec 2024 14:52:38 +0800</pubDate><description><![CDATA[【代码】设置rem基准值。]]></description><category></category></item></channel></rss>