- 博客(132)
- 收藏
- 关注
RSS订阅原创 css实现一个斑马条纹动画，实现一个理发店门口的小转转，进度条动画同理！
css实现一个斑马条纹动画，实现一个理发店门口的小转转，进度条动画同理！repeat-linear-gradient()和linear-gradient()的实现方式
2023-12-30 18:32:30
1672
原创 前端SQL注入和接口加密
前端对传输值或者传输路径进行加密，后端对返回数据进行加密，避免数据传输过程中被抓包泄露数据信息。1、js正则校验: 验证特殊符号（但存在被禁用js的可能，后端也要进行验证）4、使用SQL语句检测工具检测SQL的语句漏洞。2、屏蔽敏感词，通过代码屏蔽掉敏感词。
2023-12-03 22:28:24
534
原创 JS判断类型的方法和对应的局限性(typeof、instanceof和Object.prototype.toString.call()的用法）
JS判断类型的方法和对应的局限性，typeof、 instanceof 和 Object.prototype.toString.call()
2023-07-28 20:47:39
753
原创 vue的双向绑定原理
一、原理vue2采用数据劫持结合发布者-订阅者模式的方法，通过Object.defineProperty()来劫持各个属性的setter和getter，当数据发生变化时通知订阅者，触发相应的回调，渲染更新视图二、具体步骤1、对于需要observer的数据，通过递归遍历，给它的所有属性（包括子属性）添加上setter和getter，以便数据发生变更时触发setter。
2022-11-24 11:28:13
916
原创 vue2为什么只能有一个根节点，而vue3可以是多根节点
因为vdom是一个单根树形结构描述当前视图结构，patch方法在遍历的时候从根节点开始遍历，它要求只有一个根节点。组件也是会转换成vdom，所以也必须满足单根节点要求。
2022-11-19 11:33:56
2810
原创 vue实例挂载过程中发生了什么？
挂载过程指的是app.mount()过程，这个是个初始化过程，挂载过程完成了最重要的两件事：初始化和建立更新机制。
2022-11-18 22:32:05
795
原创 vue中keep-alive组件
keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件，而不是销毁，在组件切换的时候将状态保留在内存中，防止重复渲染DOM。
2022-11-18 10:30:29
156
原创 vue中key的作用
不建议使用数组索引作为key的原因：1、在进行向数组中间插入或删除数据时，数组长度发生了变化，每个值对应的索引也会发生变化，在进行diff比对时会发现新老节点对应key的位置内容发生了变更，会从新进行渲染，造成不必要的性能损失，
2022-11-16 23:20:08
223
原创 vue的diff算法
vue中diff算法称为patching算法，由Snabbdom修改而来，虚拟dom想要转换成真实dom则需要通过patch方法转换；
2022-11-16 21:46:35
409
原创 vue的生命周期
vue实例在被创建之后都会经过一系列初始化步骤，如需要数据观测、模板编译、挂载实例到dom上，以及数据数据变化时更新dom，在这个过程中会运行生命周期钩子函数，以便用户在特定阶段进行响应的操作。
2022-11-16 00:08:01
168
原创 vue中组件之间的通信方式
on在vue3中被移除，所以不建议使用eventbus。$listeners也被移除了。$children也被移除了。
2022-11-15 23:26:17
135
原创 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
686
原创 typeof和instanceof区别
typeof返回小写字母字符串表示数据属于什么类型，instanceof返回布尔值。Undefined、Null、Boolean、Number和String。typeof检测数据类型，instanceof检测对象之间的关联性。typeof是1个，instanceof是2个。typeof是简单数据类型、函数或者对象，
2022-11-04 20:31:58
467
原创 document.write()和innerHTML的区别
document.write()除非在文档解析完之后再执行会覆盖之前的内容，否则不会覆盖，innerHTML会直接覆盖原来内容。document.write()插入在执行该脚本元素的script标签位置，innerHTML插入在指定元素位置。document.write()是对象中的方法，innerHTML是element对象中的属性。document.write()可以多次调用，而innerHTML采用 += 拼接方式。4、是否会覆盖之前内容。
2022-11-04 20:26:30
1008
原创 JS的加法规则
直接拼接字符串和数值相加会先从左往右运算，然后把对应数值先转换为字符串，10.10会被转换成’10.1’。加法运算哪怕只有一个字符串，也会把整个运算结果变成字符串依旧会把非字符串强制转换为字符串然后拼接数组转换为字符串会是把里面的值转换成字符串，[]会被转换成""，但是如果是保留位置的数组，则会去除最后一个逗号转换成字符串函数会被转换成字符串，然后拼接会先把对象转换成字符串 ‘[object Object]’ 再拼接。
2022-11-04 14:27:59
1168
原创 使用setTimeout实现setInterval功能
因为setInterval是间隔指定时间去执行指定回调，如果把第二个setTimeout改成inner()的话，在执行interValFn的时候根据js事件循环机制会立即执行inner函数，而不是将inner先放入任务队列里等待指定时间后再放入执行栈执行。为什么不把第二个setTimeout直接使用inner()呢?
2022-11-02 21:04:25
226
原创 js实现图片懒加载
该函数没有参数，用于获取元素位置，返回一个对象，具有六个属性分别是：ele.getBoundingClientRect().top – 返回元素上边到视窗上边的距离ele.getBoundingClientRect().left – 返回元素左边到视窗左边的距离ele.getBoundingClientRect().bottom – 返回元素下边到视窗上边的距离ele.getBoundingClientRect().right – 返回元素右边到视窗左边的距离。
2022-11-01 23:59:38
262
原创 clientX、pageX、screenX以及offsetX区别
clientX：鼠标相对于浏览器窗口可视区域x方向坐标clientY：鼠标相对于浏览器窗口可视区域y方向坐标。
2022-10-29 10:43:22
1722
转载 移动端开发注意事项
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
206
原创 元素可视区操作之client系列offset系列以及scroll系列
ele.clientTop: 返回元素上边框大小ele.clientLeft: 返回元素左边框大小ele.clientWidth: 返回元素宽度，包括padding，不包括边框，返回值不带单位ele.clientHeight: 返回元素高度，包括padding，不包括边框，返回值不带单位。
2022-10-27 23:57:27
344
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人