- 博客(15)
- 收藏
- 关注
RSS订阅原创 Vue3对比Vue2的改动有哪些
1. Vue 3.0 性能提升主要是通过哪几方面体现的？1.响应式系统提升vue2在初始化的时候，对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象，还会递归调用defineproperty使之变为响应式对象。vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，.
2021-08-31 16:54:25
1511
原创 JS 继承
function Father(name) { // 实例属性 this.name = name // 实例方法 this.sayName = function() { console.log(this.name) }}// 原型属性Father.prototype.age = 19// 原型方法Father.prototype.sayAge = function() { console.log(this.age)}1.原型链继承将父类的实例作为子类.
2021-08-09 20:40:42
88
原创 new 运算符原理
创建一个空对象 让空对象的 __proto__ (IE 没有该属性) 成员指向构造函数的 prototype 成员对象 使用 apply 调用构造函数，属性和方法被添加到 this 引用的对象中 如果构造函数中没有返回其他对象，那么返回 this，即创建的这个新对象；否则，返回构造函数返回的对象 function Dog(name,age){ this.name = name this.age = age ...
2021-08-09 20:33:34
92
原创 instanceof 原理
用来测试一个对象是否在其原型链中是否存在一个构造函数的 prototype 属性function Person() {}function Foo() {}// 原型继承Foo.prototype = new Person()const foo = new Foo()console.log(foo.__proto__ === Foo.prototype) // trueconsole.log(foo instanceof Foo) // trueconsole.log(Foo.pr.
2021-08-09 20:30:42
85
原创 一文解决原型与原型链
1.原型对象什么是原型对象呢？有以下几点：1.构造函数有一个prototype属性，指向构造函数的原型对象。而实例有一个__proto__属性，也指向原型对象。PS: 准确的说，实例指向原型对象的是[[Prototype]]属性，但这是一个隐式属性，脚本不可访问。因此浏览器厂商提供了一个属性__proto__，用来显式指向原型对象，但它并不是ECMA规范。如下图一所示注意函数的是prototype属性，实例的是__proto__属性function Person(name...
2021-08-09 14:28:41
110
原创 常用数组Array的API
目录1.创建数组 Array.from Array.of()2.模拟栈方法（push，pop）3.模拟队列方法（push，shift）(unshift,pop)4.排序方法sortreverse5.操作方法concatslicesplice6.搜索和位置方法indexOflastIndexOfincludesfind7.迭代方法everyfilterforEachmapsome8.归并方法reduce...
2021-08-06 19:19:33
542
原创 JS的数据类型以及如何检测数据类型
JS数据类型：1.基本数据类型：Undefined,Number,String,Boolean,Null,Symbol(es6),Bigint(es10)2.引用数据类型Array,Function,Object数据类型检测方法1.typeof typeof 1 "number" typeof 'abc' "string" typeof true "boolean" typeof {} "object" ty
2021-08-04 21:28:48
113
原创 call,apply,bind三者区别
apply，call，bind三者的区别 var a = { name:'a', fn(){ console.log(`我的名字是${this.name}`) } } var b = a.fn b()//我的名字是undefined如果只是a.fn();可以正常打印结果（我的名字是a）；而此时var b = a.fn,此时调用函数的是在window环境下的b,但window下没有属性...
2021-08-04 18:31:16
75
原创 圣杯布局以及双飞翼布局
圣杯布局以及双飞翼布局都是三栏布局的实现方式之一，只是实现方式不同而已1.圣杯布局1.将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）2.middle部分 width:100%占满3.此时middle占满了，所以要把left拉到最左边，使用margin-left:-100%4.这时left拉回来了，但会覆盖middle内容的左端，要把middle内容拉出来，所以在外围box加上 padding:0 200px 0 20
2021-08-01 17:13:04
250
原创 数组扁平化处理
数组扁平化概念数组扁平化是指将一个多维数组变为一维数组以下例子统一vararr=[1,[2,3,[4,5,6]],7]1.flat(Infinity)console.log(arr.flat(Infinity))//(7)[1, 2, 3, 4, 5, 6, 7]2.正则表达式 const arr2 = JSON.parse('[' + JSON.stringify(arr).replace(/\[|\]/g,'') + ']') console.log(ar...
2021-07-28 13:15:29
70
原创 实现防抖节流
防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间解决方法：每次触发事件时都取消之前的延时调用方法<body><input type="text" name="" id="in"><script type="text/javascript"> function debounce(delay,cb){
2021-07-26 16:24:03
176
原创 内容水平垂直居中的几种方法
1.margin:auto法原理：如果设置了绝对定位并且上下左右全部为0(不能只设置上左或者其他的任意两方向),那么他会填充整个父元素的所有可用空间,那么auto就有了作用,会平均分配剩余的空间2.margin负值法使用margin-top,margin-left，值各为width和height的一半。或者将transform:translate(-50%,-50%)实现3.table-cell4.利用flex将父元素设置为display...
2021-05-11 22:28:00
341
原创 JS的异步处理方案
1.回调地狱const fs = require('fs');fs.readFile('./1.txt','utf8',(err,result1) => { console.log(result1) fs.readFile('./2.txt','utf8',(err,result2) => { console.log(result2) fs.readFile('./3.txt','utf8',(err,result3) => { console.log(resul
2021-04-28 00:40:18
324
1
原创 浅拷贝与深拷贝区别与实现
实现浅拷贝浅拷贝中，浅拷贝只是拷贝了它在栈中存储的指针，它们指向的都是同一个堆内存地址，所以浅拷贝在某些情况会造成改变数据后导致别的另一份数据也同步被改变的情况；1.for...in...手动实现浅拷贝只需for...in...循环把oldobj里元素值遍历赋值给进新对象；2.object.assign()深拷贝的实现深拷贝是直接将堆内存中存储的数据直接复制一份，不会有浅拷贝互相影响的问题。1.递归实现手动实现深拷贝只需封装一个函数，做一个是否为对象或.
2021-04-24 16:38:51
168
原创 WebSocket(socket.io + node.js)聊天室
记录项目：制作一个基于socket.io和node.js的聊天室socket.io的api用法详细看https://socket.io/前端效果显示：1.登录界面2.群聊页面3.私聊页面前端页面分三个盒子1.登录盒子2.群聊盒子3.私聊盒子逻辑：登录username作为唯一标识，在登录时用户名设置为不允许重复；登录成功登录盒子display:none,群聊盒子display:block;左侧用户栏点击私聊人头像将私聊盒子打开，群聊盒子隐藏；再次点击就回到群聊.
2021-04-22 16:52:09
342
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人