- 博客(27)
- 收藏
- 关注
RSS订阅原创 使用npm run serve打包vue项目出现白屏
出现白屏第一种可能就是找不到资源解决办法：在vue.config.js文件中写入：即可第二个就是可能用了路由，那么就要把路由的mode从history变成hash
2022-06-07 16:05:49
1033
原创 配置代理服务器
在vue.config.js文件夹中写入如下代码：这样所有出现/api的地方都会变成网址在src文件夹下建立一个setupProxy.js文件，并写入以下代码：这样所有出现/api的地方都会变成网址
2022-06-01 19:11:46
227
原创 块级元素和行内元素
块级元素div、p、hr、h1-h6、ul、ol、li、table、form行内元素span、a、br、img、input、select、textarea
2022-05-31 18:13:46
96
原创 新特性相关
H5新增更好的语义化标签（header、footer...)增强型表单（input的type值更多）音频和视频canvas画布拖拽apilocalstorage和sessionstorageweb worker和web socket地理定位Css3新增选择器盒子阴影圆角边框渐变转换、过渡、动画flexES6新增let和const箭头函数解构赋值模板字符串扩展运算符symbol类型promiseasync/
2022-05-31 18:09:33
77
原创 前端安全问题
目录XSS攻击简介攻击类型防范措施CSRF攻击简介攻击类型防范措施XSS攻击简介xss，全称Cross Site Scripting，翻译为跨站脚本攻击它的攻击原理是利用开发时候的漏洞，向页面注入一些恶意代码，从而达到攻击目的攻击类型xss的攻击类型可分为持久型和非持久型持久型指的是存储型xss，恶意代码被保存到目标网站的服务器中，这种攻击具有较强的稳定性和持久性 非持久型分为反射型xss和DOM型xss，反射型xss通过引诱用户点击一个
2022-05-24 16:25:53
88
原创 webpack.config.js
const {resolve} =require('path')module.exports = { //入口文件 entry:'./index.js', //根据自己的文件替换 //输出 output:{ //输出文件名 filename:'built.js', //输出路径 path:resolve(__dirname,'build') //__dirname是nodejs的变量，代表的是当前文件存
2022-04-16 11:00:06
499
原创 手写call函数和apply函数
目录call函数apply函数call函数 Function.prototype.mycall = function(){ if(typeof(this) !== 'function'){ //如果调用mycall的不是一个函数 console.log("出错了") //则直接输出错误 } let oBj = arguments[0] || window //用o
2022-04-12 19:43:41
138
原创 数组扁平化
目录什么是数组扁平化实现方式1.Array的flat()方法2.手写扁平化函数什么是数组扁平化数组扁平化就是将多维数组变成一维数组实现方式1.Array的flat()方法let arr = [1,[2,3,4],5]let result = arr.flat()console.log(result)2.手写扁平化函数 function flat(arr){ let result = [] //用空数组来存
2022-04-12 15:24:28
98
原创 函数柯里化
目录什么是柯里化柯里化实现什么是柯里化所谓柯里化就是把具有较多参数的函数转换成具有较少参数的函数的过程我们来看一个例子let sum = function(a,b,c){ return a+b+c }console.log(sum(1,2,3))这个例子实现的是1+2+3，但是我们发现传入了很多个参数，那么怎么实现柯里化，让每次只传入一个参数呢？我们要用到函数返回函数的方法 let sum = fu.
2022-04-12 11:04:14
95
原创 图片懒加载
什么是图片懒加载当我们访问一个图片展示比较多的网页时，加载速度慢很多时候正是因为图片多导致，大量的img图片导致页面渲染的堵塞。而且若用户只查看了网页的前面部分便离开，许多已经加载却因为处于网页底部而未呈现在视口区的图片，它们极大加重服务器压力但是用户看都没看，白白浪费了性能。为了解决这些的问题，就需要引入图片懒加载，懒加载其实很好理解，重点就是一个‘懒'字。当用户滚动相应可视区域，若可视区域有图片便加载，而在可视区域外未加载过的图片它们先不加载，如果用户滚动可视区域到它们时它们再加载，否则一律不加载。
2022-04-09 20:31:15
498
2
原创 在浏览器中输入URL并回车，会发生什么
目录1.URL解析2.DNS解析3.建立TCP连接（三次握手）4.发送HTTP请求5.服务器接收请求、处理请求、返回响应报文6.浏览器解析响应中的文件，渲染页面1.URL解析URL是统一资源定位符，由协议、域名、主机、端口号等等组成，所以浏览器拿到URL后，先对URL进行解析2.DNS解析DNS解析也叫做域名解析，目的是解析出URL中的域名，把域名变为IP。因为机器之间只认识IP，而域名是为了方便人类记忆所创建的，所以要先将域名变成机器可以认识的IP。DNS本
2022-04-08 15:05:50
950
原创 this相关
目录什么是thisthis的五种情况分析函数执行事件行为触发new一个对象箭头函数基于Function.prototype上的call/apply/bind方法去改变this指向什么是this在JS中，this指的就是执行主体，也就是说，谁执行的它，this就是谁，和在哪里创建以及在哪里执行都没有关系，只看谁执行它this的五种情况分析函数执行当一个函数执行，就看它前面有没有“点”，如果没有“点”，那么this就是window，严格模式下是undefi
2022-04-08 11:45:35
97
原创 JS中检测数据类型的方法
目录typeofinstanceofconstructorObject.prototype.toString.call(待检测值)总结typeof我们最容易想到的是typeof，但是typeof漏洞很多，我们先打印一下基本数据类型（除null外） let a = 1 let b = "123" let c = false let d = undefined console.log(typeof(a)) cons
2022-04-07 21:55:50
3697
原创 清除浮动的方法
为什么要清除浮动首先，我们来看一个例子，为什么要清除浮动<!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-sc
2022-04-07 15:14:53
227
原创 圣杯布局和双飞翼布局
首先我们要知道圣杯布局和双飞翼布局的目的都是为了让左右两边的盒子宽度固定，中间的盒子宽度自适应圣杯布局实现首先，用一个con盒子包裹3个盒子，接着，我们来设置css样式<body> <div class="con"> <div class="c">中</div> <div class="l">左</div> <div class="r">右</.
2022-04-07 15:00:25
810
原创 浏览器渲染页面的过程
目录渲染过程回流和重绘回流重绘回流和重绘的关系渲染过程首先，浏览器通过网络请求拿到要渲染的页面，之后开始从上到下依次解析例如一个页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <m.
2022-04-06 22:09:10
2308
原创 new的作用
function Fn(name,age){ this.name = name this.age = age }new Fn('张三',18)如上，Fn是一个构造函数，我们使用new关键字来创建出了一个对象那么，在这其中，new做了什么事①创建一个对象②将构造函数的作用域赋给这个对象，也就是说，将构造函数中的this指向该对象③执行构造函数中的代码，也即为这个对象添加属性④返回这个对象我们用一个变量来接收.
2022-04-06 14:23:56
624
原创 slice()和splice()
这两个方法都是js中截取数组的方法，那么它们两个有什么区别呢？slice()slice方法，可以传入两个参数，第一个参数表示起始位置，第二个参数表示终止位置，即slice(start,end)，但是注意，这里是左闭右开，也就是说截取到的数组元素下标包括start，不包括end，这个方法不会改变原数组 let arr = [0,1,2,3,4] let newArr = arr.slice(0,2) console.log("截取下来的是：" + newArr) c
2022-04-05 15:46:22
918
原创 事件循环（Event Loop）
目录同步任务异步任务异步任务分类例题众所周知，JS是单线程的，那么如果出现多个任务，这些任务的执行顺序是怎么样的呢？这就不得不提一下事件循环同步任务首先，我们用一个栈来表示主线程当有多个同步任务时，这些同步任务会依次入栈出栈，如下图同步任务1先入栈，执行完之后，出栈，接着同步任务2入栈，依此类推这只是同步任务的执行方式，那么异步任务呢？异步任务异步任务会在同步任务执行之后再去执行，那么如果异步任务代码在同步任务代码之前呢？在js机制里，存在一个
2022-04-05 09:32:48
10803
13
原创 防抖与节流
什么是防抖所谓防抖，就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间什么是节流所谓节流，就是指连续触发事件但是在n秒中只执行一次函数...
2022-04-04 20:36:51
583
原创 Promise相关
回调地狱 function a(){ setTimeout(() => { setTimeout(() => { setTimeout(() => { console.log("123") }, 1000); }, 3000); },
2022-04-04 10:14:27
114
原创 深拷贝与浅拷贝
首先，深拷贝与浅拷贝是对于引用数据类型（数组或对象）而言的，在基本数据类型中并不存在深拷贝与浅拷贝 let a = 1 let b = a b = 2 console.log(a,b)在基本数据类型中，改变b的值并不会影响a的值，这仅仅叫做赋值，如果非要说拷贝，那么就是深拷贝浅拷贝数组和对象的拷贝都是浅拷贝 let arr = [1,2,3] let newArr = arr .
2022-04-03 15:36:34
554
原创 Html5、Css3相关
快速实现居中对齐<style> *{ margin:0; padding:0 } html,body{ width: 100%; height: 100%; } body{ display: flex; //1.设置flex布局 } .box{
2022-04-03 15:00:35
141
原创 Vue相关
虚拟DOM什么是虚拟DOM虚拟DOM的好处Diff中的patch()与update()响应式原理key值的作用是什么，可不可以用数组下标代替计算属性可不可以进行异步操作为什么Vue中的data要是一个函数Vue父子组件在加载的时候生命周期执行顺序Vue路由模式及其对比SPA
2022-04-02 22:32:55
1013
原创 ES6相关
var1.var存在变量提升2.用var声明的变量，可以重新赋值3.var没有块级作用域let1.let声明的变量不能够再次声明2.let没有变量提升3.let不影响作用域链const1.const声明之后必须赋值，否则会报错2.const定义的值不能被修改解构赋值对数组的解构赋值对象的解构赋值解构赋值相关操作1.不引入其他变量来交换两个变量的值2.数组去重
2022-04-02 21:49:15
429
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人