- 博客(36)
- 收藏
- 关注
原创 如何解决跨域问题
1.1理解跨域 跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。 浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。 比如你在www.垃圾网站.com试图通过ajax或者是fetch发起请求访问www.银行.com,并进行某些操作,对比一看主域名不同(垃圾网站/银行),就会被拒绝 1.2解决跨域问题 但是某些情况下我们需要像后台的服务器请求数据,就不得不涉及跨域,那么如何解决呢?
2022-02-28 11:39:06
3672
原创 初步理解闭包
1.1理解闭包 定义:当函数可以记住并访问所在的词法作用域(涉及到作用域和作用域链的相关知识) 闭包本质上就是一个函数,但是他能够访问其他函数的作用域。 闭包最简单的实现方式就是,一个函数内部再创建并返回一个函数,那么这个内部函数就被称为闭包。 这个函数持有对外部函数执行上下文的一个引用,可以访问到外部函数的变量等等 1.2闭包的特性 闭包可以解决变量命名冲突问题 可以保护私有变量 但是由于闭包一直持有对外部函数的引用,所以外部函数在内存中无
2022-02-28 11:31:40
306
原创 Vue原理(持续更新...)
模板编译Vue的模板,看着像html,但是并不是真正的html,因为他有指令,差值,JS表达式;所以模板到底是什么?1.前置知识:JS的with语法with改变{}内自由变量的查找规则,当作obj属性来查找如果找不到匹配的obj属性就会报错with要慎用。它打破了作用域规则,易读性变差2.vue-template-compiler将模板编译成render函数首先模板不是html这是肯定的,因为html...
2022-02-18 22:38:01
299
原创 实现数组转对象(reduce)
// 数组转对象 let arr = [{id:1,name:'张三'},{id:2,name:'李四'},{id:3,name:'王五'}]; let transToObj = function(arr) { if(!Array.isArray(arr)) throw '参数错误'; return arr.reduce((pre,cur,index,arr)=>{ ...
2022-01-29 16:54:27
5608
原创 JS实现数组降维
1.flat()方法方法接受一个参数表示要降多少个维度,如输入1,表示将原数组的维度减一,如果输入Infinity则表示将原数组的维度将为1 let arr = [1,[2,3,[4,5,[6,7]]]]; let newArr = arr.flat(Infinity) console.log(newArr); //(7)[1, 2, 3, 4, 5, 6, 7]2.手写递归实现参数:数组返回值:数组...
2022-01-29 16:43:38
778
原创 浅拷贝&&深拷贝
浅拷贝浅拷贝值得是值的拷贝,地址也是值的一种。现提供以下2种实现方式:1.Object.assign方法可见assign方法是直接将obj的值赋值给了obj2,也就是obj和obj2指向同一个对象。 // 浅拷贝的实现 let obj = { name:'张三', age:'10', parent:['a','b'] } let obj2= Object.
2022-01-29 16:15:46
835
原创 实现一个add函数 满足add(1,2,3)与add(1)(2)(3)结果相同
柯里化函数的一个应用 function add(){ // 收集第一次传入的参数 // 同时这个数组还用于存储后续传入的参数 let _args = [...arguments]; // 收集后续的函数 let getArgs = function(){ _args.push(...arguments) /
2022-01-28 19:13:41
609
原创 JS实现数组去重
// 方法1:排序+双指针 let arr = [1, 2, 1, 3, 5, 5, 4, 2, 4,3,5,4,7,8,9,5,4,6,1] function removeDuplciation(arr) { arr.sort((a, b) => a - b); let slow = 0; for (let i = 1; i < arr.length; i++) { ...
2022-01-28 19:11:21
664
原创 实现一个红绿灯(3s打印red,2s打印green,1s打印yellow)
// 实现一个红绿灯 async function printColor(color,time){ return new Promise((resolve,reject)=>{ setTimeout(()=>{ console.log(color); resolve() },time) ...
2022-01-28 14:02:46
695
原创 手写intanceof
A instanceof B。instanceof关键字用于判断一个对象A是不是构造函数B的实例。其原理就是如果A的原型链上有B的原型,那么就返回true,否则就返回false; // 手写instanceof function _instanceof(obj1,OBJ){ // 实例对象的原型 let proto = obj1.__proto__; // 终止条件:因为原型链的尽头是null
2022-01-27 17:36:31
162
原创 用reduce实现map
array.reduce(function(total, currentValue, currentIndex, arr){}, initialValue);total 必需。初始值, 或者计算结束后的返回值。currentValue 必需。当前元素currentIndex 可选。当前元素的索引arr 可选。当前元素所属的数组对象。initialValue可选。传递给函数的初始值array.map(function(currentValue,index,arr), thisA...
2022-01-27 17:20:51
195
原创 [‘1‘, ‘2‘, ‘3‘].map(parseInt)返回值
array.map(function(currentValue,index,arr), thisValue)function(currentValue,index,arr):回调函数currentValue:当前值 index:当前值的索引 arr:调用该方法的数组thisValue:用于给function显式绑定thisparseInt(string, radix);如果 radix 是 undefined、0或未指定的,JavaScript会假定以下情况:如果输入的 ...
2022-01-26 23:00:13
334
原创 Vue响应式
组件data的数据一旦变化,立刻触发视图的更新 数据驱动视图的第一步1.核心API-Object.defineProperty1.1回顾Object.definePropertyObject.defineProperty(obj, prop, descriptor) obj:要定义属性的对象。 prop:要定义或修改的属性的名称或Symbol。 descriptor:要定义或修改的属性描述符。参考:Object.defineProperty() - JavaScri...
2022-01-26 17:02:46
185
原创 如何理解MVVM
M:model 对应data中的数据V:视图 对应模板VM:视图模型 对应Vue实例对象MVVM模型,将数据和视图分开管理,实现了代码的分层,更容易管理。View——>DOM Listeners——>Model:当视图中触发了点击事件,就会被视图模型VM监听到,随后可以去更改Model中的数据。Model——>Data Bindings——>View:当模型中的数据发生了变化,由于视图数据和模型数据有绑定关系,就会使视图产生变化适应我们新的数据。所以,省去
2022-01-26 11:12:09
68
原创 手写forEach
1.forEach摘自js forEach参数详解,forEach与for循环区别,forEach中如何删除数组元素 - 听风是风 - 博客园forEach也属于完整遍历数组的方法,并会对数组每项元素执行提供的回调函数。arr.forEach(function(self,index,arr){},this);self:数组当前遍历的元素,默认从左往右依次获取数组元素。index:数组当前元素的索引,第一个元素索引为0,依次类推。...
2022-01-25 17:44:35
450
原创 手写call、apply
call函数可以实现对函数this的显示绑定。将一个函数的this指向显示的绑定到某一个指定的对象上,并运行这个函数。本来呢我们写的函数默认是挂载在window对象实例上面的,如果要改变函数内部的this指向,那么call和apply采用的思想就是把这个函数也挂载一份到我们这个目标对象身上。这样目标对象直接调用这个函数,通过隐式绑定就把this绑定到了我们这个目标对象 // 手写call // call函数负责将函数的this绑定到指定的对象,并执行这个函数一次
2022-01-25 15:15:51
185
原创 手写bind
bind是一个硬绑定,接收一个对象Obj和一个函数Fun,将Fun的this指向Obj且返回一个新函数newFun。如此一来,Fun的this将永远指向Obj无法改变,也就是硬绑定 function fun(){ console.log(this.name); }; const obj1 = { name:'张三', } function _bind(func,obj){
2022-01-24 22:50:36
1339
原创 手写Promise.all
1.原生promise.all运行机制输入为Iterator类型的参数,可以是Array,Map, Set,String ,可能也得包括魔改的Iterator(Symbol.iterator)之类 若输入的可迭代数据里不是Promise,则也需要原样输出 返回一个Promise实例,可以调用then和catch方法 输出在then里体现为保持原顺序的数组 输出在catch体现为最早的reject返回值 空 Iterator, resolve返回空数组 // 实现pr
2022-01-24 14:14:02
247
原创 手写Promise核心代码
1.框架构建 class _Promise{ // 定义状态并立即执行excutor函数 constructor(){}; // 修改状态为fufilled resolve(){}; // 修改状态为reject reject(){}; // 根据excutor函数的结果执行对应的回调 then()
2022-01-22 23:15:10
479
原创 var\let\const
一个变量的创建分为三部:声明(提升到作用域顶部) 初始化(开辟内存并赋予默认值undefined) 赋值varvar类型变量声明之后会经历变量提升,紧接着会被初始化为undefined,最后等代码执行到变量的创建位置时再给这个变量赋值。let/const这两种类型也存在变量提升,但是不存在初始化阶段,也就是说将声明提升之后,没有进行内存的分配,这时候在其被赋值之前是没法使用的,也就是产生了一个暂时性死区(DTC),直到代码执行到变量的创建位置完成赋值之后...
2022-01-19 19:14:15
435
原创 JS中实现继承的部分方式(原型链、构造函数、组合继承)
这里不谈原型式继承、寄生式继承以及寄生组合继承1、原型链继承 //原型链继承:子类原型指向父类的实例对象 function People(){ this.name = '张三'; } People.prototype.speak = function(){ console.log(this.name+'正在说话'); } // 子类,目前和People类.
2022-01-19 15:49:37
418
原创 JS手写节流
节流为的是方式频繁的触发事件,因此设定事件按照一定的间隔触发<!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-s
2022-01-18 23:13:51
293
原创 垂直居中、水平居中
垂直居中布局垂直居中我感觉可以分为两个部分:1.内容垂直居中文本内容的垂直居中通过line-height实现,具体取值为height-paddingTop+paddingBottom;2.盒子垂直居中position+transform实现。(引出问题:为什么不用marginTop??涉及到重排和chong'hu) /* <div class="father"> <div class="child"> ...
2022-01-18 17:29:24
179
原创 line-height属性实现文本垂直居中和padding的关系
使用line-height:height进行垂直居中时,发现了个小问题,如果说盒模型有padding,那么line-height的值就不能简单的设为height。经过总结发现此时line-height的值应该设为:height-paddingTop+paddingBottom,同时border和margin对line-height的值不会产生影响,如下图,但是说如果用的时padding-top,那么line-height的值应该就是300px大家可自...
2022-01-18 12:14:53
425
原创 this绑定问题
这个问题可以分为两个方面进行分析: 箭头函数 普通函数箭头函数的this绑定机制箭头函数的this是其词法作用域所提供的,也就是箭头函数的外部作用域所提供的,箭头函数其本身并不接受this普通函数的this绑定机制要弄清普通函数的this绑定机制首先要明确该函数的调用位置。找到调用位置后根据以下规则进行判断:默认绑定:在代码中出现诸如:foo(),该函数是直接使用不带任何修饰的函数引用进行调用的,因此只能使用默认绑定,因此this指向全局对象window...
2022-01-17 22:33:21
2319
原创 手写new
回想我们平时怎么使用new的 function Person(age){ this.age = age; } let person = new Person(10);可见new 接受的是一个构造函数。总结下new的执行过程:创建一个空对象。 进行原型连接, 调用我们的构造函数,并将该构造函数的this指定为我们创建的空对象。 如果我们的构造函数没有返回值,那么我们就返回我们创建的这个对象,否则就返回构造函数所返回的
2022-01-17 21:55:34
118
原创 CSS——三栏布局
html模板如下:<!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-scale=1.0"> <
2022-01-17 21:00:26
69
原创 四种清除浮动的方法
为什么要清除浮动?清除浮动的本质:主要为了解决父级元素因为子级浮动引起内部高度为0的问题。也称为高度塌陷。清除浮动的方式清除浮动总体上可以分为两个大类:通过clear:both样式实现清除浮动 手动添加一个标签并指定样式为clear:both;缺点:多出无意义的标签 <div class="father"> <div class="child1"> 我是1号子盒子 </div> <di...
2022-01-17 15:46:39
174
原创 BFC块级格式上下文(Block Formating-context)
写在前面 本文来自对各个博主文章的摘录,如有侵权请联系删除。BOXBox 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。不同类型的 Box, 会参与不同的 Formatting Context 进而决定如何渲染这个盒子。盒子一共有如下种类: block-level box:display 属性为 block, list-item, ta...
2022-01-17 15:29:04
70
原创 什么是文本流和文档流?为什么文本会超出盒子宽度?为什么会超出高度?
文档流:相对于盒子模型讲的文本流:相对于段落讲的元素浮动之后(float布局)元素则会脱离文档流,也就是说当他后面还有元素时,其他元素会无视他所占据了的区域,直接在它身下布局。但是文字、图片、表单等元素依然会为这个脱离了文档流的元素让出位置,会认同浮动元素所占据的区域,围绕着它布局,也就是说浮动元素没有脱离文本流。绝对定位后,不仅元素盒子会脱离文档流,同时也会脱离文本流,那么后面元素的文本就不会认同该元素的位置了,直接在它下面而不会环绕。示例一:蓝色区域为左浮动,因此其脱离了...
2022-01-17 11:57:51
1167
原创 vue练手项目(day5:axios\vuex、实现向服务器请求数据并展示)
1.开发流程一般前端获取数据并展示的时候,数据是从服务器上得到的,所以此时后端会把服务器接口文档给我们,我们通过访问后端接口拿到数据并进行展示。2.通过axios获取数据 和axios相关的内容一般都放在api文件夹内,requests.js放置axios对象,index.vue放置服务器接口方法,并将这些接口对外暴露,则外部可以通过这些方法实现向后端服务器接口的请求。同时也实现了接口方法的统一管理2.1创建axios实例对象 请求是通过axi...
2021-12-28 13:54:53
886
原创 vue练手项目(day4:重写push和replace、完成Home的子组件)
1.重写$router.push1.重写$router.replace
2021-12-26 11:51:12
721
原创 vue练手项目(day3:路由组件间传参)
1.路由组件间传参的三种方式 query参数:传递query参数只需要在路由地址后面通过?声明即可,即问好后面所跟的key-value键值对就会被目标路由组件所接受到,那么就可以通过路由组件的query属性进行访问了 // 2.query参数,query参数是直接写在路径中的,用?作为标识符 this.$router.push(`/search?keyword=${this.key}`) params参数:传递para...
2021-12-24 19:42:27
596
原创 vue练手项目(day2:路由元信息控制底部组件是否显示和函数式路由编程)
分析页面发现,当页面处于home和search页面的时候Footer组件是可见的,但是当页面处于login和register的时候Footer是不可见的,这时候自然可以相到要用条件渲染:v-if或者是v-show;但是用哪个呢?一般来说v-if会对真实dom进行操作,选择要不要把dom挂载到页面上,而v-show是通过display样式控制是否显示元素,所以从效率上来看用v-show比较合适。那么v-show接受的是一个Boolean值,那么通过哪个值来控制页面是否显示呢? ...
2021-12-23 00:21:38
687
原创 vue练手项目(day1:静态组件和路由组件)
0.环境准备安装好node vue webpack 配置好淘宝镜像 项目启动后浏览器自动打开,这样就省去了每次启动项目后手动点击链接启动浏览器的麻烦,配置方法如下,在package.json中找到如下代码,并将 "serve": "vue-cli-service serve''改为"serve": "vue-cli-service serve --open", "scripts": { "serve": "vue-cli-service serve --open", ...
2021-12-21 23:09:08
573
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人