Brc-CSDN博客

原创详细了解 async 和 await

在项目中经常会遇到需要等待一些异步操作进行完后再进行后续操作，例如等待一个接口请求完后再请求另一个接口，那么我比较习惯的操作就是使用 async / await 进行处理；async testBtn() { let i = await this.load() console.log(i)},load() { return this.$server.loading()},上面的例子是一段简单的等待接口 load 的返回值再进行后续操作的代码，但是光这样很难看出 async和await

2021-11-01 10:06:59 317

原创外边距塌陷的解决方法

1. 上下位置的兄弟元素当两个兄弟元素有上下关系时，上面的元素的下内边距 ( margin-bottom )和下面的元素的上内边距 ( margin-top ) 不是简单相加的关系，而是两者之间去最大值；.father { width: 400px; border: 1px solid #000;}.box-1 { width: 200px; height: 200px; background-color: blue; margin-bottom: 6

2021-11-01 10:06:24 276 1

原创常见的遍历方法以及如何终止循环引发

如何终止循环终止循环的方法基本就是如下三种：break - 中止当前循环，switch语句或label 语句，并把程序控制流转到紧接着被中止语句后面的语句；continue - 终止当前循环或标记循环的当前迭代中的语句执行，并在下一次迭代时继续执行循环；return - 终止函数的执行，并返回一个指定的值给函数调用者；以上的描述都是在 MDN 中摘抄来的，为了方便理解，可以看下面的小例子：let arr = ['a', 'b', 'c', 'd']for (let i = 0; i &lt

2021-11-01 10:05:47 2289 1

原创 cancelToken 源码解析

由于之前项目中需要使用 cancelToken 来取消接口，所以研究了一下 cancelToken 怎么使用，并且对源码进行了一定了解。cancelToken 的使用 -> 「传送门」在这里记录一下我的理解，希望也能对大家有些帮助。axios/lib/cancel/cancelToken.js// 一下是 cancelToken.js 的源码// 为了内容不要太长，一些感觉不太重要的部分被我删除了var Cancel = require('./Cancel');function Canc

2021-11-01 10:05:01 312

原创 axios 使用 cancel token 取消请求

axios 使用 cancel token 取消请求业务场景1. 在项目中切换路由，停止原路由中的正在请求的接口在我参与的项目中有的页面在进入时会调用多个接口，并且这些接口可能会几秒后才请求完；在用户切换路由时这些接口就没有必要再请求了；如果需求只是要在切换路由是取消之前的全部接口，使用下面的方法就可以实现；如果还有取消具体的某一个接口的需求，那么请看业务场景2的实现方式；实现代码如下：// 使用 CancelToken.source// CancelToken.source 方法会构建一个

2021-09-22 16:00:48 7297

原创怎样减少页面的回流和重绘

怎样减少页面的回流和重绘减少对 dom 的操作当需要进行多个 dom 的增删改查时，避免直接对单个 dom 进行操作<ul id="box"></ul><script> // 例1-使用 createDocumentFragment 方法创建虚拟的 dom 对象，将新 dom 需要修改的对象进行复制，然后对创建的 dom 进行相应的修改，最终在把 dom 与旧 dom 进行替换 // 这样的能将对 dom 的多次修改合并为一次，大大减少了回流和重

2021-09-06 10:45:29 1316 3

原创浏览器解析并渲染页面的过程

浏览器解析并渲染页面的过程渲染过程浏览器获取到 html 资源后开始解析 html (dom tree)解析到 css 后根据 css 生成 css 规则树 (style rules)在 dom 树和 css 规则树都生成完后，通过 dom 树和 css 规则树生成渲染树( render tree )渲染树构建完成后，浏览器开始计算元素的大小和位置( layout )根据计算好的节点信息将内容绘制到屏幕上( painting )渲染的过程如下图：渲染过程详解1. dom 树和 css

2021-09-06 10:44:10 384

原创 elmentui中table组件中父子结构勾选的相关问题

在使用 element-ui 中的 table 组件并以父子结构展示数据时，有勾选的需求，需要在勾选父数据时，将子数据一起勾选，取消勾选父数据也会将子数据取消勾选；但是在 element-ui 中并没有提供现成的方法；

2021-08-09 17:01:03 806

原创 keep-alive 的简单应用

keep-alive 的简单应用业务场景用户浏览某个数据列表，当数据列表数量很大或者有许多筛选/搜索条件时，点击查看详情然后返回，需要回到离开这个列表时的状态；如果数据量过大，会使接口返回速度以及渲染速度变慢，导致页面出现长时间白屏或卡顿；如果需要保存大量的筛选/搜索条件、分页等内容，则需要进行较为繁琐的操作（将内容进行存储或者作为参数传递）使用 keep-alive 则可以较为简单的解决这些问题；keep-alive 简介keep-alive 是vue的一个内置组件包裹动态组件时，会缓存

2021-08-09 15:37:50 171

原创 elmentui 中 select 组件动态添加数据

elmentui 中 select 组件动态添加数据业务场景有一个选择用户名的下拉框，需要在下拉框中进行输入的时候判断输入的是否是一个新的值，如果是的话则进行用户数据的新增；实现思路：由于 select 组件新增时，新增的数据也会触发 change 事件，并且返回的值是输入的字符串，而用户数据是对象数组；所以根据 change 事件的参数与下拉框中的数据进行校验，如果无匹配项则进行数据的新增；例子（使用的是 vue）：// html<el-select @change="changeSe

2021-08-07 22:58:46 3482 1

原创 @media 的简单应用

@mediaMDN：@media CSS@规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，您可以指定一个媒体查询和一个CSS块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该CSS块才能应用于该文档。简单的说就是当你的浏览器大小变化的过程中，页面也会根据浏览器的宽度和高度渲染页面；而@media 可以针对不同的媒体类型设置不同的样式，以此可以实现不同页面尺寸的适配。媒体类型all：适用于所有设备print：适用于打印预览模式下在屏幕上查看的分页材料和文档screen：

2021-08-07 22:58:06 651

weixin_42206013的博客