- 博客(99)
- 收藏
- 关注
RSS订阅
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
1282
原创 菜单内嵌的iframe控制外层页面跳转
需求： 菜单框架和菜单内容是不同组件开发，通过iframe联动的，现在需要由一个菜单跳转到另一个菜单，实现左侧菜单和上方Tab标签都跟随变化菜单内容若是和菜单框架使用同一组件，那么自然有相应的文档，菜单跳转非常简单，但内嵌不同开发组件或者页面要实现跳转，提供菜单框架的组件不能使用解决方案： 在内嵌的iframe中去控制外层的页面网址，实现菜单跳转在内嵌iframe的js中，通过window.open("url","_top")或者通过top.location.href=url来实现跳转，url为需要
2022-04-16 09:05:57
2446
原创 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
1886
原创 前端CDN引入
CDN的全称是Content Delivery Network，即内容分发网络，通过在现有网络中增加一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"(边缘服务器)目的是使用户可以就近获取所需的内容，解决网络拥挤，加快用户访问网站。从技术层面上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题所造成的用户访问网站响应速度慢的现象。流程：用户浏览器提供要访问网站的域名，域名解析的请求被发往网站的DNS域名解析服务器由于网站的DNS域名解析服务器对此域名的解析设置了CNAME，请求被指
2022-03-07 11:00:08
1850
原创 前端性能优化
1、图片优化1、减少像素点2、减少每个像素点能够显示的颜色2、图片加载优化不用图片，对于修饰类的图片，完全可以用CSS代替对于移动端，图片用CDN加载，计算出适应屏幕的宽度，请求相应裁剪好的图片小图使用base64格式将多个图标文件整合到一张图中选择正确的文件格式能显示WebP格式的浏览器尽量使用WebP格式小图使用PNG，对于图标，可以用SVG代替照片使用JPEG3、DNS预解析DNS解析也需要时间，可以通过预解析的方式来预先获得域名所对应的IP&..
2022-03-07 10:57:14
448
原创 前端常见安全防范
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
3702
原创 浏览器阻塞渲染的情况
渲染的前提是生成渲染树，所有HTML和CSS肯定会阻塞渲染，想要渲染快，要一开始降低需要渲染的文件大小，扁平层级，优化选择器当浏览器解析到script标签时，会暂停构建DOM，完成后才会从暂停的地方重新开始，想要首屏渲染快，将script标签放在body标签底部script标签不是一定要在底部，可以给script标签添加defer或者async属性defer 规定是否对脚本执行进行延迟，直到页面加载为止。defer属性会开启新的线程下载脚本文件并延迟执行引入 的JavaScript脚本；defer.
2022-03-07 10:37:04
434
原创 JS操作DOM慢和一次性插入几万个DOM
DOM属于渲染引擎的东西，而JS又是JS引擎中的东西，JS操作DOM，涉及到两个线程中的通信，势必会有性能上的损耗，操作DOM还可能带来重绘回流的情况插入几万个DOM如何实现页面不卡顿肯定不能一次性插入几万个DOM，否则势必卡顿，解决重点在于如何分批次部分渲染DOM1、window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行虚拟.
2022-03-04 09:51:27
397
原创 浏览器渲染原理及重绘和重排
HTML： 字节数据 => 字符串 => Token（标记） => Node => DOM （尽量少的添加无意义的标签）CSS：字节数据 => 字符串 => Token => Node =>CSSOM (尽量避免过于具体的CSS选择器)生成DOM树和CSSOM树后将其组合成渲染树（渲染树只包含需要显示的节点和这些节点的样式信息）生成渲染树后根据渲染树进行布局（即回流），然后调用GPU绘制合成图层，显示在屏幕上构建DOM字节数据 -> 字符串 .
2022-03-04 09:45:45
67
原创 浏览器缓存策略
通常浏览器缓存策略分为两种：强缓存和协商缓存，都是通过设置HTTP Header实现强缓存HTTP Header设置Expires和Cache-Control实现，表示缓存期间不需要请求，status code为304Expires: Wed, 22 Oct 2018 08:41:00 GMT是HTTP/1的产物，表示资源会在Wed, 22 Oct 2018 08:41:00 GMT后过期，受本地时间限制Cache-control: max-age=30出现在HTTP/1.1，优先级高
2022-03-04 09:41:42
314
原创 前端浏览器存储
cookiecookie数据大小不能超过4k，会在同源HTTP请求中携带，有路径的概念，在cookie的过期之前有效，在所有同源窗口中共享localStoragelocalStorage数据大小可达到5M，不会随http请求上传，始终有效sessionStoragesessionStorage数据大小可达5M，不会随http请求上传，仅在当前浏览器窗口关闭之前有效...
2022-03-04 09:39:01
248
原创 前端cookie字段及操作方法
Cookie字段：Name： Cookie名称，一旦创建不可修改Value： Cookie值Domain： Cookie在哪个域是有效的，也就是决定向该域发送请求时是否携带此Cookie，对子域名生效Path： Cookie的有效路径，对子路径生效Expires/Max-age： 均为Cookie的有效期，Expires是该Cookie被删除的时间戳，不设置则默认关闭时删除，Max-age是Cookie的有效期，表示多少秒后失效，0立即失效，-1关闭页面时失效Size： Co
2022-03-04 09:37:28
497
原创 浏览器跨域及解决
浏览器出于安全考虑，有同源策略，即协议、域名或者端口有一个不同就是跨域，Ajax请求会失败主要是为了防止CSRF攻击（跨域请求伪造攻击），CSRF攻击是利用用户的登录态发起恶意请求解决跨域方法：JSONP：利用<script>标签没有跨域限制的漏洞，通过<script>标签指向一个需要访问的地址并提供一个回调函数来接收数据使用简单且兼容性不错，但只限get请求可能遇到多个JSONP请求回调函数名是相同的，需要自己封装JSONPfunction json.
2022-03-04 09:32:02
422
原创 事件代理与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
98
原创 三种事件模型
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
266
原创 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
111
原创 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
102
原创 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
原创 浏览器 事件循环 Event Loop
JS是门非阻塞单线程语言（因为多线程处理DOM可能存在一个新加节点一个删除节点的情况）JS在执行过程中会产生执行环境，这些执行环境会被顺序的加入到执行栈中，如果遇到异步代码，会被挂起并加入到Task队列中。一旦执行栈为空，Event Loop就会从Task队列中拿出需要执行的代码并放入执行栈中执行，本质上JS中的异步还是同步行为不同任务源会被分配到不同的Task队列中，任务源可以分为微任务（microtask）和宏任务（macrotask），在ES6规范中，microtask被称为jobs，macro.
2022-03-03 16:26:49
171
原创 普通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
416
原创 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
49
原创 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
原创 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
87
原创 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
原创 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
827
原创 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
139
原创 matplotlib画折线图
import matplotlib.pyplot as pltplt.rcParams['font.sans-serif']=['SimHei'] # 用黑体显示中文plt.rcParams['axes.unicode_minus'] = False # 正常显示负号dataX = ["2011年", "2012年", "2013年", "2014年", "2015年", "2016年", "2017年", "2018年", "2019年", "2020年"]dataY = [44.
2022-02-25 20:48:00
382
原创 happypack打包报错TypeError: this.getOptions is not a function
网上很多TypeError: this.getOptions is not a function，需要从错误提示看：上面红色框可以看出style-loader报错了，应该改style-loader，将style-loader版本将为2.0，重新npm install就好了从错误提示看，哪个loader报错改哪个本人happypack加载的loader为new HappyPack({ id: "styles", loaders: ['style-loader', 'css-load
2021-12-03 20:28:13
713
原创 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
62
原创 git 常见操作
$ git config —global user.name “仓库名”$ git config —global user.email “email”配置ssh密钥：输入下面命令，三次回车生成ssh keyssh-keygen -t rsa -C “email”常用命令：git status : 查看仓库的改变情况，会有相应的提示操作出现git add：直接添加所有改动的文件git commit -m “note” 确认生成本地的版本，note是版本特点说明，自己的备注（ 提交到本地仓库 ）
2021-08-24 16:06:51
45
原创 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
62
原创 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
74
原创 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
121
原创 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
68
原创 JS判断类型的四种方法
1、typeof 对原始类型除null外都能正确判断，对于对象除了函数会显示function外其他都会显示object，因此不能准确判断复杂类型，使用typeof 111 === 'number'2、instanceof 内部通过原型链来判断，判断对象可以，但原始类型不行，instanceof不认为原始类型值的变量是对象，原始类型都返回false，使用{} instanceof Objectinstanceof 可以正确的判断对象的类型， 内部机制是通过判断对象的原型链中是不是能找到类型的proto.
2021-08-21 13:19:53
326
原创 mongodb启动报错”服务没有响应控制功能“
1、卸载以前的服务sc delete MongoDB2、在mongodb安装目录的bin目录下以管理员身份运行cmd，执行命令mongod --dbpath "d:\mongodb\data" --logpath "d:\mongodb\logs\mongo.log" --logappend --serviceName MongoDB --auth --install其中d:\mongodb\data，d:\mongodb为安装目录，data为其下文件夹，d:\mongodb\logs\mongo.l
2021-07-02 11:13:11
518
原创 ant-design4.x表单规则校验rules
ant-design4.x表单规则校验rules可以用自带的解决简单规则，复杂的可以用正则表达式或者函数// 组件引入省略export default class Login extends Component { onFinish = (values) => { console.log('Received values of form: ', values); }; // 密码校验规则函数，长度在6-20之间，和下面的用户名规则同效 chec
2021-07-01 17:22:31
1342
原创 React 引入 ant-design4.x
1、安装ant-design yarn add antd2、安装依赖 yarn add react-app-rewired customize-cra babel-plugin-import3、修改启动命令，package.json中找到scripts修改为如下内容"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-re.
2021-07-01 11:03:14
150
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人