![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
qq_40178497
这个作者很懒,什么都没留下…
展开
-
vue3 createApp加入store或者router
vue3 createApp加入store或者router原创 2022-06-08 11:01:09 · 1765 阅读 · 1 评论 -
vite创建vue项目
vite创建vue项目、windows更新node选择模板选择vue语言安装命令行提示的操作:运行:当前node版本为v16.15.1,若vite安装提示需要升级node版本,windows系统升级直接下载压缩包解压缩到node安装目录,node下载官网选择对应压缩包下载,查看node安装目录:在命令行 (需要在cmd命令行界面操作,VSCode终端操作无效)将下载的安装包解压缩到node安装目录,查看版本已经变过来了......原创 2022-06-08 10:32:20 · 1289 阅读 · 0 评论 -
菜单内嵌的iframe控制外层页面跳转
需求: 菜单框架和菜单内容是不同组件开发,通过iframe联动的,现在需要由一个菜单跳转到另一个菜单,实现左侧菜单和上方Tab标签都跟随变化菜单内容若是和菜单框架使用同一组件,那么自然有相应的文档,菜单跳转非常简单,但内嵌不同开发组件或者页面要实现跳转,提供菜单框架的组件不能使用解决方案: 在内嵌的iframe中去控制外层的页面网址,实现菜单跳转在内嵌iframe的js中,通过window.open("url","_top")或者通过top.location.href=url来实现跳转,url为需要原创 2022-04-16 09:05:57 · 2521 阅读 · 0 评论 -
select级联选择器参考 原生JS实现和jQuery实现
原生JS实现:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t.原创 2022-03-27 09:09:13 · 1927 阅读 · 0 评论 -
前端CDN引入
CDN的全称是Content Delivery Network,即内容分发网络,通过在现有网络中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘"(边缘服务器)目的是使用户可以就近获取所需的内容,解决网络拥挤,加快用户访问网站。从技术层面上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题所造成的用户访问网站响应速度慢的现象。流程:用户浏览器提供要访问网站的域名,域名解析的请求被发往网站的DNS域名解析服务器由于网站的DNS域名解析服务器对此域名的解析设置了CNAME,请求被指原创 2022-03-07 11:00:08 · 1872 阅读 · 0 评论 -
前端性能优化
1、图片优化1、减少像素点2、减少每个像素点能够显示的颜色2、图片加载优化不用图片,对于修饰类的图片,完全可以用CSS代替对于移动端,图片用CDN加载,计算出适应屏幕的宽度,请求相应裁剪好的图片小图使用base64格式将多个图标文件整合到一张图中选择正确的文件格式能显示WebP格式的浏览器尽量使用WebP格式小图使用PNG,对于图标,可以用SVG代替照片使用JPEG3、DNS预解析DNS解析也需要时间,可以通过预解析的方式来预先获得域名所对应的IP&..原创 2022-03-07 10:57:14 · 449 阅读 · 0 评论 -
前端常见安全防范
1、XSS(跨站脚本攻击):攻击者想尽一切办法将可以执行的代码注入到网页中总体上分为两类:持久型和非持久型,持久型写入数据库,所有打开页面的用户都会被攻击到,非持久型一般通过URL参数的方式加入攻击代码防范:1、转义字符function escape(str){ str = str.replace(/&/g, '&') str = str.replace(/</g, '<') str = str.replace(/>/g, '原创 2022-03-07 10:51:31 · 3707 阅读 · 0 评论 -
浏览器阻塞渲染的情况
渲染的前提是生成渲染树,所有HTML和CSS肯定会阻塞渲染,想要渲染快,要一开始降低需要渲染的文件大小,扁平层级,优化选择器当浏览器解析到script标签时,会暂停构建DOM,完成后才会从暂停的地方重新开始,想要首屏渲染快,将script标签放在body标签底部script标签不是一定要在底部,可以给script标签添加defer或者async属性defer 规定是否对脚本执行进行延迟,直到页面加载为止。defer属性会开启新的线程下载脚本文件并延迟执行引入 的JavaScript脚本;defer.原创 2022-03-07 10:37:04 · 445 阅读 · 0 评论 -
CSS图片和文字、div排版对齐
给图片的样式中加入vertical-align:middle<img class="userIcon"><div class="usernameDiv">{{username}}</div>.userIcon{ width: 36px; height: 36px; margin-right: 8px; border-radius: 18px; vertical-align:middle } .usernameDiv原创 2020-08-21 10:58:50 · 1953 阅读 · 0 评论 -
CSS 删除组件已有的背景色
找到要删除背景色的控件的类名或id,重写background-color,重写为'background-color:transparent; '原创 2020-08-21 10:44:02 · 460 阅读 · 0 评论 -
CSS div居中
所有cssbody{ background-color: honeydew;}1、absolute + 负margin <div class="father1"> <div class="method1"> </div> </div>.father1{ width: 500px; height: 500px; background-color: brown; position: relative; /* 父元素相对定原创 2021-08-25 17:15:02 · 64 阅读 · 0 评论 -
CSS实现一个div在中间加一条竖线的样式
<style> .containerDiv{ width:100%; overflow:hidden } .leftDiv,.rightDiv{ float:left; display:inline-block } .leftDiv{ width:49%; border-right:1px solid #f00; border-top: 1px solid #c4c4c4; border-bottom: 1px solid #c4c4c4; }原创 2020-10-18 15:44:26 · 4935 阅读 · 0 评论 -
CSS a标签样式
a标签悬停时鼠标样式、下划线、颜色等a { color: blue; cursor: pointer; /* 鼠标样式*/}a:link { color: #06F; text-decoration: none; }/* 未访问的链接 */a:visited { color: #999; text-decoration: line-through; } /* 已访问的链接 */a:hover { color: #F00; text-decoration: underlin原创 2020-10-17 09:38:13 · 6711 阅读 · 0 评论 -
CSS a标签去掉下划线、加宽高等属性
a标签有属性text-decoration,设置为:a{ text-decoration:none}即可去掉下划线a标签做导航时需要宽高,可以设置display: block,然后按div类似的设置宽高等属性原创 2020-08-24 21:34:09 · 428 阅读 · 0 评论 -
CSS div中内容高度超过div高度显示滚动条
给父级div的css属性一个高度,再加上overflow: auto;例如:.treeDiv{ margin: 20px 10px; background-color: #081832; color: white; height: 555px; overflow: auto; /*opacity:0.2;*/ }opacity:0.2;设置整个div的透明度...原创 2020-08-18 15:25:13 · 1350 阅读 · 0 评论 -
CSS 三角形
利用div的border绘制三角形先给出html<body> <div id="sanjiao1"></div> <hr> <div id="sanjiao2"></div> <hr> <div id="sanjiao3"></div> <hr> <div id="sanjiao4"></div>原创 2021-08-23 12:32:29 · 66 阅读 · 0 评论 -
JS 位运算
左移运算符 << 迅速得出2的次方,使用右移运算符 >> 迅速除以2的次方 2<<2 // 2*2^2=8 8>>1 // 8/(2^1)=4使用 ^(按位异或)(不同为1,相同为0) 切换变量 0 和 1 // 三目运算符 toggle = toggle ? 0 : 1; // 异或 toggle ^= 1;使用&(按位与)判断奇偶性(按位与只有当都为1时才为1) // 偶数 & 1 = 0 奇数 &am.原创 2021-08-22 13:00:24 · 79 阅读 · 0 评论 -
JS深浅拷贝
浅拷贝Object.assign 只会拷贝所有的属性值到新的对象中,如果属性值是对象的话,拷贝的是地址,所以并不是深拷贝 let a = { age: 1 } let b = Object.assign({}, a) a.age = 2 console.log(b.age) // 1let a = { age: 1}let b = { ...a }a.age = 2console.log(b.age) // 1深拷贝1、JSON转换let..原创 2022-03-03 16:21:27 · 46 阅读 · 0 评论 -
JS四则运算中的类型转换
运算中其中一方为字符串,那么就会把另一方也转换为字符串如果一方不是字符串或者数字,那么就会把它转换为数字或者字符串// 实例console.log(+ '1'); // 1console.log(- '1'); // -1console.log(+ 'b'); // NaNconsole.log(- 'b'); // NaNconsole.log(1 + + '1'); // 2console.log('1' + + '1'); // 11console.log('1' -.原创 2021-08-22 12:57:06 · 123 阅读 · 0 评论 -
JS == 和 ===
== 如果对比双方的类型不一样会进行类型转换=== 直接比较两者类型和值是否相同原创 2022-03-03 16:17:01 · 44 阅读 · 0 评论 -
JS类型转换
JS中,类型转换只有三种情况,即转换为布尔值、数字、字符串原始值转换目标结果number布尔值除了0、-0、NaN都为truestring布尔值除了空串都为trueundefined、null布尔值false引用类型布尔值truenumber字符串5 => ‘5’Boolean、函数、Symbol字符串true => ‘true’数组字符串[1,2] => ‘1,2’对象字符串‘[obje.原创 2021-08-21 14:02:09 · 69 阅读 · 0 评论 -
JS位运算
左移运算符 << 迅速得出2的次方,使用右移运算符 >> 迅速除以2的次方 2<<2 // 2*2^2=8 8>>1 // 8/(2^1)=4使用 ^(按位异或)(不同为1,相同为0) 切换变量 0 和 1 // 三目运算符 toggle = toggle ? 0 : 1; // 异或 toggle ^= 1;使用&(按位与)判断奇偶性(按位与只有当都为1时才为1) // 偶数 & 1 = 0 ..原创 2022-03-03 16:13:17 · 68 阅读 · 0 评论 -
JS 0.1 + 0.2 不等于 0.3
JS采用IEEE 754 64位双精度浮点型(64位),所有数字以二进制存储每个数字对应的二进制分为三段:符号位、指数位、尾数位,二进制循环数字会被裁剪,出现精度丢失,0.1变为了0.100000000000000002其中符号位在六十四位的第一位,0 表示正数,1 表示负数。符号位之后的 11 位是指数位,决定了数字的范围。指数位之后的 52 位是尾数位,决定了数字的精度0.1 和 0.2 用二进制表示时为 0.0001 1001 1001 1001…(1100循环) 和 0.0011 0011 0原创 2022-03-03 16:15:59 · 90 阅读 · 0 评论 -
JS类型判断:typeof、instanceof、constructor、toString
typeof 对原始类型除null外都能正确判断,对于对象除了函数会显示function外其他都会显示object,因此不能准确判断类型,使用typeof 111 === 'number'js在存储数据的时候,会用低位数(前三位)去存储数据类型,其中:000:对象、010:浮点数、100:字符串、110:布尔、1:整数,但是对于null,undefine来说,null所有的机器码均为000与对象的前三位一致,所以就会出现误判的情况instanceof 内部通过原型链来判断,判断对象可以,但原始类..原创 2022-03-03 16:02:06 · 146 阅读 · 0 评论 -
JS 获取滚动距离、滚动条高度,判断是否滚动到底部
原生JS实现//滚动条滚动的距离:function getScrollTop(){ var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0; if(document.body) bodyScrollTop = document.body.scrollTop; if(document.documentElement) documentScrollTop = document.documentElement.scrollTop;原创 2021-04-06 09:13:57 · 1872 阅读 · 0 评论 -
JS动态添加删除标签类
添加:document.getElementById("id").classList.add("className");删除:document.getElementById("id").classList.remove("className");原创 2020-10-22 15:04:53 · 348 阅读 · 0 评论 -
JS 数组初始化赋值
简单初始化赋值// 1、指定长度、然后初始化let arr = new Array(5)for (let i = 0; i < arr.length; i++){ arr[i] = i}// 2、不指定长度赋值let arr = new Array()// 或者 let arr = []arr.push(1)// 3、直接赋值let arr = [1, 2, 3]Array.fill、Array.from、Array.map// 初始化相同值let arr = Arr.原创 2021-06-23 10:11:30 · 1517 阅读 · 0 评论 -
JS {}、new Object()、Object.create()
{}、new Object()、Object.create():{}和new Object()除本身创建的对象,都继承Object原型链上(Object.prototype)的属性和方法,如:toString()、hasOwnProperty(),当创建对象时,{}等价于new Object()Object.create()创建一个空对象,没有继承Object.prototype原型链上的属性和方法将对象继承到原型链上,可以通过对象实例的__proto__属性访问原型链上的属性...原创 2022-03-04 09:24:17 · 114 阅读 · 0 评论 -
JS var let const
var在全局作用域下声明变量会导致变量挂载在window上,其他两者不会var声明的变量存在变量提升,而let和const不存在let和const声明形成块作用域console.log(a) // undefinedconsole.log(b); // 报错: b is not definedif(true){ var a = 1 let b = 2}同一作用域下let和const不能声明同名变量,而var可以暂时性死区var a = 100;i..原创 2022-03-03 16:23:06 · 52 阅读 · 0 评论 -
JS类型转换 toPrimitive、valueOf、toString
JS中,类型转换只有三种情况,即转换为布尔值、数字、字符串原始值转换目标结果number布尔值除了0、-0、NaN都为truestring布尔值除了空串都为trueundefined、null布尔值false引用类型布尔值truenumber字符串5 => ‘5’Boolean、函数、Symbol字符串true => ‘true’数组字符串[1,2] => ‘1,2’对象字符串‘[obje.原创 2022-03-03 16:05:34 · 852 阅读 · 0 评论 -
浏览器 事件循环 Event Loop
JS是门非阻塞单线程语言(因为多线程处理DOM可能存在一个新加节点一个删除节点的情况)JS在执行过程中会产生执行环境,这些执行环境会被顺序的加入到执行栈中,如果遇到异步代码,会被挂起并加入到Task队列中。一旦执行栈为空,Event Loop就会从Task队列中拿出需要执行的代码并放入执行栈中执行,本质上JS中的异步还是同步行为不同任务源会被分配到不同的Task队列中,任务源可以分为微任务(microtask)和宏任务(macrotask),在ES6规范中,microtask被称为jobs,macro.原创 2022-03-03 16:26:49 · 172 阅读 · 0 评论 -
JS 调用new的过程
调用new的过程中发生四件事function myNew(constr, ...args){ // 1、创建一个空对象obj, // 2、将obj的[[prototype]]属性指向构造函数的原型对象,即:obj.__proto__ = construcor.prototype const obj = Object.create(constr.prototype) // 3、将构造函数内部的this指向新创建的对象obj,并执行 const result = c..原创 2022-03-04 09:22:24 · 105 阅读 · 0 评论 -
普通function继承和class继承
JS中并不存在类,class只是语法糖,本质还是函数类的内部定义的所有方法都是不可枚举的ES6的class类必须使用new命令操作,而ES5的构造函数不用new也可执行ES6的class类不存在变量提升,必须先定义才能实例化,而ES5实例化可以写在构造函数之前ES5的继承实际上是先创建实例对象this,然后将父类的方法添加在this上,而ES6的继承是先将父类实例对象的属性和方法加到this上(即先调用super方法),然后调用子类构造函数修改this常见的继承方式:原型链继承:超类的一.原创 2022-03-03 16:24:53 · 421 阅读 · 0 评论 -
JS call、apply、bind 函数
不传入第一个参,则上下文默认window改变this的指向,让新的对象能执行该函数并能接受参数Function.prototype.myCall = function(context){ if (typeof this !== 'function'){ throw new TypeError('Error') } // context为可选参数,不传默认上下文为window context = context || window // 给c..原创 2022-03-03 16:29:08 · 61 阅读 · 0 评论 -
JS判断类型的四种方法
1、typeof 对原始类型除null外都能正确判断,对于对象除了函数会显示function外其他都会显示object,因此不能准确判断复杂类型,使用typeof 111 === 'number'2、instanceof 内部通过原型链来判断,判断对象可以,但原始类型不行,instanceof不认为原始类型值的变量是对象,原始类型都返回false,使用{} instanceof Objectinstanceof 可以正确的判断对象的类型, 内部机制是通过判断对象的原型链中是不是能找到类型的proto.原创 2021-08-21 13:19:53 · 333 阅读 · 0 评论 -
事件代理与e.target和e.currentTarget
事件代理如果一个节点中的子节点是动态生成的,那么子节点需要注册事件就需要注册在父节点上优点节省内存不需要给子节点注销事件e.target和e.currentTarget<button onclick="btnClickHandle(event)">按钮</button>function btnClickHandle(e){ console.log(e.target);//触发谁(点击谁)目标就是谁 console.log(e.curre.原创 2022-03-04 09:27:05 · 99 阅读 · 0 评论 -
google浏览器设置解决前端接口调试显示跨域问题
google浏览器直接使用,前端调接口调试会显示报错跨域问题,解决如下:复制google浏览器的启动图标(这个也可以在原图标上改),右键->属性->快捷方式,修改“目标(T)” 在后面加上--disable-web-security --user-data-dir=E:\googleChrome\googleDEV,最开始有一个空格,E:\googleChrome\googleDEV这个是自己建的文件夹以后开浏览器就用这个图标开,页面出现下面提示即开启了跨域最新的google浏览原创 2020-07-21 01:26:35 · 1189 阅读 · 0 评论 -
HTML 复制指定内容、调起拨号
复制指定内容:/*** 复制指定内容* @param str 要复制的字符串* @returns {boolean} true/false*/selectcopy(str){ try { var save = function (e){ e.clipboardData.setData('text/plain',str);//下面会说到clipboardData对象 e.preventDefault();//阻止默认行为原创 2021-02-27 15:32:39 · 181 阅读 · 0 评论 -
三种事件模型
1、DOM0事件模型(原始事件模型)通过元素属性来绑定事件<button onclick="click()">click</button>先获取元素,然后以赋值形式绑定事件const btn = document.getElementById('btn')btn.onclick = function(){}解除:btn.onclick = null缺点:一个dom节点只能绑定一个事件,再次绑定会覆盖之前的2、DOM2事件模型新增冒泡和捕获的..原创 2022-03-04 09:25:28 · 270 阅读 · 0 评论 -
JS操作DOM慢和一次性插入几万个DOM
DOM属于渲染引擎的东西,而JS又是JS引擎中的东西,JS操作DOM,涉及到两个线程中的通信,势必会有性能上的损耗,操作DOM还可能带来重绘回流的情况插入几万个DOM如何实现页面不卡顿肯定不能一次性插入几万个DOM,否则势必卡顿,解决重点在于如何分批次部分渲染DOM1、window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行虚拟.原创 2022-03-04 09:51:27 · 415 阅读 · 0 评论