weixin_42458965的博客

原创 js中Array.sort()的底层原理

js sort原理v8引擎 Array源码（710行开始）不同内核浏览器下，sort()实现的不同

原创 :nth-child()与:nth-of-type()区别

原创 学习webpack流程原理优化，看这一篇就够了！（持续更新纠正）

1webpack生命周期1初始化阶段2开始编译（run,并且注册plugins,把他们都注册在complier对象上）3编译构建（编译方法执行，转化为AST，并且执行loader）4输出阶段2loader和plugin详细介绍2.1loaderloader是我们 webpack 的“翻译官”，例如我们在项目中使用到的css, less, sass，会通过loader解析为我们 webpack 认识的。（webpack只认识js模块）。loader的使用：test是通过正则进行匹配，执

原创 父组件传递对象，不写key会自动解耦

v-bind = “obj” obj = { name: 'xiaoming', age: 22}

原创 async/await异步请求同步执行

异步请求，等待执行。aysnc/await原理 let fun1 = function(){ return new Promise((resolve, reject)=>{ setTimeout(()=>{ console.log('1') resolve() }, 1000) }) } let fun2 = function(){ return new Promise((resolve, reject)=>{

原创 svg和canvas的区别

svg是线条图，和分辨率无关.。方法缩小依旧可以高清显示适应cavans是基于像素的，可以对每个像素点进行操作。SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。Canvas 通过 JavaScript 来绘制 2D 图形。Canvas 是逐像素进行渲染的。在

原创 head和option请求方式

head和get方式是一样的，但是只是响应中只有响应头，没有返回数据option方法，是一种“试探连接”（ping操作），并且放回当前url可以请求的方式（get,post等）

原创 get/post请求的终极区别，幂等性

原创 大厂面试常考：手写promise.all()

// promise.all使用// Promise.all([]: Array): Array1参数为promise对象数组2返回的是一个promise对象,并且resolve()传递一个promise对象数组给之后的then操作3当全部返回时才进行使用,也就是conut === promiseArray.length是进行resolve(reslut)操作4必须是一个回调,因为每个请求的响应事件不一样,有长有短,所以需要使用回调进行’未来时’操作,进行计数Promise.prototype.

原创 promise,generator,async/await三者关系的弯弯绕绕

起因：我们的js的异步是使用回调进行实现，而它有记得缺点缺乏可信度，回调嵌套（回调地狱）后面我们使用promise来进行解决，以then操作的形式，进行链式操作，而不再是回调地狱而我们的generator（生成器）实则就是一个打断点执行的操作。通过next,yield进行一步步的操作后来我们发现可以吧generator和promise进行结合实现完美的promise操作。后面就是有我们的async/await操作推荐书籍：你不知道的javascript中，第三章promise资料...

原创 vuex监听数组无法更新

vuex中的state是存在内存里，以一种方式进行全局注入通过取值的方法，this.$store.state可以看出，在vue中创建了一个state对象。而我们的vue2中对数组的双向绑定时通过对数组的操作方法进行重写。所以有些情况无法监听解决方式1深拷贝一个新的数组，并重新赋值给旧的数组2vue.$set()...

原创 浅析模块化commonjs,AMD,ESmodule

https://juejin.im/post/6844903576309858318#heading-3https://juejin.im/post/6844904056847073293#heading-6https://juejin.im/post/6844904066233925639#heading-2

原创 浅析vue3.0中的Proxy双向绑定

Vue2.0中的双向绑定使用object.defineProperty()进行双向绑定缺点：1无法对数组进行监听，采用的是对数组的方法进行重写（push, pop,shift,unshift等等）。对此进行双向绑定和数据监听的操作2效率差，这主要是因为对多层数据进行一次性的递归操作，如果数据很多或者是很深层次，这样性能非常的差3因为局限性，无法对新加/删除的数据进行监听，所以使用在vue2.0中使用$set进行手动添加所以在vue3.0中使用的proxy代理的方式进行解决使用proxy和Ref

原创 码农？工程师？傻傻分不清楚

前言作为一个二流大学的本科生，我很庆幸我选择了计算机这个高薪的行业。师傅领进门，修行在个人，以后的道路需要自己选择，自己摸索，自己走。计算机也有着很多的方向，前端，后端，运维，测试，算法，人工智能等等。而我在机缘巧合之下选择了前端方向。我是21届的应届生，面对着社会和未来，我感到了迷茫。早早的实习，让我感觉我愈发的像一个码农，面朝黄土背朝天的辛勤的工作者。每天干着同样的事情，为了生活而努力搬砖。然而，搬砖一年多，功力没看见有丝毫的长进，还是武功平平。知道一次面试，面试官的话让我醍醐灌顶一般。场景复现

原创 来看一看css像素，物理像素，设备独立像素的关系g啊

1像素是组成屏幕或者是图片的单位，但是并不能用长度进行衡量。不能说我们的像素是几毫米或者是几微米。他是一个相对的单位2分辨率分为图片分辨率和屏幕分辨率。例如：图片的分辨率为30164032，我们只能说这张图片是由宽3016的像素点高4032的像素点构成的。而我们的屏幕，1024720，是1024720个物理像素点组成。图片的这个所谓的像素点的决定因素是你的相机好不好。屏幕的物理像素决定因素是你的屏幕够不够高科技3 css像素我们写页面所说的宽100px,高200px的div这个像素就是

原创 浅析vue的服务端渲染

1首屏和白屏的区别2 SSR和预渲染3 防止数据交叉感染（采用工厂模式）4 在服务端上，不需要转化为响应式对象（节省开销）5 由于是没有动态更新的，所以在服务端中只会调用beforeCreate和created生命周期。其他的生命周期只在客户端执行6 “通用代码中”，在服务端不接受window或document这种浏览器变量7 我们为了防止数据污染，应该避免单例模式，而是暴露一个工厂函数，当每次请求的时候，我们都调用工厂函数来创建一个实例8 打包会生成“服务端bundle”和“客户端bun

原创 toFixed()返回类型

返回的是字符串坑！！！

原创 来看一看Map和WeakMap有什么不同之处

WeakMap和Map的升级版知识点1:Map是为了解决对象中的key只能为字符串的缺陷,//基本的对象const obj = { 'name': '张飞'，, 'age': 18}// Maplet m = new Map()a.set(obj,1)// 我们的Map是可以解决对象的key不能为对象的缺陷// 但是又随之而来了一个缺点，耗费内存，强引用什么是强/弱引用?就是创建引用之后,无法被垃圾资源回收机制进行回收的,就是强引用.强到你设置了null,也分不开const

原创 学习webpack,按照webpack官网指南，一步步的操作！！！

webpack官方指南知识点1：使用一个空的文件夹（webpack-demo）,npm init生成package.json不要使用脚手架vue-cli生成的vue项目知识点2：使用npm中的-D,-S,-g分别是什么？知识点3：npx和npm中的区别？知识点4：npm语句的原理？...

原创 http1.0，http1.1和http2.0，看看http的优化历程

http1.0版本我们的http1.0中，我们每次传输数据，都需要进行一次tcp连接。发一次请求，tcp连接一次，这样就好麻烦也好慢啊！http1.1版本那我们怎么办？于是，出现了http1.1版本，来解决这个问题。我们使用了keep-alive长连接的新技术，解决了上面的问题。我们现在是tcp连接一次，就可以发送很多次请求。是不是很好？但是，还是有缺陷，等上一次请求完了，我才能进行下一次的请求等待。（阻塞）啊，我还需要排队，好慢啊！！！http2.0版本好的，那最终方案http2.0出来了，我

原创 https中SSL加密过程详解，看这一篇就够了！

我们所说的https实际上就是安全版本的http，是http+ssl加密实现的。SSL握手协议1.客户端:发起一个 HTTPS 请求，请给我公钥2.服务器:这是我的证书，里面有加密后的公钥3.客户端:解密成功以后给服务器用公钥非对称加密后的随机数4.服务器:服务器返回确认收到随机数，以后就用它对称加密数据知识点1https使用的是对称加密和非对称加密的结合方式我们的证书验证部分采用的是非对称加密，信息传输部分采用的是对称加密建立之后是内容的双向传递需要安全，我们就需要加密1对称加密，用

原创 柯里化深度剖析（面试满分版）

https://www.jianshu.com/p/5e1899fe7d6bhttps://www.jianshu.com/p/2975c25e4d71

原创 手写实现js中常用继承

// 原型继承方式// 这种方法的继承的缺点： // 1. 父类的引用属性和原型对象的引用属性是所有实例共享的（共享就会存在污染）// 2. 创建子类实例时，无法向父类构造函数传参 // 3. 不能多继承// function Parent(a){// this.a = a // }// function Children(b){// this.b = b// }// Children.prototype = new Parent(1)// console.log(new

原创 手写实现js中的一个满分的instanceof

直接上代码，解析见注释// 使用示例function Person(){ console.log('person实例化')}let person = new Person()console.log(person instanceof Object)console.log(person instanceof Person)console.log(1 instanceof Number)let a = 1let b = '1'let c = falselet d = nullle

原创 js中的基本包装类型

我们的基本类型有六种，string,number,boolean,null,undefined,symbol我们的前三中都有基本包装类型。let a = new String(‘hello’)let a = ‘hello’他们两者是有区别的，a是一个对象，而基本类型string你可以想一下，我们的基本类型string为什么会有方法，不是应该对象才有方法的嘛？let a = ‘hello’a.strsub()因为我们js引擎中进行处理，基本类型处于‘只读模式’。js引擎做的操作let aa

原创 来看看为什么typeof null是object

https://www.cnblogs.com/xiaoheimiaoer/p/4572558.html总结一下，这是一个历史遗留问题，无法更改。是一个小bug吧，但无伤大雅。000标志位代表的是对象，而当为null（空指正的时候），也是000。所以我们说的typeof null 为对象详情见大佬文章...

原创 看看真正的new操作符，手写实现

// new 操作符function Person(a,b){ // 我们传递进来的this,表示的是谁调用了他 // 所以this代表的是person这个实例 // 下面两句是在实例中添加属性 this.personA = a this.personB = b this.testA=function() { console.log('testA') }}let person = new Person(11,2)console.log(person)// 规则// 1创建一个

原创 大厂常见面试题，EventLoop，宏观，微观任务

//请写出输出内容 async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); } console.log('script start'); setTimeout(f

原创 如何手写出一个满分的深拷贝惊艳全场？

深拷贝，就是开辟一个空间，并且进行赋值，而不是把引用地址进行赋值（浅拷贝）方法1JSON.parse(JSON.stringify(obj))但是是有缺点的，直接贴代码，详情见注释： let a = { b: [],//数组 c: {},//对象 d: 1, //基本类型 e: null,//typeof null === 'object' f: undefined,//类型为undefined g: function(){ consol

原创 为什么不推荐for...in遍历数组

我们一般来说，使用for…in来遍历对象，使用for…of来遍历数组我们强烈建议不要使用for…in来遍历数组为什么？？？因为for…in遍历的是对象的key或者是数组的下标。当然最重要的原因是，他会到原型链上寻找，遍历其中新增加的属性的key值for of遍历的是数组元素值,for in 遍历的是数组的索引（即键名）for of遍历的只是数组内的元素，for in 遍历的不只是数组内的元素，还有其新增的原型属性和索引for of 遍历Array.prototype.method=func

原创 看看真正的防抖节流，手撕源码手写实现

话不多少，全在注释里了直接上代码：// 节流，表示的是在规定时间内，只是触发一次操作// 那就分情况讨论，// 有规定时间内，第一次触发// 规定时间内，最后一次触发// 规定时间内，第一次和最后一次都触发// 使用时间戳实现,第一次被调用function throttle(callBack, delay){ let pre = 0 return function(...args){ if(Date.now() - pre > delay){ pre = Date.ne

原创 看看真正的bind,手撕原理手写实现

直接上代码，代码中有详细的备注例子 function fn(...args){ console.log(arguments) const a = this.a console.log(a) console.log(this) console.log(args) } let obj={ a:1, objFn: fn } obj.objFn.bind(this)() obj.objFn.bind(thi

原创 看看真正的call方法,手撕代码实现

我们现在先来看个小demo function fn(){ let a = this.a console.log(a) } let obj = { a: 1, objFn: fn } let obj2 = { a: 2, // objFn: fn } obj.objFn() fn.call(obj2) //打印结果：我们的call方法其实就是改变函数的上下文，或者说call方

原创 从import开始，手撕vue-router

首先，我们先来介绍一下两种不同的模式hash和history模式hash，就是url中#后面的字符串，因为我们是使用单页面应用，所以我们把hash值和页面进行一一对应，实现页面的跳转和切换。并且，我们对url的hash值进行实时监听。history，就是操控history的API，实现对历史记录的操作，例如回退，前进等。主要是使用history.pushState(data, title [, url])：往历史记录堆栈顶部添加一条记录；这个API来完成跳转，且无需加载页面。但是，history模式需

原创 在vue中，点击entry进行搜索

奉上截图，有疑问可留言，有更好的方案也可留言，互相交流！！！

原创 手撕promise！！！附上Promise源码，并一步步实现源码！

看看大佬们的文章吧！好文推荐！！！Promises/A+规范大佬详细解剖大佬手写promise给大佬们的文章点个赞吧！！！

原创 js函数实现参数默认值和可选参数的方法

// 定义时使用 = 进行赋默认值function doSome({a,b=2,c}){ console.log(a,b,c);}//调用时使用：进行赋值，传递的是一个对象doSome({a:5,c:22})// 5 2 22//参数列表方式function doSome(a,b=2,c){ console.log(a,b,c); }doSome(5,22)// 5 2 22...

原创 webpack必学，webpack优化详解（持续更新）

首先我们来介绍几个概念1webpack独立配置因为wenpack不仅仅是打包的工具，它有着两种模式，一种是开发模式dev,一种是生产模式product我们在配置的时候会按照需求不同，进行独立配置。会配置一个公共的，叫做webpack.base.confing.js，还有一个dev和peoduct的。使用配置时使用merge当我们需要dev： base + dev当我们需要product： base + product2打包的流程我们打包，输入命令npm run build，然后开始打包。其中

原创 webpack中的publicPath配置

https://blog.csdn.net/weixin_30892889/article/details/95862624?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.c

原创 制作统一样式的H5视频播放器

https://blog.csdn.net/ffffffff8/article/details/86626206