- 博客(24)
- 收藏
- 关注
RSS订阅原创 前端实现水印功能
前段时间突然接到一个需求，项目中要实现特定水印功能，不同的用户查看时展示用户特有的水印，这样可以在资源外流的时候追究到责任人。查找搜集了很多方法，有通过CSS伪元素添加水印的、还可以使用CSS重复背景图片、还有使用svg的，最后综合考虑了下，还是打算通过canvas来绘制水印。使用Canvas绘制水印是一种高度可定制的方式，它的拓展性非常好。
2024-10-10 17:46:41
796
原创 CSS案例：使用border绘制一个三角形
可以看到，边框是实现三角形的部分，边框实际上并不是一个直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形。其实这里涉及到了CSS3中盒模型的内容，在平时的使用中，我们使用的容器是标准盒模型，容器设置的宽高是不包含边框的高度的。在这里可能会有个疑问，既然容器的宽高为零，那么为什么通过设置边框的宽度就可以使得容器有内容呢？，padding 是内边距，border是它的边框，margin是外边距。取消一条边的时候，与这条边相邻的两条边的接触部分会变成直的。
2024-10-09 14:38:34
706
原创 useFullscreen 设置全屏效果
它添加了以全屏模式呈现特定元素（及其后代）的方法，并在不再需要时退出全屏模式。这使得可以使用用户的整个屏幕呈现所需的内容（例如在线游戏），从屏幕上隐藏所有的浏览器用户界面以及其他应用，直到关闭全屏模式。大部分VueUse的函数都返回一个refs对象，可以使用ES6的对象解构语法来获取返回值。useFullscreen函数提供了四个返回值，包括一个响应式变量和三个函数。在阿里矢量图标库图中获取对应的图标，下载svg文件。实现全屏效果，主要是通过插件中。将图标文件放到项目对应的位置。
2024-04-12 14:28:46
723
原创 Vue3项目使用SVG图标
注意： symbolId 的值需要与 vite.config.ts中配置的保持一致。： 在项目运行时就生成所有图标,只需操作一次 dom。vite-plugin-svg-icons 的优点。创建一个SPIcon组件，封装svg。： 内置缓存,仅当文件被修改时才会重新生成。在vite.config.ts中进行配置。最终symbolId的值格式为。在main.ts文件中引入。
2024-04-11 17:58:30
1016
原创 Vite的学习之旅（二）：基本配置和环境变量配置
在vite中对环境变量处理依赖于dotenv第三方库，vite中内置了这个第三方得库，dotenv会读取.env文件，并解析这个文件中对应的环境变量，然后将其注入process对象下。其实vite做了一个拦截，为了防止我们将隐私性的变量直接存入import.meta.env中，它规定环境变量不是以VITE开头的，就不会存入客户端中。随着项目的增大，需要配置的属性过多，之前的配置方式可能有些不便，可以将不同环境的配置分开为单个文件进行配置。需要注意的是，在 Vite 的 API 中，在开发环境下。
2024-01-04 09:19:55
2489
原创 深入Javascript之事件循环（Event Loop），宏任务，微任务
关于这个问题，很多书籍上都有详细的解释，我在这里引用《ES6 标准入门》里面的说明来帮助我们理解。JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。
2023-12-23 19:09:02
913
原创 Vite的学习之旅（一）
Vite会找到对应的依赖，然后调用esbuild(安装Vite时会安装这些依赖，其主要对js语法进行处理)库，将其他规范的代码转换成esmodule规范，然后放到当前目录下的node_modules/.vite/deps，同时对esmodules规范的各个模块进行统一集成。如下图，Vite对lodash和lodash依赖做了路径转换。
2023-12-19 23:59:34
1124
原创 CSS实现水平垂直居中有哪些方式？
通过vertical-align也可以在垂直方向做到居中,最后将children的行高设置为默认值（line-height是可继承的，需要单独设置下子元素的行高）。先将元素的左上角定位到元素的中心（top:50%;left:50%），然后再通过margin负值调整元素中心到页面中心的距离。先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，但。
2023-11-12 16:11:25
211
原创 HTML5面试相关知识汇总
当获取JS脚本后，如果HTML解析完成，则直接执行脚本，若HTML解析未完成，则暂停HTML解析，执行JS脚本，脚本执行完毕之后再进行HTML解析。浏览器在解析HTML的时候，如果遇到一个没有任何属性的script标签，就会暂停解析，先发送网络请求获取该JS脚本的代码内容，然后js引擎会执行这段脚本，执行完毕之后在继续解析。defer表示延迟，当浏览器遇到带有defer的script脚本时，其发送网络请求也是异步的，但JS脚本的解析会延迟到HTML解析完毕之后再进行。块级元素的宽度，高度都是可以设置的。
2023-11-09 15:39:01
57
原创 深入JavaScript之内存管理
控制器运算器存储器输入设备输出设备。通常我们所说的内存属于存储器，在程序运行时，cpu需要的调用指令和数据只能从内存中获取(硬盘只有存储功能，执行时会将数据缓存到内存中)。JavaScript只是一种语言，真正进行内存的调用和分配的是JavaScript引擎。
2023-08-30 17:55:23
307
原创 深入JavaScript之this
在学习JavaScript的过程中，this是一个不可忽视的概念，很多巧妙的操作都是基于this实现的。但this在不同环境下的取值往往是一个令人头疼的问题。先看一下官方文档中对this的说明。当前执行上下文（global、function 或 eval）的一个属性，在非严格模式下，总是指向一个对象，在严格模式下可以是任意值。
2023-08-25 18:22:50
71
原创 JS中== 和=== 的区别
之前只是大致了解 和 的区别，之前认为 是比较值的大小， 不仅需要比较值，还需要比较值的类型。之前在一次逻辑处理中，做验证数据不为空时写了这样一个逻辑。varietyData数组中元素每个字段都不能为空字符串或空数组。当value3的值为0时，数据应该是通过的，结果验证逻辑一直不通过，打断点调试后才发现问题出在这里。解决办法之后将 改成 就没问题了。知识梳理对于 == 和 === 的比较规则，想趁着这次机会重新梳理下。严格相等运算符(===)也叫全等运算符，其会检查两个操作数是否相等，并且
2023-08-25 09:14:02
65
原创 Linux发行版的数量(图的遍历)
这种基于深度优先搜索或者广度优先搜索的算法很实用，因为它可以用于解决各种图的问题，比如求图的连通分量数量，求图的最大连通子图，检测图是否存在环等等。具体来说，我们首先遍历每一个节点，如果这个节点没有被访问过，那么我们就从这个节点出发，进行一次深度优先搜索或者广度优先搜索，每访问到一个节点，我们就把这个节点标记为已访问，同时计数器加1，然后再去访问所有与它直接相连并且还没有被访问过的节点。时间复杂度上，我们需要遍历所有的节点和边，因此时间复杂度是O(n^2)，其中n是节点的数量。第一行输入发行版的总数量N，
2023-07-29 15:25:24
295
原创 动态规划思想求最小步数
这个问题是一个典型的动态规划问题，主要解决的是如何从0点到达n点的最小步数。每次移动只能是2步或3步，且可以向左或向右移动。虽然可以向左移动，但从0点开始，向右移动到达任何非负整数点n总是更快的，所以我们的目标是寻找最小步数来到达非负整数n。求从坐标零点到坐标n的最小步数，一次只能沿横坐标轴向左或向右移动2或3。注意：途经的坐标可以为负数。解法优化，n的范围是1到10的9次方，n较大时，使用递归可能栈溢出。从坐标零点移动到4，最小需要两步，即向右移2步，再向右移2步。输出从坐标零点移动到坐标n的移动步数。
2023-07-28 10:28:32
441
原创 机试算法题-全排列
分析：以示例二为例，统计各字符出现的次数，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重新排列的所有不相同的排列数（包含自己本身）。
2023-07-27 20:43:16
497
原创 深入JavaScript闭包(三)_闭包原理及经典面试题
闭包在JavaScript一直是一个比较难以理解的概念，在这篇文章中将通过执行上下文和作用域来理解闭包。如果对上下文和作用域不太了解，建议先看前两章。闭包(closure)是一个函数以及其捆绑的周边环境状态(词法环境)的引用组合。换而言之，闭包可以让开发者从内部函数访问外部函数的作用域。在JavaScript中，闭包会随着函数的创建而被同时创建。闭包指的是那些引用了另一个函数作用域中变量的函数，通常在嵌套函数中实现。总结一下：闭包本质是。
2023-07-26 08:55:39
64
原创 JS将数组转化为对象结构
解法二：运用JavaScript中的map思想求解。map方法：对数组每一项都运行传入的函数，返回由。解法一：运用递归思想求解。
2023-07-25 16:42:38
503
原创 用多种方式实现斐波那契数列
斐波那契数列（Fibonacci sequence），又称黄金分割数列，因意大利数学家莱昂纳多·斐波那契（Leonardo Fibonacci）1202年以兔子繁殖为例子而引入，故又称为“兔子数列”，指的是这样一个数列：f1= 1、f2= 1、fn= fn-1+ fn-2(n>2)
2023-07-24 20:43:41
70
原创 前端模板引擎之mustache
将数据按照特定的方式转化为视图(html)的一种技术。举个例子，将图中的data数据转化为 视图(html)结构数据。搬一下网上的概念：模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的文档。替换。将预先定义的标签字符替换为指定的业务数据，或者根据某种定义好的流程进行输出。Mustache是一款非常经典的前端模板引擎，是一套轻逻辑的模板语法。它可以来处理HTML，配置文件，源代码等文件。
2023-07-23 12:42:15
652
原创 VUE2数据响应式原理
在vue2的官方文档上可以看到它对响应式原理的解释是：数据劫持：通过Object.defineProperty方法实现vue中data选项数据的监听订阅-发布者模式：通过Watcher和Dep采用观察者模式实现依赖收集和派发更新的过程Object.defineProperty() 静态方法会直接在一个对象上定义一个新属性，或修改其现有属性，并返回此对象。vue如何实现数据的响应式的？通过Object.defineProperty方法实现对数据的响应式。对于对象，它会循环遍历对象的所有属性。
2023-07-22 10:06:52
636
原创 深入JavaScript闭包(二)：作用域，作用域链
作用域：作用域本质上类似于一个地盘，范围，主要起隔绝变量的作用。执行上下文：执行上下文又称执行环境，其实就是代码执行前的准备工作，最终会生成一个活动对象，用来存储变量和函数。查找作用域中的变量都是从作用域对应的上下文的活动对象中查找的。
2023-07-21 11:10:13
146
原创 深入JavaScript闭包(一)：执行上下文，执行上下文栈
闭包是学习JavaScript绕不过的话题，也是JavaScript的难点之一。在我之前学习闭包时过程中，只是简单的了解下它的概念，看了一些使用闭包的代码，便自信的以为学会了闭包，过一段时间，发现自己对于闭包已经忘的差不多了，于是又重复之前的操作，看概念，看代码，然后又会了…终于，连我自己都看不下去了。痛定思痛，下定决心深入学习下闭包，从其源头出发，要彻底弄清楚闭包是个什么玩意，毕其功于一役！要弄清楚闭包，首先得从执行上下文开始先看一段代码，根据代码来分析更清晰些。a未定义，这很正常。
2023-07-21 08:41:44
181
原创 JS原型及原型链详解
当我最初学习JS接触到原型的时候，我感觉它就像是一个凭空出现，难以理解的复杂概念。完全不像数组Array，对象Object 等等这个我们可以联想到生活中的具体示例的东西。比如说数组我们可以类比为一个购物车，里面的数据就是我们所购买的东西，鞋子，面包之类的。对象的话可以把一个人看成一个对象，姓名，性别，年龄等可以作为数据，对应的数据就作为属性的值。而原型感觉与之前我们所学的东西，完全割裂开了，不能找到与之对应或者类似的东西，很抽象，难以理解，只能硬着头皮去记录它的作用，当下可能记住了，可时间一长又忘记了。
2023-07-20 11:06:25
198
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人