- 博客(30)
- 收藏
- 关注
RSS订阅原创 js原型与原型链
这里解释一下，就是tidy的__proto__是指向dog.prototype的，所以tidy.price可以访问到，而dog上面并没有price属性，而dog.__proto__是指向Function.prototype的，上面并没有price属性，直到null为止。因为前面我们说过，Function.prototype比较特殊，是一个函数对象，理论来说，右边应该Function.prototype,所以这里我也是比较疑惑的，都有__proto__的内置属性，用于指向创建它的构造函数的原型对象。
2022-12-18 10:27:15
258
原创 react中类组件this的指向问题
2.若是通过一个其他变量去接收该对象函数，然后再进行调用时，这时因为没有具体的对象去调用了，则函数this则是指向。若是一个普通函数直接被调用，那this默认是指向全局的，若是非严格模式下，则是指向window的。3.若是使用bind改变函数的this指向，则this则是指向bind传进来的对象，不会再改变。以上为react中类组件的this指向问题，有不足之处欢迎指正！1.当此对象直接调用该函数时，则该函数里的this则是指向该对象的。若是外层有普通函数，则跟外层普通函数的this指向一样。
2022-11-10 16:30:21
2052
原创 前端实现登录的步骤流程
因我们把登录请求写在了vuex的actions中，当点击登录按钮，我们需要把用户名和密码dispatch给vuex的actions中的Login，这时将发送请求给后端登录接口进行验证，后端则去数据库中查看用户名和密码是否正确，若正确，则返回一个token值给前端，否则则登录失败。
2022-10-26 17:22:46
5513
1
转载 浏览器工作原理
想要了解浏览器的工作原理，我们必须清楚浏览器的组成有哪些？以及各个部分功能。浏览器组成部分如图所示：除了请求到的内容页面。浏览器引擎：用来查询和操作渲染引擎的接口。渲染引擎：也叫做 “浏览器内核” ，用来解析 html、css 并将结果以网页的形式显示，不同浏览器内核不同，同理渲染引擎也不同。网络：用来网络调用，如前后端数据交互中的http请求。js 解释器：用来解释执行js代码。UI 后端：绘制基础原件，如组合框与窗口，提供平台无关的接口，内部使用操作系统的相应实现。
2022-09-13 09:51:46
628
原创 js的clientWidth、offsetWidth等
clientWidth = padding值*2（左右padding值） + width 值；clientHeight = padding值*2（上下padding值） + height 值；clientTop = border值（上边框值）clientLeft = border值（左边框值）
2022-09-11 22:24:47
373
原创 async/await
async的出现有时候可以让我们省略new Promise，直接return，但有些时候还是不能省略的，比如我们需要在setTimeout这种回调函数去return，然后来改变promise状态，但这是行不通的。，且await写在表达式的前面，表达式的返回值是一个promise对象，如果不是，会通过Promis.resolve() 转化为promise对象。命令后面的异步操作，因为他们需要等待上一步的完成，所以并不是同时触发的，会比较浪费时间，如。解决需要同时触发的多个await异步事件。...
2022-08-30 22:36:05
152
原创 vuex的使用
可以处理被触发的 action 的处理函数返回的 Promise，并且。state可以存储需要多个组件共同访问的数据，以及管理数据的状态。Action 就不受约束！我们可以在 action 内部执行。若是想要传参给getters，可以返回一个函数，使用如下。使用mapState简化其获取state的数据。辅助函数将组件的 methods 映射为。...
2022-08-29 17:53:25
131
原创 call，apply和bind的使用
c.call和apply都是对函数进行直接调用，而bind方法不会立即调用函数,而是返回一个修改this后的函数。a.call和bind传参一样，都是多个参数依次传入。b.接收的第一个参数都是this要指向的对象。b.apply只有两个参数，第二个参数为数组。a.三者都可以用来改变this指向。c.都可以利用后续参数传参。...
2022-08-03 19:42:53
156
原创 fetch请求
需要注意的是当接收到一个代表错误的HTTP状态码时（如404），从fetch()返回的Promise不会被标记为reject，1.除了xhr(jq,axios)发送请求外，fetch方式也可以发送请求，但fetch会修改resolve返回值的ok属性为false。方法必须接受一个参数要请求的路径，和一个可选参数。a.请求成功时，会得到请求的Response对象。b.请求失败时，会得到一个TypeError。无论请求成功与否，它都返回一个。...
2022-07-25 23:08:37
887
原创 git常用的命令
12.gitcheckout--file（file可以用gitstatus查看哪个文件被修改,这个命令可以使file在工作区的修改撤销）让这个文件回到最近一次。22.gitpush推送到远程仓库，若是本地仓库和远程仓库文件不一致的，可以先gitpull先解决冲突，在gitpush。9.gitreset--hard1094adb7将当前版本在回到之前的版本，hard后面为git的版本号。7.gitlog--pretty=oneline只显示git的历史版本号。...
2022-07-24 23:53:56
221
原创 跨域问题?如何解决跨域问题
当一个资源去请求另一个不同源的资源时，则会发起跨域请求，如果此时另一个不同源的资源不允许其跨域访问时，那么访问就会遇到跨域问题。1.中间服务器和前端服务之间的协议、域名、端口号都是相同的，则我们只需要通过axios请求中间服务器的url，则可以发起请求，在vue中，如图的代理服务器和客户端是同源的，则可以向代理服务器发起请求，在通过代理服务器向后端服务器发起请求。2.在通过中间服务器向后端服务发起请求，由于服务器间没有同源策略(没有经过浏览器)，则可以发起请求。（1）利用script标签，规避跨域。....
2022-07-21 20:49:13
407
原创 vant中tab标签栏下划线位置异常的解决方案
通过使用了vant2中的tab标签栏引入了vue项目，可以实现切换的效果，但在使用的过程中发现，标签栏的。我在渲染这个tab标签栏的组件使用了v-show的指令，导致了下划线位置出错的情况。在tab标签栏的tabs上有resize重绘这个方法，可以调用这个来解决这个问题。.如果项目中允许的话，可以将v-show改为v-if则可以解决这个问题。的情况，效果如下图所示，下划线位置和流行并没有对齐。在我的项目中我是用了第二种方法进行解决，效果如下。...
2022-07-16 19:46:17
3836
2
原创 防抖函数和节流函数使用
于是当一张图片加载完，我们就得调用一次刷新函数，这样当图片多的时候，降低了效率，这个时候就需要用到防抖函数来提高效率)，为了提高效率，我们就可以使用防抖函数来减少调用同一个函数的次数，进而提高效率。，但当详情页中有图片时，虽然组件已挂载完毕，但。(比如当我们在渲染详情页，我们需要获得。当我们在项目中一段时间内需要。...
2022-07-14 19:35:44
742
原创 Eslint
当我们在创建vue项目时，会有eslint这个选项，eslint是用来检查我们的语法格式是否有错误，为了方便检查，我们安装以下两个插件2.在vs-code里面安装Prettier - Code formatter插件,同时添加以下配置添加文件.prettierrc到C盘的用户下面接下来在settings.json里面添加以下代码最后，注意在打开项目时，要打开那个项目的根目录，即如下，这样插件才能生效...
2022-07-13 16:09:51
389
原创 form标签的name属性
表单中的 input 标签必须设置 name 属性，否则在提交表单时，用户在其中输入的数据不会被发送给服务器结果如下: 说明:后面是?从路由来看后面是query参数，但现在后面为空，则是因为input中没有加name的原因结果如下:总结:在form表单中，input中必须加name属性，则input输入的值才会被传递到参数中去...
2022-07-12 01:02:52
1761
原创 vue中v-for中的key的作用以及diff算法
由下图我们可以看到,diff算法就是当数据被修改时，直接在虚拟dom中进行对比，若发现有一致的，则保持原来页面真实dom不变，只渲染新修改的数据作用:若数据直接就渲染成了真实dom，则每次数据的修改，都会引起dom的重新渲染，(例如:在下图中的数据，第一次有两个人渲染到页面，而第二次增加了一个人，若没有虚拟dom，则第二次渲染还是需要在把前两个也重新渲染一次，这样就造成了浪费，若存在虚拟dom，则第二次渲染时，数据则会跟虚拟dom的数据进行对比，发现前两个人是一致的，则会把前面渲染的真实dom直接拿过来，只
2022-07-05 17:35:31
719
原创 vue-router的使用
vue-router是vue.js官方给出的路由解决方案，只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换 在组件中vue-router的用法嵌套路由的使用3.动态路由的使用扩展:a.在hash地址中，/后面的参数项,叫做'路径参数',路由中路径参数放在params中b.在hash地址中，?后面的参数项，叫做”查询参数”，路由中查询参数放在query中c.在this.$route中，path只是路径部分，不包含查询参数,而fullPath则是完整路径
2022-07-05 14:50:53
2616
原创 axios请求的封装方式
a.get请求b.post请求c.axios({})进行get或post请求方法一:将axios挂载到Vue的原型链上此方法的缺点：不利于api接口的复用，比如在不同组件内都要调用同一个接口，每个组件内都需要去调用，比较麻烦知识点:axios.create()可以拿来创建多个axios，当接口配置不一样时，可以创建出来多个axios，方便不同接口的调用...
2022-07-03 22:58:27
2438
原创 Vue2的部分知识总结
2.keep-alive的生命周期函数(include="name"表示缓存哪个，exclude="name"表示不缓存哪个)当组件被缓存时，会自动触发组件的deactivated生命周期函数当组件被激活时，会自动触发组件的activated生命周期函数注意点: 注意这个 要求被切换到的组件都有自己的名字，不论是通过组件的 选项还是局部/全局注册。若没有name，默认是注册时名称作用域插槽的使用说明:因为在父组件中无法访问到子组件中的数据，故使用了作用域插槽将数据传递给父组件
2022-07-02 23:52:15
183
原创 Vue.$nextTick()的使用
在DOM更新完后在执行回调函数，简单理解:就是当数据更新完，DOM渲染完毕后，在执行回调函数在Vue组件可以使用this.nextTick(fn) 使用此方法,fn为回调函数这里以一个input获取焦点为例
2022-07-01 21:39:41
645
原创 Vue2中兄弟组件的传值
在vue中非常常见的有父子组件通信和兄弟组件通信，而兄弟组件的通信就需要用到了事件总线(EventBus)，将总线作为2一个中间的桥梁进行通信因为在Vue实例的原型链上有着$emit,$on这些方法,所有我们可以借助Vue的实例作为通信的中间桥梁a. 创建一个Vue的实例对象(new Vue())，并绑定到Vue的原型链上，这样在任意组件中都可以调用b.在数据发送方，调用$emit('事件名称',要发送的数据)方法触发自定义事件c.在数据接收方，调用$on("事件名称",事件处理函数)方法注册一个自定义事件
2022-07-01 15:05:29
1159
原创 set和map的使用
Set对象是一些元素的集合(看到集合，我们就会联想到集合内的元素都是不重复),如果你在Set中添加已存在的元素，该元素不会被添加说明:若添加的是对象或者数组，则是看添加的是否是指向同一地址，若不是指向同一块地址，则可以都添加进去2.Set对象的方法运行结果如下: 运行结果如下:map对象和set对象的方法大致相同，map对象中的键值是有序的运行结果如下: 运行结果如下:运行结果如下: NaN也可以作为Map对象的键,虽然NaN和任何值都是不相等的，但两个NaN作为键名来说是没有
2022-06-30 23:13:54
472
原创 js的浅拷贝和深拷贝
对象和数组是引用类型，则只有这两个类型的复制才有深拷贝和浅拷贝之说，浅拷贝指新的对象只是复制了原来对象的引用而已(也就是指向了同一块地址)，而深拷贝是指新的对象复制了原来对象的内容，但地址与原来对象完全不一样，也就是说两者的改变不会相互影响Object.assign()方法属于浅拷贝运行结果如下: 以上可以看出次方法为浅拷贝将对象直接赋值给另一对象，这也是浅拷贝运行结果如下:a.递归函数进行深拷贝运行结果如下:b.使用JSON.parse和JSON.stringify 运行结果如下:
2022-06-30 00:09:31
101
原创 object的一些方法
注意点:当传入的对象的键为整数类型时,Object.keys()会返回有序的值组成的数组。与object.keys的区别是: 上面返回的是属性，而这返回的是属性值，与上述四种用法都一致，当传入的对象的键为整数类型时,Object.values()会返回有序的值组成的数组。object.entries方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（ enumerable）属性的键值对数组object.defineProperty和object.defineProperties的用法和区别
2022-06-29 20:46:09
426
原创 手写简易版的promise
Promise是一种抽象异步处理对象，Promise类的构造函数中使用一个参数,参数值为一个回调函数。该回调函数又使用两个参数,参数值分别为两个回调函数(resolve,reject),如果执行成功则调用resolve回调函数,否则执行reject回调函数如下代码，promise是一个类，所有我们可以用构造函数来进行实现，promise中可以传入一个参数，参数值为一个函数((resolve,reject) => {}),其参数值又可以传入两个参数,参数值为resolve和reject函数,则我们实现的pro
2022-06-28 15:09:51
862
原创 手写promise.all
1.promise的基本概念Promise是一种抽象异步处理对象，Promise类的构造函数中使用一个参数,参数值为一个回调函数。该回调函数又使用两个参数,参数值分别为两个回调函数(resolve,reject),如果执行成功则调用resolve回调函数,否则执行reject回调函数2.promise.all的用法promise.all(promises)，promises参数是一个数组，数组内的元素都是promise对象，当里面的每一个promise对象都返回成功resolve的回调函数，它则返回包含数组
2022-06-26 17:51:57
2803
原创 css 如何清除浮动
如何清除浮动给父元素加上.clearfix 这个类方法二:给父元素加上overflow:hidden缺点: 若是有定位到父盒子之外的元素，会被隐藏给浮动的标签增加一个空的兄弟标签，并加入clear:both的样式来清除浮动（不推荐）......
2022-06-25 00:48:55
149
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人