- 博客(34)
- 收藏
- 关注
RSS订阅原创 关于html的一切(updating...)
1.html5新特性语义标签。给标签添加语义，让合适的标签做合适的事。<‘header’>,<‘footer’>,<‘nav’>。有利于SEO(搜索引擎优化)，有利于开发和维护。canvas,svgWeb Storage本地存储解决方案，就是localStorage和sessionStorageWeb WorkerWeb Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。WebSocket协议建立在tcp基础之上，和
2021-02-24 22:35:59
177
原创 关于React的一切(updating...)
1.React前言前端UI的本质问题是如何将源于服务器端的动态数据和用户的交互行为高效的反映到复杂的用户界面上去。React另辟蹊径，通过引入虚拟DOM，状态，单项数据流等设计理念，形成以组件为核心，用组件搭建UI的开发模式。React特点可归结于以下4点：声明式的视图层。React的视图层是声明式的，基于视图状态声明视图形式，采用jsx语法来声明视图层，因此可以在视图层中随意使用各种状态数据。简单的更新流程。只需要定义UI的准该，React便会负责把它渲染成最终的UI。当状态数据发生改变时，Re
2021-02-23 00:18:08
355
3
原创 数据结构与算法(updating....)
1.栈特点：先进后出class Stack { nums:number[]; constructor(){ this.nums = []; } push(val:number):void{ //栈顶添加元素 this.nums.push(val); } pop():number{ //栈顶元素弹出并返回这个元素 return this.nums.pop(); } peek():number{ //返回栈顶的元素但不删除 return this.nums
2021-02-21 15:10:15
140
原创 关于css的一切(updating...)
1.盒模型从内二外，内容(content),内边距(padding),边框(border),外边距(margin)分为IE怪异盒子模型，W3C标准盒子模型标准盒子模型，box-sizing:content-box；宽高指context区宽高IE怪异盒子模型，box-sizing:border-box；宽高 = content + padding + border2.BFC...
2021-02-20 00:11:11
130
原创 手写一切(updating...)
1.手写ajax基本过程var xhr;if(window.XMLHttpRequest){ //code for IE7+,Firefox，Chrome，Opera，Safari xhr = new XMLHttpRequest();}else{ // code for IE6, IE5 xhr = new ActiveXObject("Microsoft.XMLHTTP");}var xhr = new XMLHtpRequest(); //创建对象xhr.
2021-02-12 00:10:34
102
原创 关于js的一切(updating...)
1.js原型链构造函数：function Person()，Person()即为构造函数原型对象：每一个构造函数都会带有一个Prototype属性，该属性为一个指针，指向了一个对象，即为原型对象。实例对象：new Person()，new一个构造函数就会产生一个实例，实例对象有一个内部属性_proto_,指向了原型对象。实例能够访问该原型对象的所有属性和方法。综上：三者关系为，每一个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的指。即，实例通过内部指针
2021-02-08 00:00:37
258
原创 1.LeetCode字符编辑距离
随便取一个代表类型的题目，其实也就是求从字符串a变形到字符串b，需要多少次操作。直接上思路：我们可以按照从后往前遍历的顺序，判断a[i]===b[j]?,如果为真，则i-1，j-1，执行skip操作，直接看前面一个：为假，需要判断3个操作(假定为从b变到a，但其实无论从谁变到谁，结果都一样）插入(在b[j]的位置插入一个与a[i]一样的字母，因为b的长度变长了，所以其实就是i–,j不变)《按照尾插》删除(删除b[j]这个元素，那么i不变，j–)《因为此时还不满足a[i]===b[j]，所以j还.
2021-01-01 19:37:43
114
原创 CSS选择器优先级 12.28
时隔2个星期，失踪人口回归了！从28号开始，要重新更新博客了！上个星期太沉迷于scss，做了很多很有意思的动画，之后也会考虑上传到博客上的。那么首先我们回到最最最爱的css，这个面试题其实蛮经典的，尽管我们在开发中对于css的继承已经非常熟悉，但是，总归还是要系统归纳总结，以免掏不出点东西来，或者说知道却不能很好的表达出来！！！！本篇参考菜鸟教程CSS 样式优先级要知道所有一切的优先级原则都是基于css样式的继承性接下来来看栗子啦(1,2咱们一起讲，虽然也没啥好讲的，这两个都是最基本的)CSS
2020-12-28 20:37:00
205
原创 typeof与instanceof的区别
typeoftypeof 是判断参数是什么类型的实例，返回值为说明运算数类型的字符串。返回值结果：“number”、“string”、“boolean”、“object”、“function”、“undefined”若参数为引用类型，始终返回“object”，对于Array、null始终返回“object”，所以用typeof来判断参数类型有很大的局限性。instanceofinstanceof是用来判断一个对象在其原型链中是否存在一个构造函数的prototype属性a instanceof b
2020-12-17 08:52:24
127
原创 vue和react的diff算法对比
vue和react的diff算法，都是忽略跨级比较，只做同级比较。vue diff时调动patch函数，参数是vnode和oldVnode，分别代表新旧节点。vue比对节点，当节点元素类型相同，但是className不同，认为是不同类型元素，删除重建，而react会认为是同类型节点，只是修改节点属性vue的列表比对，采用从两端到中间的比对方式，而react则采用从左到右依次比对的方式。当一个集合，只是把最后一个节点移动到了第一个，react会把前面的节点依次移动，而vue只会把最后一个节点移动到
2020-12-07 19:29:37
1008
原创 2.vue的diff算法(2020.12.07)
在之前的生命周期中有提到过虚拟dom的相关概念，这里来简单介绍一个vue的diff算法的原理1.virtual dom无论是vue还是react，在更新渲染的过程中，都是先根据真实dom生成一个虚拟dom对象，如图下所示当某个节点发生变化时，vue都会根据新的vnode与oldVnode进行对比，如果不一样，就会直接修改在真实dom树。这里要说一点，对于简单的dom结构，有时候直接修改真实dom的效率要比加一层virtual dom效率摇号，但是在项目庞大复杂的背景下，virtual dom拥有
2020-12-07 10:07:27
244
原创 1.react生命周期详解(2020.12.05)
刚敲完vue的生命周期，现在来敲敲react的生命周期,当然生命周期只针对类组件(我很不常用类组件)。raect生命周期(v16之前)initialization(初始化阶段)mounting(挂载阶段)updation(更新阶段）unmounting(卸载阶段)1.initialization(初始化阶段)自然是创建一个类，然后创建构造函数了 这里看一下，我们创建了Hello类并继承了React.Component这个基类，如果不继承的话，函数都没有，就没有接下来所有的生命周期了。
2020-12-05 20:41:48
225
原创 1.vue生命周期详解(2020.12.05)
vue生命周期，直接上官方图要明确生命周期，我们必须从钩子下手，beforeCreate，created，beforeMount,mounted,beforeDestroy,destroyed。
2020-12-05 15:14:11
247
原创 记模拟面试日记2(更新...)
1.你知道iframe是什么吗？它有什么缺点？iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。缺点：iframe会阻塞主页面的onload事件；很多的移动设备无法完全显示框架，设备兼容性差iframe框架页面会增加服务器的http请求，对于大型网站是不可取的。2.什么是icmp协议，它的作用是什么？Internet Control Message ProtocolICMP协议是网络控制协议，用于传输差错报文以及传递信息。...
2020-12-03 20:22:25
96
原创 深拷贝与浅拷贝的原理和区别
我特别想写这篇，因为我看到了一篇非常非常优秀的博客，讲的巨好！直接贴上链接，强烈建议大家去阅读原博主的 https://www.cnblogs.com/echolun/p/7889848.html1.深拷贝和浅拷贝的区别B复制A，A变，B变，浅拷贝。B复制A，A变，B不变，深拷贝。举个简单example平常的a赋值给b，a变，b并不会变。而对于对象obj2，这种简单的赋值，obj变，obj2变，就是浅拷贝了。这是为啥呢？这就要我们从数据类型说起了。。。。2.基本数据类型和引用数据类型基
2020-12-03 15:59:20
18337
1
原创 ES8新特性
1.Object.values/Object.entriesobject.entries能够把对象的属性以数组形式返回，object.values能够提取对象的属性值并以数组形式返回但是，他们对 对象数组其实没有太大效果，可以自己试验一下个人认为，在没有枚举类型的情况下，其实用for in更为实用。2.String.prototype.padStart / String.prototype.padEnd其实就是字符串填充至指定长度，在开头/结尾第二个参数指定填充的字符，默认为空格，若填充
2020-12-03 14:23:52
987
原创 ES7的新特性
ES7总体变化不大，主要增加了两个新特性1.Array.prototype.includes（arr，index）这个方法我经常在刷LeetCode上用过，相对于ES6中的indexOf，基本作用是一样的，都是检查一个元素是否存在于数组中，但是它返回的是一个布尔值，在实际运用中，更为实用。可以很清晰的看到，第二个参数index，可以从数组特定的索引开始寻找。2.Exponentiation Operator(求幂运算符)这意味着，我们的代码可以更加简洁了--------------------
2020-12-03 10:12:03
4925
原创 ES6的三点运算符
三点运算符主要有以下两个作用、1.作为参数使用这里可以很清楚的看到，arg2加上三点运算符后，位于arg0和arg1后的参数都会被合并为一个数组并返回，即使在没有传参的情况下，也会返回一个空数组。2.作为拓展运算符使用即具有拆解简单数组和对象的能力，但其实在面对二维数组的时候，结果就比较神奇了，大家可以去试一下，简单来说，它可以帮你脱一层衣服。...
2020-12-03 09:54:58
311
原创 http,tcp的长连接和短连接
http长连接和短连接短连接：客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。长连接：从HTTP/1.1起，默认使用长连接，用以保持连接特性。使用长连接的HTTP协议，会在响应头加入这行代码：Connection:keep-alive在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时，会继续使用这一条已经建立的连接。Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（
2020-12-02 17:59:50
168
原创 --从输入URL到页面展示的详细过程
基本过程1、输入网址2、DNS解析3、建立tcp连接4、客户端发送HTPP请求5、服务器处理请求 6、服务器响应请求7、浏览器展示HTML8、浏览器发送请求获取其他在HTML中的资源。1.输入网址(这没啥问题) 在输入网址的时候，还没按下回车，通常浏览器已经开始智能提示补全了，在chrome中，甚至从 缓存中拿出来展示了。2.DNS解析(浏览器查找域名的 IP 地址) 在我们的思维中，我们通常是记住一个网址比如说www.baidu.com，而浏览器需要记住的是他的IP地址
2020-12-02 16:27:00
968
原创 css字体
css绝对长度单位(通常不用)css相对长度单位 px(像素) em(元素的字体高度) %(百分比) rem(根元素的font-size) vm(视窗宽度，1vw=视窗宽度的1%) vh(视窗高度，1vh=视窗高度的1%)em和rem的区别rem是相对于根元素(html)的字体大小，而em是相对于其父元素的字体大小em最多取到小数点的后三位总结，em其实会层层地继承父元素的字体大小，其实往往会造成混乱，所以相比来说，rem更为实用。...
2020-12-02 15:38:17
80
原创 position定位
1.static(没有定位，不能偏移，也就是left等不生效) 所有的元素如果不进行定位，默认都为static2.absloute（绝对定位） 设置为absolute，它需要向上找一个定位的父元素（也就是被设置了除static以外的值）为基准来定位， 如果没有，则就会以浏览器窗口为基准定位。3.relative(相对定位) 相对的意思就是相对于其正常的位置(也就是为static)的时候，以它为基准，进行偏移fixed（绝对定位） 以浏览器窗口为基准进行定位inherit(继承)
2020-12-02 11:23:41
212
原创 记模拟面试日记(更新...)
1.讲一下你对get和post请求在缓存方面的区别的理解get请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用缓存。post做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。因此get请求适合于请求缓存。2.你知道HTTP请求的方式有什么？HEAD方式是什么？其实HTTP协议是一个广泛应用的Internet协议，目前常用八种请求方式，分别是GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT1、GET方法用于使
2020-11-30 21:53:09
156
1
原创 css实现垂直居中(+水平居中)
非常基础的东西，我们直接上example，下列我们只介绍垂直居中,如果要实现双居中，给子元素加一个margin：0 auto即可。前三个方法都是限于块级元素的。方法1（块级元素）给子元素添加 align-self: center，父元素添加 display: flex;方法2（块级元素）给父元素添加伪元素方法3（块级元素）暴力移动- - -方法4(行内元素)我们给父元素加上lineheigt，使其值等于自己的高度即可。...
2020-11-29 22:43:23
107
原创 js的继承和原型链(更新中)
话不多说，直接上MDN链接https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain说实话啦，上面讲的非常非常详细，大家可以移步去看原文哦，我这里分享一下自己的理解 。啥是继承我们知道在js中，万物皆对象，而每一个实例对象（object）都有自己的私有属性(proto)指向它的构造函数的原型对象(prototype)，而这个原型对象也有自己的自己的原型对象(proto)，层层向
2020-11-29 13:17:17
126
原创 弄懂bind，apply和call的区别
直接上区别：最大共同点：bind，apply，call都能改变this的指向(这也是他们的最大用处)。不同点：bind(this，数组，类数组或对象)apply(this, 数组，类数组或对象)call(this,arg1,arg2,arg3…)还有，只有bind是创造一个新的函数并返回，而其他两个都是直接用。第一个参数的传递1、thisObj不传或者为null、undefined时，函数中的this会指向window对象（非严格模式）。2、传递一个别的函数名时，函数中的this将指向
2020-11-28 19:25:16
159
原创 自写函数的防抖和节流
函数的防抖和节流是个啥，在知乎上看到一篇非常形象的文章，这里挂上链接https://zhuanlan.zhihu.com/p/72923073（好！！！）防抖：为了说明问题，假设一个场景：鼠标滑过一个div，触发onmousemove事件，它内部的文字会显示当前鼠标的坐标。每当我们的鼠标移动，都会触发事件，展示新的坐标。抖的意思其实就是‘执行’，而我们为了防止函数过于频繁的执行，使其只在我们停止移动的时候执行一次，这个时候我们就需要用到函数的防抖了。...
2020-11-28 18:51:56
220
原创 bind()的实现(持续更新中)
啥是bind()，bind的官方定义是：bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用。看起来感觉是不是特别滴简单，但是如果让你实现一下bind，我们该如何做？我们先来看一下bind的用法ex11.我们直接看到主角bind的这行，由fun这个函数调用了bind，紧接着，我们将对象a作为第一个参数，所以此时this指针将指向这个对象，而‘3333’将自然而然成为新函数的参数也就是str，2.紧接着我们
2020-11-27 17:08:42
699
1
原创 浅谈js中的this
明确一点，this永远指向一个对象，而指向的谁，完全取决于谁是他的直接调用者1.话不多说，我们直接上exampleex1：这里将函数aaa赋值给了ob对象内的fun，我们直接看ob.fun()这行，这里是由ob这个对象调用了aaa函数，因此this指向的就是ob，输出的就是1111而下一行我们直接执行aaa()，而调用aaa()的就是window，所以this指向window，输出的就是2222。看到这里是不是觉得很easy，我们再来看一个exampleex2:异曲同工，这把ob的fun的函
2020-11-26 14:51:08
94
原创 谈谈var变量提升以及var，let，const的区别
1.首先我们理解一个‘’提升‘’这个概念，意思就是无论var aaa =“我是var"这行代码在哪个位置，变量的声明都会被提升到所在作用域最前端执行，而变量的赋值则是在当前行执行，我们来个简单的例子2.ex11.第一行输出aaa，而此时在同一作用域中，下一行的var aaa=“我是var”,声明并赋值了，所以按照提升机制，var aaa 将提升到第一行，但是 aaa=“我是var"仍在console.log(aaa)之下，所以第一个输出undefined。2.接下来执行hhh()函数，依葫芦画瓢，同
2020-11-26 14:03:19
491
1
原创 宏任务与微任务
其实关于宏任务与微任务网上的博客讲的都非常好。我这里记录一下自己的理解，以便日后方便复习整理。1.那么首先我们要理解js运行的机制，这里引入一个Event Loop的图图片摘自https://www.jianshu.com/p/bfc3e319a96b图片摘自https://www.cnblogs.com/fangdongdemao/p/10262209.html其实上述两个图已经可以很清晰的看清楚机制了，我们可以宏观的认为整个js运行任务就是宏任务，在宏任务内部，优先运行微任务，再运行宏任务，.
2020-11-26 12:37:32
750
原创 Promise机制(持续更新中)
promise这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学
2020-11-26 09:03:34
116
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人