Js实现图片懒加载
前言：图片懒加载是一种对网页性能优化的方式，当访问一个页面的时候，优先加载可视区域的图片，而不是一次性把页面中的图片都请求加载出来。通过这种方式可以使页面加载速度变快，减轻服务器的压力，节省流量。
简单来说：就是不一次性加载那么多图片，而是慢慢来，按需加载。
比较建议的方法是通过 IntesectionObserve 这个API来实现
实现原理
首先获取当前元素距离顶部的距离
再获取屏幕的高度
主要方法：
121，DOMobj.getBoundingClientRect().top //获取该元素到屏幕顶部的距离2，window.innerHeight //屏幕的高度
简易版懒加载123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051<body> <div class="box"> <img data-src="image1.jpg" class ...
Vue2/Vue3实现路由过渡动画效果
前言：在后台开发的过程中，页面经常有路由的转换，但是由于转换过程太过于死板，所以想给它加入一点点动画效果，或者是淡入/淡出效果，提高体验
具体方法在Vue2中，可以在路由router-view上加上transition和效果即可
是基本的动态组件，所以我们可以用组件给它添加一些过渡效果
123<transition name="slide-fade"> <router-view></router-view></transition>
Vue3
12345<router-view v-slot="{ Component }"> <transition name="slide-fade"> <component :is="Component" /> </transition></router-view>
或者：
1234567<RouterView v-sl ...
XSS和CSRF的概念
吐槽：经典八股文，面试的时候被问到了，实际上其实也确实挺有用的这些东西，哭了
XSS全称Cross Site Scripting，名为跨站脚本攻击，黑客将恶意脚本代码植入到页面中从而实现盗取用户信息等操作。
恶意攻击者往 Web 页面里嵌入恶意的客户端脚本，当用户浏览此网页时，脚本就会在用户的浏览器上执行，进而达到攻击者的目的。比如获取用户的 Cookie、导航到恶意网站、携带木马等。
注入方法任何可以输入的地方都有可能引起XSS攻击，包括URL
在HTML内嵌的文本中，恶意内容以script标签形成注入
在内联的JavaScript中，拼接的数据突破了原本的限制（字符串，变量，方法名）等
在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签
在标签的 href、src 等属性中，包含 javascript: (伪协议)等可执行代码。
在 onload、onerror、onclick 等事件中，注入不受控制代码。
XSS的分类可分为存储型、反射性和DOM型三种
预防XSS
前端和后端一起做数据过滤，前端可以使用axios拦截器，在发送请求前先过滤一遍数据， ...
Vue内置组件transition的灵活运用
前言：在做语音APP的H5开发的时候，遇到很多动效还原的场景，而且对用户体验感有较强的要求。某些场景经常会有用到transition这个属性。
transition
Props：
name - string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
appear - boolean，是否在初始渲染时使用过渡。默认为 false。
css - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
type - string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
mode - string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 &qu ...
JavaScript数组对象常用操作
前言：真的很多时候觉得哈希Map好用爆了😂😂，不过数组对象相对来说是更灵活一点吧，两个东西灵活时候在开发的时候效率和问题解决，包括很多算法题的解决都能杠杠上去
获取数组对象中，对象中的某个值（key）为指定值比如现在有个数组对象a
123456789var a = [ { age: 22, name: "AA" }, { age: 23, name: "BB" }, { age: 24, name: "CC" }, { age: 25, name: "DD" }, { age: 100, name: "EE" }, { age: 100, name: 'FF' }, { age: 200, name: 'RR' }]
我想获取，age为100的对象
通过fil ...
JavaScript实现特定时间触发函数
前言：有点类似秒杀抢购那种东西吧，这个，不过这是前端的处理，到时间开放某个页面、某个按钮之类的
做开发的时候，有些业务需要多次重复触发一个函数，并以时间为判断标准，或是单次触发函数，在特定的时间点的时候。
多次触发就用setInverval来实现
单次触发可以通过setTimeout，或者直接调用
实现方法123456789101112131415161718192021(function () { // 一秒内多次触发 const timeMask = setInverval(() => { let value = "2023-02-05 23:59:59"; // 要触发函数的特定时间 let data = new Date(); let now = data.valueOf(); // 当前时间 let time = new Date(value).valueOf(); // 特定时间转化 // console.log("now:" , now) // cons ...
JavaScript实现保留两位小数
前言：这玩意其实开发的时候经常会遇到，我也不知道为啥，趁机会记一下吧- -
四舍五入
注意：保留两位小数，将数值类型的数据改变成了字符串类型
123var num = 2.447562341;num = num.toFixed(2); // 输出结果为 2.45console.log(typeof num) // string
不四舍五入
第一种，先把小数变整数，再除，向下取整
注意，不改变数据类型
1Math.floor(17.79845550 * 100) / 100 // 输出结果为 17.79
第二种，当作字符串，使用正则匹配：
注意，先将数据转换为字符串，最后再转为数值类型
1Number(17.79845550.toString().match(/^\d+(?:\.\d{0,2})?/)) // 输出结果为 17.79,不能用于整数如 10 必须写为10.0000
注意：如果是负数，要先转换为正数再计算，最后再转回负数
Js取float型小数点后两位数的方法
将浮点数四舍五入，取小数点后2位
1234567891011func ...
JavaScript对象类型判断方法，以及通过value取key、key取value
前言：经常用，必记！
前端开发的时候经常需要判断某个值的类型是不是对象，不能通过typeof来判断，要用别的方法。
JS对象的操作类似于Java中的Map和HashMap，很多时候我们需要找到对象在某个特定key对应的value，或者说是找到某个value对应的key。
当然，一般一个key只能对应一个value，但是一个value可以对应多个key。这里重点讲一下通过value来找到特定key的方法
对象类型判断Object.prototype.toString.call()方法1234let obj = {}var res = Object.prototype.toString.call(obj); console.log(res); //[object Object]
这个方法还能判断其他类型，如下
123456789101112131415161718192021222324var a = NaN;var b= '222';var c = null;var d = false;var e = undefined;var f ...
单链表反转
前言：人生第一道算法题，没啥意思，就想记录一下- -
实现思路先声明一个新的节点pre = null，然后声明一个新的节点cur = head，把头节点赋值给它，然后声明一个中间节点temp = cur.next，也就是将下一个节点赋值给中间节点temp
然后，赋值完之后再对cur.next进行操作，领cur.next = pre，也就是将当前节点的下一个节点，就是当前传过来的节点，比如一开始不是传入头节点吗，那么这时就让头节点的下一个节点指向pre，也就是null，然后再对pre进行操作，领pre = cur，主要是为下一次的迭代做好铺路，再让cur = temp，就是将开头中间节点保存的那个节点赋值给cur。以上的这些操作一直循环执行，直到cur指向null
最后，这些操作完之后，此时pre就是最后的节点了，返回pre
案例代码123456789101112131415161718192021var reverseList = function(head) { if(head == null || head.next == null){ ...
Element Table里的input设置只能输入英文和数字
前言：在做开发的时候经常会有这样的需求，让输入框中只能输入某种类型的东西，还是记一下吧
实现12!-- 只能允许输入英文和数字 --><el-input v-model="form.name" oninput="value=value.replace(/[^\w_]/g,'')" autocomplete="off" />
主要是在input里面，通过onkeyput或oninput加入字段，对输入的内容进行校验。
1oninput="value=value.replace(/\D/g,'')"
扩展123456789101112131415161718192021222324252627282930313233343536373839404142输入大小写字母、数字、下划线：oninput="value=value.replace(/[^\w_]/g,'');" 输入小写字母、数字、下划线：oninp ...