- 博客(36)
- 收藏
- 关注
RSS订阅原创 如何解决跨域问题
1.1理解跨域 跨域指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。 浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。 比如你在www.垃圾网站.com试图通过ajax或者是fetch发起请求访问www.银行.com，并进行某些操作，对比一看主域名不同（垃圾网站/银行），就会被拒绝 1.2解决跨域问题 但是某些情况下我们需要像后台的服务器请求数据，就不得不涉及跨域，那么如何解决呢?
2022-02-28 11:39:06
3634
原创 初步理解闭包
1.1理解闭包 定义：当函数可以记住并访问所在的词法作用域（涉及到作用域和作用域链的相关知识） 闭包本质上就是一个函数，但是他能够访问其他函数的作用域。 闭包最简单的实现方式就是，一个函数内部再创建并返回一个函数，那么这个内部函数就被称为闭包。 这个函数持有对外部函数执行上下文的一个引用，可以访问到外部函数的变量等等 1.2闭包的特性 闭包可以解决变量命名冲突问题 可以保护私有变量 但是由于闭包一直持有对外部函数的引用，所以外部函数在内存中无
2022-02-28 11:31:40
265
原创 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
268
原创 实现数组转对象（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
5583
原创 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
734
原创 浅拷贝&&深拷贝
浅拷贝浅拷贝值得是值的拷贝，地址也是值的一种。现提供以下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
807
原创 实现一个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
575
原创 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
655
原创 实现一个红绿灯（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
674
原创 手写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
151
原创 用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
177
原创 [‘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
319
原创 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
160
原创 如何理解MVVM
M：model 对应data中的数据V：视图 对应模板VM：视图模型 对应Vue实例对象MVVM模型，将数据和视图分开管理，实现了代码的分层，更容易管理。View——>DOM Listeners——>Model：当视图中触发了点击事件，就会被视图模型VM监听到，随后可以去更改Model中的数据。Model——>Data Bindings——>View：当模型中的数据发生了变化，由于视图数据和模型数据有绑定关系，就会使视图产生变化适应我们新的数据。所以，省去
2022-01-26 11:12:09
57
原创 手写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
427
原创 手写call、apply
call函数可以实现对函数this的显示绑定。将一个函数的this指向显示的绑定到某一个指定的对象上，并运行这个函数。本来呢我们写的函数默认是挂载在window对象实例上面的，如果要改变函数内部的this指向，那么call和apply采用的思想就是把这个函数也挂载一份到我们这个目标对象身上。这样目标对象直接调用这个函数，通过隐式绑定就把this绑定到了我们这个目标对象 // 手写call // call函数负责将函数的this绑定到指定的对象，并执行这个函数一次
2022-01-25 15:15:51
175
原创 手写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
1320
原创 手写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
239
原创 手写Promise核心代码
1.框架构建 class _Promise{ // 定义状态并立即执行excutor函数 constructor(){}; // 修改状态为fufilled resolve(){}; // 修改状态为reject reject(){}; // 根据excutor函数的结果执行对应的回调 then()
2022-01-22 23:15:10
452
原创 var\let\const
一个变量的创建分为三部：声明（提升到作用域顶部） 初始化（开辟内存并赋予默认值undefined） 赋值varvar类型变量声明之后会经历变量提升，紧接着会被初始化为undefined，最后等代码执行到变量的创建位置时再给这个变量赋值。let/const这两种类型也存在变量提升，但是不存在初始化阶段，也就是说将声明提升之后，没有进行内存的分配，这时候在其被赋值之前是没法使用的，也就是产生了一个暂时性死区（DTC），直到代码执行到变量的创建位置完成赋值之后...
2022-01-19 19:14:15
427
原创 JS中实现继承的部分方式（原型链、构造函数、组合继承）
这里不谈原型式继承、寄生式继承以及寄生组合继承1、原型链继承 //原型链继承：子类原型指向父类的实例对象 function People(){ this.name = '张三'; } People.prototype.speak = function(){ console.log(this.name+'正在说话'); } // 子类，目前和People类.
2022-01-19 15:49:37
397
原创 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
286
原创 垂直居中、水平居中
垂直居中布局垂直居中我感觉可以分为两个部分：1.内容垂直居中文本内容的垂直居中通过line-height实现，具体取值为height-paddingTop+paddingBottom;2.盒子垂直居中position+transform实现。（引出问题：为什么不用marginTop？？涉及到重排和chong'hu） /* <div class="father"> <div class="child"> ...
2022-01-18 17:29:24
161
原创 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
400
原创 this绑定问题
这个问题可以分为两个方面进行分析： 箭头函数 普通函数箭头函数的this绑定机制箭头函数的this是其词法作用域所提供的，也就是箭头函数的外部作用域所提供的，箭头函数其本身并不接受this普通函数的this绑定机制要弄清普通函数的this绑定机制首先要明确该函数的调用位置。找到调用位置后根据以下规则进行判断：默认绑定：在代码中出现诸如：foo()，该函数是直接使用不带任何修饰的函数引用进行调用的，因此只能使用默认绑定，因此this指向全局对象window...
2022-01-17 22:33:21
2292
原创 手写new
回想我们平时怎么使用new的 function Person(age){ this.age = age; } let person = new Person(10);可见new 接受的是一个构造函数。总结下new的执行过程：创建一个空对象。 进行原型连接， 调用我们的构造函数，并将该构造函数的this指定为我们创建的空对象。 如果我们的构造函数没有返回值，那么我们就返回我们创建的这个对象，否则就返回构造函数所返回的
2022-01-17 21:55:34
111
原创 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
57
原创 四种清除浮动的方法
为什么要清除浮动？清除浮动的本质:主要为了解决父级元素因为子级浮动引起内部高度为0的问题。也称为高度塌陷。清除浮动的方式清除浮动总体上可以分为两个大类：通过clear：both样式实现清除浮动 手动添加一个标签并指定样式为clear：both；缺点：多出无意义的标签 <div class="father"> <div class="child1"> 我是1号子盒子 </div> <di...
2022-01-17 15:46:39
165
原创 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
61
原创 什么是文本流和文档流？为什么文本会超出盒子宽度？为什么会超出高度？
文档流：相对于盒子模型讲的文本流：相对于段落讲的元素浮动之后（float布局）元素则会脱离文档流，也就是说当他后面还有元素时，其他元素会无视他所占据了的区域，直接在它身下布局。但是文字、图片、表单等元素依然会为这个脱离了文档流的元素让出位置，会认同浮动元素所占据的区域，围绕着它布局，也就是说浮动元素没有脱离文本流。绝对定位后，不仅元素盒子会脱离文档流，同时也会脱离文本流，那么后面元素的文本就不会认同该元素的位置了，直接在它下面而不会环绕。示例一：蓝色区域为左浮动，因此其脱离了...
2022-01-17 11:57:51
1107
原创 vue练手项目（day5：axios\vuex、实现向服务器请求数据并展示）
1.开发流程一般前端获取数据并展示的时候，数据是从服务器上得到的，所以此时后端会把服务器接口文档给我们，我们通过访问后端接口拿到数据并进行展示。2.通过axios获取数据 和axios相关的内容一般都放在api文件夹内，requests.js放置axios对象，index.vue放置服务器接口方法，并将这些接口对外暴露，则外部可以通过这些方法实现向后端服务器接口的请求。同时也实现了接口方法的统一管理2.1创建axios实例对象 请求是通过axi...
2021-12-28 13:54:53
865
原创 vue练手项目（day4：重写push和replace、完成Home的子组件）
1.重写$router.push1.重写$router.replace
2021-12-26 11:51:12
685
原创 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
581
原创 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
676
原创 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
560
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人