leilei7407的博客

原创 阻止冒泡和取消事件默认行为

1.阻止冒泡2.取消默认事件preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了...

原创 深拷贝和浅拷贝

1.实现深拷贝Js数据类型分为基本数据类型(string,number,boolean,null,undefined,symbol)（又叫值类型）和引用数据类型(object)。基本数据类型的值存放在栈内存中。基本数据类型他们的值被以键值对的形式保存在栈中。引用数据类型的值存放在堆内存中，栈中存放的是值在堆内存中的地址。引用类型只有object一种。但js中除了基本数据类型，万物皆对象，数组，函数，对象都是object类型。与基本类型不同的是，引用类型的值被保存在堆内存中，对象的引用

原创 typeof和instanceof，Object.prototype.toString，以及判断是数组还是对象，手写instanceof

1.typeof2.instanceofinstanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上，返回值是一个布尔值。instanceof能否判断基本数据类型？不能3.Object.prototype.toString通常用typeof判断基本数据类型，用instanceof来判断复杂数据类型(如Array，Object，RegExp)。Object.prototype.toString既能判断基本数据类型也能判断复杂数据类型。4.

原创 js实现继承的几种方式

原型链继承借用构造函数来继承构造函数+原型链 组合继承寄生组合式继承原型式继承寄生式继承class+extends继承（1）原型链继承核心：创建父类实例对象作为子类原型优点：可以访问父类原型上的方法或属性，实现了方法复用缺点：创建子类实例时，不能传父类的参数（比如name），子类实例共享了父类构造函数的属性值，(2)构造函数继承核心：在子构造函数中调用父构造函数优点：解决了原型继承的缺点 （使用构造函数来继承可以传父类的参数，可以解决子类共享父类构造函数中属性的问题.

原创 vue中computed和watch，方法的区别以及deep,immediate

computed : 计算属性要计算的属性会随着其依赖的data中属性变化而变化，只要依赖的属性改变，就会执行computed，若无改变，则直接从缓存中取值支持缓存，只有依赖数据发生改变，才会重新进行计算不支持异步，当computed内有异步操作时无效，无法监听数据的变化如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computedcomputed属性属性值是函数，默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个g.

原创 重绘和重排

重排是DOM元素的几何属性变化，DOM树的结构变化，渲染树需要重新计算。重绘是一个元素外观的改变所触发的浏览器行为，例如改变visibility、outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。优化：减少回流和重绘将多次改变样式属性的操作合并成一次操作。如果要批量添加DOM，可以先让元素脱离文档流，操作完后再带入文档流，这样只会触发一次重排。（fragment元素的应用）将需要多次重排的元素，position属性设为absolute或fix...

原创 script标签以及async和defer属性 （异步加载js代码）

defer（延迟）属性：仅适用于外部脚本（即只有在使用 src 属性时，该属性才有效），规定对脚本执行进行延迟。下载脚本时不阻塞页面的解析执行，直至页面加载解析执行完成后，才开始执行脚本。async(异步)属性：适用于外部脚本（即只有在使用 src 属性时，该属性才有效），规定异步执行脚本。下载时不会阻塞页面的解析执行，下载完成后立刻执行脚本，此时，如果页面没有解析执行完，则会阻塞页面加载解析。(注意：如果同时指定了两个属性，则会遵从async属性而忽略defer属性。）只有一个脚本情况...

原创 domcontentloaded和load的区别

原创 死锁的分析

原创 {}，new Object()和Object.create()区别

Object.create()方法接受两个参数:Object.create(obj,propertiesObject) ;第一个参数obj：必须的，是一个对象，是新创建的对象的原型对象。第二个参数propertiesObject：可选的，是一个对象，是新创建的实例对象上的属性。该对象是一组属性与值，(propertiesObject与Object.defineProperties()的第二个参数一样)...

原创 css——三栏布局

圣杯布局 <style> /* 三个部分都设定为左浮动，否则左右两边内容上不去，就不可能与中间列同一行。 然后设置center的宽度为100%(实现中间列内容自适应)，此时，left和right部分会跳到下一行 通过设置父容器的padding-left和padding-right，让左右两边留出间隙。 通过设置margin-left为负值让left和right部分回到与center部分同一行 通过设置相对定...

原创 cookie,sesssionStorage,localStorage

cookie,sesssionStorage,localStorage总结sesssionStorage,localStorage的相同点和不同点html5中提供了两种本地存储的方式：localStorage（本地存储）和sessionStorage（会话存储)localStorage和sessionStorage共同特点（本地存储特性）：1.数据存储在用户浏览器中,（数据仅在客户端（即浏览器）中保存，不参与和服务器的通信）2.设置、读取方便、甚至页面刷新不丢失数据3.容量大较大、约5M4.

原创 js解决回调地狱(promise,generator,async和await）

1.回调地狱没有Promise之前,解决异步都是依赖回调,但执行多个具备前后顺序的异步操作时，就需要在回调当中嵌套回调，也称回调地狱。这种代码的可读性和可维护性都是非常差的，因为嵌套的层级太多。//回调地狱 输出顺序 1 2 3 setTimeout(function(){ console.log('1'); setTimeout(function(){ console.log('2');

原创 promise,generator,yield,async和await的使用

1.promise 基本使用方法：Promise实例对象的方法（then，catch，finally）Promise构造函数本身的方法(Promise.all()，Promise.race()，Promise.any())Promise.all中什么时候触发回调？当传入的promise全为resolve时，或者只要有一个是reject时就会触发回调Promise.race中什么时候会触发回调？只要有一个promise有返回结果（不管是resolve还是reject）就会

原创 事件循环eventloop以及宏任务和微任务

事件循环：从上到下执行script(整体代码)，遇到异步代码时，会将这个事件挂起，继续执行执行栈中的其他同步任务。当被挂起的异步代码执行完后，会将这个异步代码的回调函数加入事件队列中（若这个异步任务为宏任务，则加入宏任务队列。若这个异步任务为微任务，则加入微任务队列。）当script(整体代码)执行完后，会执行微任务队列中所有的微任务。执行完所有的微任务后，然后进行浏览器渲染，再从宏任务队列中找一个宏任务进入执行栈中执行，然后再重复……...

原创 new 操作符原理以及手写new

首先创建一个空对象，并继承构造函数的原型对象prototype执行构造函数，执行时传入相应的参数，并将this执行为新实例判断构造函数的返回值，……

原创 get和post区别

get参数通过url传递，post放在request body中get请求在url中传递的参数是由长度限制的，而post没有get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。get产生一个tcp数据包，post产生两个tcp数据包但get和post本质上都是tcp连接。HTTP的底层是TCP/IP，所以GET和POST底层也是TCP/IP，也就是说GET和POST都是TCP链接。get产生一个tcp数据包，post产生两个tcp数据包的解释：...

原创 vue双向数据绑定原理

发布订阅者模式简单示例Object.defineProperty()使用链接什么时候应该通知订阅者？数据变化的时候怎么才能检测到数据变化？只要调用了属性的setter方法，就可以认为数据发生了变化，所以可以将通知订阅者（即dep.notify()方法）放在setter中。————————————使用Object.defineProperty()进行数据劫持：通过get()劫持取值操作 （可以在执行这个函数时，进行添加订阅者操作）通过set()劫持赋值操作 （可以在执行这个函数时，进行通

原创 css3中过渡(transition)，转换（transform），动画

1.过渡(transition)所谓过渡其实是css3中新增的一个动画效果。上述代码的效果是当鼠标悬浮在div上时，div的宽会由200px慢慢增加到400px。当鼠标离开div时，div的宽会由400px慢慢减少至200px。如果想给元素的多个属性添加过渡效果：或者2.转换transfrom(包括移动，旋转，缩放)（1）2d转换之移动translate 到目前为止，一共学了三种移动盒子位置的方式：定位，盒子外边距以及利用2d转换移动 translate应用场景

原创 html5新特性

html5新增的特性主要是针对以前的不足，如导航栏，侧边栏等都是用div实现的，这样不利于seo。所以Html5中新增了一些标签，表单以及表单属性。这些新特性一般都有兼容性问题，基本上是ie9以上版本的浏览器才支持，如果不考虑兼容性，可以大量使用这些新特性。html5新增的语义化标签html5新增的多媒体标签——视频标签html5新增的多媒体标签——音频标签html5中新增的input标签类型（即type属性的取值）多了html...

原创 vuex使用

输出this，state讲解中。看看是啥this.&store???参考博客参考博客vuex的四大核心有state、getter、mutation以及action。stateState提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储(state相等于vue组件中的data)gettergetter 用于对 Store 中的数据进行加工处理形成新的数据，Store中的数据发生变化时，getter的数据也会跟着发生变化即...

原创 vue——路由守卫

导航守卫其实也是路由守卫，也可以简单的说，导航守卫就是路由跳转过程中的一些钩子函数。导航的含义就是路由改变。即路由守卫就是我们切换路由时，会触发的一些函数（导航守卫作用： — 类似 【保安】）路由跳转是一个大的过程，这个大的过程分为跳转前中后等等细小的过程，在每一个过程中都有一函数，这个函数能让你操作一些其他的事儿的时机，这就是导航守卫。如我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览。Vue-router有几种导航守卫？三种导航钩子（三种守卫）！！！！！：全局导航钩子（全局..

原创 块级格式化上下文BFC

BFC(Block formatting context)直译为"块级格式化上下文"，它既不是一个css属性，也不是一段代码。而是css2.1规范中的一个概念。可以将bfc看成元素的一个属性，触发了元素的bfc后，此时元素就相当于一个箱子，是一个独立的渲染区域。bfc布局规则BFC有隔离作用，BFC中的内部元素不会受外部元素的影响（反之亦然）在一个BFC中，元素按照正常文档流排列在一个BFC中，两个相邻的块盒子在垂直方向的margin会合并BFC中的内容不会与外面的浮动元素重叠计算BFC的.

原创 css——浮动布局(float)以及清除浮动

浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。浮动布局的特点：会让元素脱离文档流（不占据原来的位置），但同时也会有一些副作用（高度塌陷）为什么需要浮动？ 有很多布局效果，标准流布局无法完成，因为浮动可以改变元素标签默认的排列方式。举例说明：让多个块级元素在一行显示方式1：标准流布局方式是将块级元素的display属性设置为inline-block，但这样虽然可以实现，但他们之间会有空白间隙，不好控制。方式2：可以将，这些块，都设置浮动（即添加float属性），并且浮动方向相.

原创 css3新特性

css3新增了更多的选择器（属性选择器，结构伪类选择器，伪元素选择器）css3新增了2D和3D转换、动画，过渡，渐变，等等

原创 如何区分 HTML 和HTML5、XHTML

1.HTML 和HTML5区别首先要注意的是，HTML5虽然现在很火，但是HTML5标准还在制定中，标准仍在改变。HTML4已经10多年了，不会有任何改变了。HTML 和HTML5区别（1）文档的类型声明不同如下：（2）html中新增了很多新标签以及功能，如：html5:添加了许多具有语义化的标签，使代码结构清晰，提高了代码的可读性。html5中还新增了用于媒介回放的 video 和 audio 标签；html5中新增绘图标签canvashtml5对本地离线存储有更好的支持

原创 手写Promisify函数

手写Promisify //分析可得 promisify函数返回一个函数。返回的这个函数，返回值是Promise对象 function promisify(f){ return function(...args){ return new Promise(function(res,rej){ args.push(function(err,data){ .

原创 js——promise用法

.1.promise基本用法 <script> const promise =new Promise((resolve,reject)=>{ console.log(1); resolve(5); console.log(2) }).then(val=>{ console.log(val); }); pro

原创 js——浏览器缓存（http缓存）和本地存储

http缓存链接事先代码准备：创建一个http服务在集成终端中，输入node app.js启动服务此时，在浏览器中输入localhost:3000，结果如下新建一个test1.html页面，内容如下现在希望服务器能将这个页面发送过来，所以修改app.js内容此时，在浏览器中输入localhost:3000后，结果如下，可以看出，此时显示的就是index.html页面基于上面的内容，开始讲解强制缓存和协商缓存index.html内容如下此时，如果不修改ap.

原创 JS——generator（生成器）和yield、与iterator接口的关系、Generator实现异步编程

1，B站es6视频

原创 js——Array中reduce方法

reduce方法reduce() 方法接收一个回调函数作为参数，reduce 为数组中的每一个元素依次执行回调函数，回调函数接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。reduce方法的返回值为回调函数最后的返回值 代码示例1：(回调函数中不写return，并且没有initialValue)代码示例2：(回调函数中写return，但没有initialValue)代码示例3：(回调函数中:写return，并且有initialValue.

原创 js——数组扁平化实现方式(超详细！！！)

数组扁平化，就是将一个复杂的嵌套多层的数组，一层一层的转化为层级较少或者只有一层的数组。方式1 使用ES2019中新增的 Array.prototype.flat(参数)方法 //方式1 使用ES2019中新增的 Array.prototype.flat(参数)方法 该方法不会改变原数组，会返回一个新数组 var arr1=[1,2,[2,3],[[4,5]],6] var arr2=[2,5,5] console.log(arr1.flat(In.

原创 js——JSON对象用法

JSON是一种按照 JavaScript对象语法的数据格式。JSON全称 JavaScript 对象表示法（JavaScript Object Notation）。

原创 js——关键字in和hasOwnPrototype用法

JavaScript中in和hasOwnProperty区别详解hasOwnProperty表示是否有自己的属性。这个方法会查找一个对象是否有某个属性，但是不会去查找它的原型链。

原创 vue面试（三）——组件(或实例)生命周期以及父子组件生命周期执行顺序

vue生命周期函数又叫生命周期钩子，是在某个时刻会自动执行的函数vue组件又叫实例，所以将组件生命周期又叫实例生命周期参考链接 (1)创建期间的生命周期函数vue生命周期函数又叫生命周期钩子，是在某个时刻会自动执行的函数vue组件又叫实例，所以将组件生命周期又叫实例生命周期beforeCreate是在vue组件或实例创建完成之前执行。created是在vue组件或实例创建完成之后执行。beforeMount是在模板渲染到页面上之前会执行mounted是在模板渲染到页面完...

原创 web开发模式（服务端渲染，客户端渲染(前后端分离)以及如何选择web开发模式）

目前主流的Web开发模式，大致分类两种：(1) ​ 基于服务器端渲染的传统Web开发模式 (SSR Server side rendering服务器端渲染)(2) ​ 基于前后端分离的新型Web开发模式 （CSR Client side rendering客户端渲染）何为渲染？页面上的数据要发生更新，就是渲染。这个工作放在服务器进行就是服务器端渲染，放在浏览器进行就是浏览器端渲染。何为渲染？如果我们只是想显示一堆不变的数据，那么我们直接写一个a.html丢到服务器上让客户端访问就可以了.

原创 html5本地存储——sessionStorage和localStorage

sessionStorage和localStorage数据的存储以及获取，以及两者的区别html5中提供了两种本地存储的方式：localStorage（本地存储）和sessionStorage（会话存储）window.sessionStorage（会话存储）：暂时储存，浏览器关闭之后会清除window.localStorage （本地存储）：本地储存，浏览器关闭之后依旧不会清除，只能人为删除平时储存的话建议使用sessionStorage；本地存储特性：1.数据存储在用户浏览器中2.设置.

原创 js——iterator，可枚举，for of、for in、foreach

1https://blog.youkuaiyun.com/weixin_48337566/article/details/114861343?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242添加链接描述https://www.cnblogs.com/everlose/p/12894300.htmlhttps://blog.youkuaiyun.com/qq_30100043/articl

原创 js——Set和Map，以及哈希表

1.哈希表参考链接哈希表概述：散列表（Hash table，也叫哈希表），是根据关键值(Key)而直接进行访问的数据结构。也就是说，它通过把关键值key映射到表中一个位置来访问记录，以加快查找的速度。这个映射函数叫做散列函数(哈希函数)，存放记录的数组叫做散列表。（哈希表一般用数组来存储）向哈希表中存数据：根据数据的key值和哈希函数，得到一个数组下标，这个下标的含义是数据在哈希表中的存放的位置。若发生了冲突，则再根据冲突的处理方法来解决冲突。找到最终存放的位置后，将数据存放进去。在哈希表中查

原创 js中数组Array中sort（）函数用法以及原理

注意：sort() 方法用于对数组的元素进行排序。默认排序顺序为按字母升序排序。若想使用数字排序，你必须通过一个函数作为参数来调用。通过函数指定数字是按照升序还是降序排列。sort方法会改变原始数组。数字升序排序数字降序排序js中数组的sort()方法及原理sort方法可以直接调用，不传入任何参数，也可以传入一个比较函数作为参数。如果调用sort方法时没有使用参数，会按默认的排序的方式，即先调用每个数组项的toString()，将数组中元素转成字符串类型，然后按AS...