<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[seapackk的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/seapackk</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; seapackk]]></copyright><item><title><![CDATA[前端实现水印功能]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/142828045</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/142828045</guid><author>seapackk</author><pubDate>Thu, 10 Oct 2024 17:46:41 +0800</pubDate><description><![CDATA[前段时间突然接到一个需求，项目中要实现特定水印功能，不同的用户查看时展示用户特有的水印，这样可以在资源外流的时候追究到责任人。查找搜集了很多方法，有通过CSS伪元素添加水印的、还可以使用CSS重复背景图片、还有使用svg的，最后综合考虑了下，还是打算通过canvas来绘制水印。使用Canvas绘制水印是一种高度可定制的方式，它的拓展性非常好。]]></description><category></category></item><item><title><![CDATA[CSS案例：使用border绘制一个三角形]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/142786443</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/142786443</guid><author>seapackk</author><pubDate>Wed, 09 Oct 2024 14:38:34 +0800</pubDate><description><![CDATA[可以看到，边框是实现三角形的部分，边框实际上并不是一个直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形。其实这里涉及到了CSS3中盒模型的内容，在平时的使用中，我们使用的容器是标准盒模型，容器设置的宽高是不包含边框的高度的。在这里可能会有个疑问，既然容器的宽高为零，那么为什么通过设置边框的宽度就可以使得容器有内容呢？，padding 是内边距，border是它的边框，margin是外边距。取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的。]]></description><category></category></item><item><title><![CDATA[useFullscreen 设置全屏效果]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/137679856</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/137679856</guid><author>seapackk</author><pubDate>Fri, 12 Apr 2024 14:28:46 +0800</pubDate><description><![CDATA[它添加了以全屏模式呈现特定元素（及其后代）的方法，并在不再需要时退出全屏模式。这使得可以使用用户的整个屏幕呈现所需的内容（例如在线游戏），从屏幕上隐藏所有的浏览器用户界面以及其他应用，直到关闭全屏模式。大部分VueUse的函数都返回一个refs对象，可以使用ES6的对象解构语法来获取返回值。useFullscreen函数提供了四个返回值，包括一个响应式变量和三个函数。在阿里矢量图标库图中获取对应的图标，下载svg文件。实现全屏效果，主要是通过插件中。将图标文件放到项目对应的位置。]]></description><category></category></item><item><title><![CDATA[Vue3项目使用SVG图标]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/137647651</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/137647651</guid><author>seapackk</author><pubDate>Thu, 11 Apr 2024 17:58:30 +0800</pubDate><description><![CDATA[注意： symbolId 的值需要与 vite.config.ts中配置的保持一致。： 在项目运行时就生成所有图标,只需操作一次 dom。vite-plugin-svg-icons 的优点。创建一个SPIcon组件，封装svg。： 内置缓存,仅当文件被修改时才会重新生成。在vite.config.ts中进行配置。最终symbolId的值格式为。在main.ts文件中引入。]]></description><category></category></item><item><title><![CDATA[Vite的学习之旅（二）：基本配置和环境变量配置]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/135378006</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/135378006</guid><author>seapackk</author><pubDate>Thu, 04 Jan 2024 09:19:55 +0800</pubDate><description><![CDATA[在vite中对环境变量处理依赖于dotenv第三方库，vite中内置了这个第三方得库，dotenv会读取.env文件，并解析这个文件中对应的环境变量，然后将其注入process对象下。其实vite做了一个拦截，为了防止我们将隐私性的变量直接存入import.meta.env中，它规定环境变量不是以VITE开头的，就不会存入客户端中。随着项目的增大，需要配置的属性过多，之前的配置方式可能有些不便，可以将不同环境的配置分开为单个文件进行配置。需要注意的是，在 Vite 的 API 中，在开发环境下。]]></description><category></category></item><item><title><![CDATA[深入Javascript之事件循环（Event Loop），宏任务，微任务]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/135172823</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/135172823</guid><author>seapackk</author><pubDate>Sat, 23 Dec 2023 19:09:02 +0800</pubDate><description><![CDATA[关于这个问题，很多书籍上都有详细的解释，我在这里引用《ES6 标准入门》里面的说明来帮助我们理解。JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。]]></description><category></category></item><item><title><![CDATA[Vite的学习之旅（一）]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/135097276</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/135097276</guid><author>seapackk</author><pubDate>Tue, 19 Dec 2023 23:59:34 +0800</pubDate><description><![CDATA[Vite会找到对应的依赖，然后调用esbuild(安装Vite时会安装这些依赖，其主要对js语法进行处理)库，将其他规范的代码转换成esmodule规范，然后放到当前目录下的node_modules/.vite/deps，同时对esmodules规范的各个模块进行统一集成。如下图，Vite对lodash和lodash依赖做了路径转换。]]></description><category></category></item><item><title><![CDATA[CSS实现水平垂直居中有哪些方式？]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/134362041</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/134362041</guid><author>seapackk</author><pubDate>Sun, 12 Nov 2023 16:11:25 +0800</pubDate><description><![CDATA[通过vertical-align也可以在垂直方向做到居中,最后将children的行高设置为默认值（line-height是可继承的，需要单独设置下子元素的行高）。先将元素的左上角定位到元素的中心（top:50%;left:50%），然后再通过margin负值调整元素中心到页面中心的距离。先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但。]]></description><category></category></item><item><title><![CDATA[CSS3选择器知识整理]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/134354584</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/134354584</guid><author>seapackk</author><pubDate>Sat, 11 Nov 2023 22:02:18 +0800</pubDate><description><![CDATA[CSS3在CSS2.1的基础上新增了，减少了对HTML类名或ID名的依赖。]]></description><category></category></item><item><title><![CDATA[HTML5面试相关知识汇总]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/134313325</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/134313325</guid><author>seapackk</author><pubDate>Thu, 09 Nov 2023 15:39:01 +0800</pubDate><description><![CDATA[当获取JS脚本后，如果HTML解析完成，则直接执行脚本，若HTML解析未完成，则暂停HTML解析，执行JS脚本，脚本执行完毕之后再进行HTML解析。浏览器在解析HTML的时候，如果遇到一个没有任何属性的script标签，就会暂停解析，先发送网络请求获取该JS脚本的代码内容，然后js引擎会执行这段脚本，执行完毕之后在继续解析。defer表示延迟，当浏览器遇到带有defer的script脚本时，其发送网络请求也是异步的，但JS脚本的解析会延迟到HTML解析完毕之后再进行。块级元素的宽度，高度都是可以设置的。]]></description><category></category></item><item><title><![CDATA[深入JavaScript之内存管理]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/132587828</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/132587828</guid><author>seapackk</author><pubDate>Wed, 30 Aug 2023 17:55:23 +0800</pubDate><description><![CDATA[控制器运算器存储器输入设备输出设备。通常我们所说的内存属于存储器，在程序运行时，cpu需要的调用指令和数据只能从内存中获取(硬盘只有存储功能，执行时会将数据缓存到内存中)。JavaScript只是一种语言，真正进行内存的调用和分配的是JavaScript引擎。]]></description><category></category></item><item><title><![CDATA[深入JavaScript之this]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/132501189</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/132501189</guid><author>seapackk</author><pubDate>Fri, 25 Aug 2023 18:22:50 +0800</pubDate><description><![CDATA[在学习JavaScript的过程中，this是一个不可忽视的概念，很多巧妙的操作都是基于this实现的。但this在不同环境下的取值往往是一个令人头疼的问题。先看一下官方文档中对this的说明。当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。]]></description><category></category></item><item><title><![CDATA[JS中== 和=== 的区别]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/132488113</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/132488113</guid><author>seapackk</author><pubDate>Fri, 25 Aug 2023 09:14:02 +0800</pubDate><description><![CDATA[之前只是大致了解 和  的区别，之前认为  是比较值的大小， 不仅需要比较值，还需要比较值的类型。之前在一次逻辑处理中，做验证数据不为空时写了这样一个逻辑。varietyData数组中元素每个字段都不能为空字符串或空数组。
当value3的值为0时，数据应该是通过的，结果验证逻辑一直不通过，打断点调试后才发现问题出在这里。
解决办法
之后将  改成  就没问题了。
知识梳理
对于 == 和 === 的比较规则，想趁着这次机会重新梳理下。严格相等运算符(===)也叫全等运算符，其会检查两个操作数是否相等，并且]]></description><category></category></item><item><title><![CDATA[Linux发行版的数量(图的遍历)]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/131995514</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/131995514</guid><author>seapackk</author><pubDate>Sat, 29 Jul 2023 15:25:24 +0800</pubDate><description><![CDATA[这种基于深度优先搜索或者广度优先搜索的算法很实用，因为它可以用于解决各种图的问题，比如求图的连通分量数量，求图的最大连通子图，检测图是否存在环等等。具体来说，我们首先遍历每一个节点，如果这个节点没有被访问过，那么我们就从这个节点出发，进行一次深度优先搜索或者广度优先搜索，每访问到一个节点，我们就把这个节点标记为已访问，同时计数器加1，然后再去访问所有与它直接相连并且还没有被访问过的节点。时间复杂度上，我们需要遍历所有的节点和边，因此时间复杂度是O(n^2)，其中n是节点的数量。第一行输入发行版的总数量N，]]></description><category></category></item><item><title><![CDATA[动态规划思想求最小步数]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/131975061</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/131975061</guid><author>seapackk</author><pubDate>Fri, 28 Jul 2023 10:28:32 +0800</pubDate><description><![CDATA[这个问题是一个典型的动态规划问题，主要解决的是如何从0点到达n点的最小步数。每次移动只能是2步或3步，且可以向左或向右移动。虽然可以向左移动，但从0点开始，向右移动到达任何非负整数点n总是更快的，所以我们的目标是寻找最小步数来到达非负整数n。求从坐标零点到坐标n的最小步数，一次只能沿横坐标轴向左或向右移动2或3。注意：途经的坐标可以为负数。解法优化，n的范围是1到10的9次方，n较大时，使用递归可能栈溢出。从坐标零点移动到4，最小需要两步，即向右移2步，再向右移2步。输出从坐标零点移动到坐标n的移动步数。]]></description><category></category></item><item><title><![CDATA[机试算法题-全排列]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/131968279</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/131968279</guid><author>seapackk</author><pubDate>Thu, 27 Jul 2023 20:43:16 +0800</pubDate><description><![CDATA[分析：以示例二为例，统计各字符出现的次数，A-2,  B-1,  C-1,  D-1,  E-1,  F-1,  G-1,  H-2。给定一个只包含大写英文字母的字符串S，要求你给出对S重新排列的所有不相同的排列数。如：S为ABA，则不同的排列有ABA、AAB、BAA三种。输入一个长度不超过10的字符串S，我们确保都是大写的。输出S重新排列的所有不相同的排列数（包含自己本身）。]]></description><category></category></item><item><title><![CDATA[深入JavaScript闭包(三)_闭包原理及经典面试题]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/131930889</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/131930889</guid><author>seapackk</author><pubDate>Wed, 26 Jul 2023 08:55:39 +0800</pubDate><description><![CDATA[闭包在JavaScript一直是一个比较难以理解的概念，在这篇文章中将通过执行上下文和作用域来理解闭包。如果对上下文和作用域不太了解，建议先看前两章。闭包(closure)是一个函数以及其捆绑的周边环境状态(词法环境)的引用组合。换而言之，闭包可以让开发者从内部函数访问外部函数的作用域。在JavaScript中，闭包会随着函数的创建而被同时创建。闭包指的是那些引用了另一个函数作用域中变量的函数，通常在嵌套函数中实现。总结一下：闭包本质是。]]></description><category></category></item><item><title><![CDATA[JS将数组转化为对象结构]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/131921450</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/131921450</guid><author>seapackk</author><pubDate>Tue, 25 Jul 2023 16:42:38 +0800</pubDate><description><![CDATA[解法二：运用JavaScript中的map思想求解。map方法：对数组每一项都运行传入的函数，返回由。解法一：运用递归思想求解。]]></description><category></category></item><item><title><![CDATA[用多种方式实现斐波那契数列]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/131904651</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/131904651</guid><author>seapackk</author><pubDate>Mon, 24 Jul 2023 20:43:41 +0800</pubDate><description><![CDATA[斐波那契数列（Fibonacci sequence），又称黄金分割数列，因意大利数学家莱昂纳多·斐波那契（Leonardo Fibonacci）1202年以兔子繁殖为例子而引入，故又称为“兔子数列”，指的是这样一个数列：f1= 1、f2= 1、fn= fn-1+ fn-2(n>2)]]></description><category></category></item><item><title><![CDATA[前端模板引擎之mustache]]></title><link>https://blog.youkuaiyun.com/seapackk/article/details/131878371</link><guid>https://blog.youkuaiyun.com/seapackk/article/details/131878371</guid><author>seapackk</author><pubDate>Sun, 23 Jul 2023 12:42:15 +0800</pubDate><description><![CDATA[将数据按照特定的方式转化为视图(html)的一种技术。举个例子，将图中的data数据转化为 视图(html)结构数据。搬一下网上的概念：模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的文档。替换。将预先定义的标签字符替换为指定的业务数据，或者根据某种定义好的流程进行输出。Mustache是一款非常经典的前端模板引擎，是一套轻逻辑的模板语法。它可以来处理HTML，配置文件，源代码等文件。]]></description><category></category></item></channel></rss>