自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(129)
  • 收藏
  • 关注

原创 vue3中ref和reactive联系与区别以及如何选择

vue3中ref和reactive联系与区别以及如何选择

2024-01-10 11:11:02 886

原创 css实现一个斑马条纹动画,实现一个理发店门口的小转转,进度条动画同理!

css实现一个斑马条纹动画,实现一个理发店门口的小转转,进度条动画同理!repeat-linear-gradient()和linear-gradient()的实现方式

2023-12-30 18:32:30 1171

原创 寻找一个数字数组中只出现一次的数字

寻找一个数字数组中只出现一次的数字

2023-12-22 20:28:42 368

原创 vue打包完成后出现空白页原因及解决

vue打包完成后出现空白页原因及解决

2023-12-06 00:22:03 1302

原创 vue解决SEO

vue解决SEO

2023-12-05 23:59:38 467

原创 前端实现token无感刷新的原因和步骤

前端实现token无感刷新的原因和步骤

2023-12-04 15:59:34 656

原创 前端SQL注入和接口加密

前端对传输值或者传输路径进行加密,后端对返回数据进行加密,避免数据传输过程中被抓包泄露数据信息。1、js正则校验: 验证特殊符号(但存在被禁用js的可能,后端也要进行验证)4、使用SQL语句检测工具检测SQL的语句漏洞。2、屏蔽敏感词,通过代码屏蔽掉敏感词。

2023-12-03 22:28:24 413

原创 XSS(跨站脚本攻击)攻击和CSRF(跨站请求伪造)攻击解决方法

XSS(跨站脚本攻击)攻击和CSRF(跨站请求伪造)攻击解决方法

2023-12-03 15:03:50 386

原创 JS判断类型的方法和对应的局限性(typeof、instanceof和Object.prototype.toString.call()的用法)

JS判断类型的方法和对应的局限性,typeof、 instanceof 和 Object.prototype.toString.call()

2023-07-28 20:47:39 688

原创 导致内存泄漏的因素及解决方式

导致内存泄漏的因素及解决方式

2023-07-28 11:56:07 472

原创 css实现文字渐变

css实现文字渐变

2023-07-24 16:28:05 202

原创 前端调整滚动条的外观样式

前端页面调整滚动条样式

2023-07-13 16:53:49 473

原创 vue的双向绑定原理

一、原理vue2采用数据劫持结合发布者-订阅者模式的方法,通过Object.defineProperty()来劫持各个属性的setter和getter,当数据发生变化时通知订阅者,触发相应的回调,渲染更新视图二、具体步骤1、对于需要observer的数据,通过递归遍历,给它的所有属性(包括子属性)添加上setter和getter,以便数据发生变更时触发setter。

2022-11-24 11:28:13 780 1

原创 vue2为什么只能有一个根节点,而vue3可以是多根节点

因为vdom是一个单根树形结构描述当前视图结构,patch方法在遍历的时候从根节点开始遍历,它要求只有一个根节点。组件也是会转换成vdom,所以也必须满足单根节点要求。

2022-11-19 11:33:56 2284

原创 vue实例挂载过程中发生了什么?

挂载过程指的是app.mount()过程,这个是个初始化过程,挂载过程完成了最重要的两件事:初始化和建立更新机制。

2022-11-18 22:32:05 645

原创 vue中keep-alive组件

keep-alive是vue内置组件,keep-alive包裹动态组件component时,会缓存不活动的组件,而不是销毁,在组件切换的时候将状态保留在内存中,防止重复渲染DOM。

2022-11-18 10:30:29 107

原创 vue中key的作用

不建议使用数组索引作为key的原因:1、在进行向数组中间插入或删除数据时,数组长度发生了变化,每个值对应的索引也会发生变化,在进行diff比对时会发现新老节点对应key的位置内容发生了变更,会从新进行渲染,造成不必要的性能损失,

2022-11-16 23:20:08 153

原创 vue的diff算法

vue中diff算法称为patching算法,由Snabbdom修改而来,虚拟dom想要转换成真实dom则需要通过patch方法转换;

2022-11-16 21:46:35 332

原创 vue的生命周期

vue实例在被创建之后都会经过一系列初始化步骤,如需要数据观测、模板编译、挂载实例到dom上,以及数据数据变化时更新dom,在这个过程中会运行生命周期钩子函数,以便用户在特定阶段进行响应的操作。

2022-11-16 00:08:01 111

原创 vue中组件之间的通信方式

on在vue3中被移除,所以不建议使用eventbus。$listeners也被移除了。$children也被移除了。

2022-11-15 23:26:17 69

原创 vue中v-if和v-for的优先级问题

在vue2中会出现不停的循环,然后每个循环结果做v-if,显然会先渲染出本不想渲染出来的内容,对于这种可以定义一个计算属性,使用filter返回符合条件的列表activeUsers;2、在vue2中v-for优先级高于v-if,而在vue3中v-for优先级低于v-if,vue2和vue3恰好相反,1、实践中最好不要把v-if和v-for放一起。

2022-11-15 23:18:51 553

原创 js通过冒泡排序对数组进行排序

js通过冒泡排序对数组进行排序

2022-11-05 20:53:40 459

原创 == 和 ===

== 和 ===

2022-11-04 23:52:21 46

原创 随机打乱数组内部元素的位置

随机打乱数组内部元素的位置

2022-11-04 23:27:34 112

原创 二分法寻找数组元素

二分法在有序排列的数组中找到指定元素并返回对应索引

2022-11-04 23:05:29 80

原创 交换变量的7种方法

交换变量的7种方法

2022-11-04 20:53:35 97

原创 typeof和instanceof区别

typeof返回小写字母字符串表示数据属于什么类型,instanceof返回布尔值。Undefined、Null、Boolean、Number和String。typeof检测数据类型,instanceof检测对象之间的关联性。typeof是1个,instanceof是2个。typeof是简单数据类型、函数或者对象,

2022-11-04 20:31:58 218

原创 document.write()和innerHTML的区别

document.write()除非在文档解析完之后再执行会覆盖之前的内容,否则不会覆盖,innerHTML会直接覆盖原来内容。document.write()插入在执行该脚本元素的script标签位置,innerHTML插入在指定元素位置。document.write()是对象中的方法,innerHTML是element对象中的属性。document.write()可以多次调用,而innerHTML采用 += 拼接方式。4、是否会覆盖之前内容。

2022-11-04 20:26:30 717

原创 JS的加法规则

直接拼接字符串和数值相加会先从左往右运算,然后把对应数值先转换为字符串,10.10会被转换成’10.1’。加法运算哪怕只有一个字符串,也会把整个运算结果变成字符串依旧会把非字符串强制转换为字符串然后拼接数组转换为字符串会是把里面的值转换成字符串,[]会被转换成"",但是如果是保留位置的数组,则会去除最后一个逗号转换成字符串函数会被转换成字符串,然后拼接会先把对象转换成字符串 ‘[object Object]’ 再拼接。

2022-11-04 14:27:59 931

原创 JS实现九九乘法表

JS实现九九乘法表。

2022-11-04 10:53:27 84

原创 函数柯里化

显然,柯里化之后函数return函数,只需要一次传入一个参数,最终会返回最后的值,但是要是有n个参数,要是手动return n个函数显然不靠谱,所以我们可以换一个方式:统计传进来的参数个数,然后使用递归的方式处理。函数柯里化是把接受多个参数的函数转化为接收单个参数的函数。欢迎各位指正,并给出更好的方法。

2022-11-03 19:08:22 60

原创 使用setTimeout实现setInterval功能

因为setInterval是间隔指定时间去执行指定回调,如果把第二个setTimeout改成inner()的话,在执行interValFn的时候根据js事件循环机制会立即执行inner函数,而不是将inner先放入任务队列里等待指定时间后再放入执行栈执行。为什么不把第二个setTimeout直接使用inner()呢?

2022-11-02 21:04:25 154

原创 js实现图片懒加载

该函数没有参数,用于获取元素位置,返回一个对象,具有六个属性分别是:ele.getBoundingClientRect().top – 返回元素上边到视窗上边的距离ele.getBoundingClientRect().left – 返回元素左边到视窗左边的距离ele.getBoundingClientRect().bottom – 返回元素下边到视窗上边的距离ele.getBoundingClientRect().right – 返回元素右边到视窗左边的距离。

2022-11-01 23:59:38 214

原创 clientX、pageX、screenX以及offsetX区别

clientX:鼠标相对于浏览器窗口可视区域x方向坐标clientY:鼠标相对于浏览器窗口可视区域y方向坐标。

2022-10-29 10:43:22 1392

原创 触摸事件的对象

3、touchend。

2022-10-28 22:53:54 99

转载 移动端开发注意事项

navigator.standalone属性,该属性值为false时,是从浏览器直接访问站点;参考来源https://www.cnblogs.com/benpao/p/3383272.html。3、iphone设备中safiar私有meta标签:指定safiar顶部状态栏的样式。2、iphone设备中的safair私有meta标签:允许全屏模式浏览。1、强制文档宽度和设备宽度比例为1:1禁止用户点击放大。7、检测ios用户通过主屏启动你的webapp。4、告知设备忽略将页面数字识别为电话号码。

2022-10-28 17:50:09 138

原创 元素可视区操作之client系列offset系列以及scroll系列

ele.clientTop: 返回元素上边框大小ele.clientLeft: 返回元素左边框大小ele.clientWidth: 返回元素宽度,包括padding,不包括边框,返回值不带单位ele.clientHeight: 返回元素高度,包括padding,不包括边框,返回值不带单位。

2022-10-27 23:57:27 301

原创 navigator实现移动端和PC端自动跳转

通过userAgent属性,返回客户机发送给服务器的user-agent头部的值。

2022-10-27 23:31:12 689

原创 this指向问题

1、全局作用域或者普通函数的this指向window,定时器的this也是指向window。2、方法调用时,谁调用this就指向谁。3、构造函数 中的this指向实例对象。

2022-10-27 23:24:02 117

原创 常用的鼠标事件和键盘事件

1、禁止鼠标右键菜单2、禁止鼠标选中文字3、e.clientX和e.clientY : 返回鼠标相对于浏览器的x坐标和y坐标,和页面是否滚动无关,仅与可视窗口大小有关4、e.pageX和e.pageY : 返回鼠标相对于文档页面的x坐标和y坐标,和页面实际宽高度即和是否滚动有关5、e.screenX和e.screenY : 返回鼠标相对于电脑屏幕的x坐标和y坐标。

2022-10-27 09:42:57 289

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除