<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[MsWRight的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/MsWRight</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; MsWRight]]></copyright><item><title><![CDATA[ScratchCard刮刮卡交互元素的实现]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/149403560</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/149403560</guid><author>MsWRight</author><pubDate>Wed, 16 Jul 2025 17:51:43 +0800</pubDate><description><![CDATA[刮刮卡是⼀种常见的网页交互元素，通过模拟物理世界的刮涂层来揭示下方的内容。绘制⼀条路径，然后通过 arc 和之前传⼊的半径值来创建一个圆，最后使用 fill 方法进行填充，在混合透明的前提下，这里就会展示出被擦除的效果。是将现有内容将保留在不与新形状重叠的位置，具体来说，它会在源图形和目标图形相交的区域，将目标图形的颜色变为透明。缩放的坐标绘制内容，可能不会在正确的位置渲染，尤其是在高分辨率屏幕或有缩放的页面布局。然后就需要计算已经被擦除的比例，这里通过计算透明的像素的占比来确定擦除的比例。]]></description><category></category></item><item><title><![CDATA[apng-canvas的实现原理]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/149401661</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/149401661</guid><author>MsWRight</author><pubDate>Wed, 16 Jul 2025 17:29:05 +0800</pubDate><description><![CDATA[APNG是由PNG图像格式演变而来。PNG图像格式只能用于保存单张图像，无法支持动态图像。为了支持动态图像，APNG使用了⼀种叫做“有限带宽渲染”的技术，这种技术可以在保证图像质量的前提下，利用有限的带宽来加载动态图像。可以使用 img标签 直接播放，但是由于存在兼容性问题以及项目中需要获取其播放的时间节点以及控制它的播放，所以需要采用 canvas 绘制APNG。]]></description><category></category></item><item><title><![CDATA[cookie，session，token详解]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/137064268</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/137064268</guid><author>MsWRight</author><pubDate>Wed, 27 Mar 2024 09:55:17 +0800</pubDate><description><![CDATA[cookie，session和token都是我们实现授权的方式，在面试中也经常问道到他们的区别，那么他们的区别到底是什么呢？]]></description><category></category></item><item><title><![CDATA[next.js项目基础入门]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/136889230</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/136889230</guid><author>MsWRight</author><pubDate>Wed, 20 Mar 2024 21:38:25 +0800</pubDate><description><![CDATA[注意：服务端组件是在服务端运行的，所以没有调用浏览器API的能力，暂时不支持交互，比如要使用window.XXX，useState，useEffect等，需要在文件开头使用’use client‘声明。使用use client等于是声明了一个服务器和客户端组件模块之间的边界，也就是说，如果一个文件顶部有这个指令，那么导入该文件的所有其它模块（包括子组件）都将被视为客户端捆绑的一部分。服务端组件就是在服务端渲染的组件，在next.js v13中，只要是在app目录内的页面，全部默认为服务端组件。]]></description><category></category></item><item><title><![CDATA[数组索引类型转换]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/136524162</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/136524162</guid><author>MsWRight</author><pubDate>Thu, 07 Mar 2024 10:40:00 +0800</pubDate><description><![CDATA[我们都知道数字可以作为数组的索引来使用，那如果我使用字符串，函数或者对象作为数组索引呢？看到这段代码，我们可能会感到疑惑，我们使用字符串作为数组索引会出现问题吗？这里我们就能引出，当我们使用数字，对象，函数等作为数组索引时，他会进行一个类型转换，会将这些都转换成一个字符串。]]></description><category></category></item><item><title><![CDATA[vue组件封装实现v-model]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/135828026</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/135828026</guid><author>MsWRight</author><pubDate>Wed, 24 Jan 2024 17:51:51 +0800</pubDate><description><![CDATA[在子组件中接收一个props，这里注意如果父组件传递时写的是v-model就接收modelValue，如果父组件传递时写的是v-model：value那么这里就接受的是value。在输入框输入的时候将输入的值通过事件传递给父组件即可。这样就实现了自己封装的input组件的v-model。并且接收一个事件update:modelValue。]]></description><category></category></item><item><title><![CDATA[keepAlive动态缓存组件]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/135088731</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/135088731</guid><author>MsWRight</author><pubDate>Tue, 19 Dec 2023 16:53:41 +0800</pubDate><description><![CDATA[keepAlive的使用大家应该都清楚，如果我们在同一个router-view下展示的组件，有的想让他缓存，有的不想让他缓存应该怎么办呢？]]></description><category></category></item><item><title><![CDATA[Charles手机抓包配置(Mac+安卓)]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/134870447</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/134870447</guid><author>MsWRight</author><pubDate>Fri, 08 Dec 2023 10:14:24 +0800</pubDate><description><![CDATA[charles下载完成之后，点击proxy——>Proxy Settings打开页面后勾选Enable transparent HTTP proxying，点击ok然后点击proxy——>macOS Proxy，这里是勾选是否抓取电脑内的请求。]]></description><category></category></item><item><title><![CDATA[ffmpeg.js的基本使用]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/134461242</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/134461242</guid><author>MsWRight</author><pubDate>Fri, 17 Nov 2023 14:15:04 +0800</pubDate><description><![CDATA[现在的视频格式有很多，比如MP4，WebM等，我们在开发过程中也经常需要进行格式转换，所以今天给大家分享一下ffmpeg，一个视频格式的处理工具。]]></description><category></category></item><item><title><![CDATA[本地开发使用 whistle+ Proxy SwitchyOmega 配置 web 代理]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/134139886</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/134139886</guid><author>MsWRight</author><pubDate>Tue, 31 Oct 2023 14:39:10 +0800</pubDate><description><![CDATA[首先需要安装查看版本，如果能正确输出whistle的版本信息，就表示安装成功whisle -V然后启动whistlew2 start之后就需要配置代理出现之后点击打开会出现这个页面，在这里填写配置的代理就可以啦。]]></description><category></category></item><item><title><![CDATA[服务端组件和客户端组件详解]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/133687505</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/133687505</guid><author>MsWRight</author><pubDate>Sun, 08 Oct 2023 18:13:15 +0800</pubDate><description><![CDATA[next.js中服务端组件和客户端组件]]></description><category></category></item><item><title><![CDATA[JS排序算法——快速排序]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/133267111</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/133267111</guid><author>MsWRight</author><pubDate>Mon, 25 Sep 2023 10:25:03 +0800</pubDate><description><![CDATA[快速排序正如它的名字一样，排序很快，是处理大数据最快的排序算法之一了。时间复杂度为O(nlogn)]]></description><category></category></item><item><title><![CDATA[oss大文件分片上传]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/133151126</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/133151126</guid><author>MsWRight</author><pubDate>Fri, 22 Sep 2023 09:13:09 +0800</pubDate><description><![CDATA[oss大文件分片上传以及中断重传]]></description><category></category></item><item><title><![CDATA[时间复杂度分析]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/133124249</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/133124249</guid><author>MsWRight</author><pubDate>Thu, 21 Sep 2023 10:16:11 +0800</pubDate><description><![CDATA[i<n 执行n+1次（因为最后一次也要比较）i++以及for循环内的代码执行n次。那么T(n)=n+n+n=3n+2。设上述语句需要循环x次才能跳出循环。记这个程序的运行时间为T（n）int i=0执行1次。]]></description><category></category></item><item><title><![CDATA[js节流和防抖面试时应该怎么说]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/132911673</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/132911673</guid><author>MsWRight</author><pubDate>Sat, 16 Sep 2023 09:15:48 +0800</pubDate><description><![CDATA[例如：设定1000毫秒执行，当你触发事件了，他会1000毫秒后执行，但是在还剩500毫米的时候你又触发了事件，那就会重新开始1000毫秒后再执行。]]></description><category></category></item><item><title><![CDATA[js事件循环机制]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/132907613</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/132907613</guid><author>MsWRight</author><pubDate>Fri, 15 Sep 2023 21:14:58 +0800</pubDate><description><![CDATA[js事件循环全面讲解+经典题目]]></description><category></category></item><item><title><![CDATA[几种时间格式详解及互相转换（js）]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/132378295</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/132378295</guid><author>MsWRight</author><pubDate>Sat, 19 Aug 2023 13:42:06 +0800</pubDate><description><![CDATA[几种时间格式详解以及时间转换]]></description><category></category></item><item><title><![CDATA[uniapp小程序触底加载不生效]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/132332665</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/132332665</guid><author>MsWRight</author><pubDate>Thu, 17 Aug 2023 08:44:51 +0800</pubDate><description><![CDATA[触底加载触底加载类似于分页，却又不同于传统的分页，他只有在用户上滑页面，并在页面距离底部一定距离时才会触发。]]></description><category></category></item><item><title><![CDATA[解决HBuilder安装内置终端失败，报错请检查网络]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/132135525</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/132135525</guid><author>MsWRight</author><pubDate>Sun, 06 Aug 2023 21:03:50 +0800</pubDate><description><![CDATA[在安装内置终端时，如果出现内置终端安装失败，请检查网络这种错误，可以使用以下的方法就可以顺利解决。只需要使用管理员权限打开HBuilder就可以解决报错。]]></description><category></category></item><item><title><![CDATA[文件上传阿里云（使用Ant Design）]]></title><link>https://blog.youkuaiyun.com/MsWRight/article/details/131537160</link><guid>https://blog.youkuaiyun.com/MsWRight/article/details/131537160</guid><author>MsWRight</author><pubDate>Tue, 04 Jul 2023 16:28:30 +0800</pubDate><description><![CDATA[前端页面经常需要进行文件上传，那么就需要实现配合后端实现文件上传oss阿里云，下面区分了使用组件和不使用组件进行上传的情况注意需要通过customRequest自定义上传方法这里我定义了文件需要为pdf和word，如果你有别的需求可以更改accept属性。]]></description><category></category></item></channel></rss>