ge15139567650的博客

原创 JS的防抖与节流

函数防抖：函数防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。防抖debounce代码：function debounce(fn, wait) { var timeout = null; return function() {

原创 【无标题】echarts初始化，对比紫光恒越EnergyRatio.vue

1.在data中写死数据<divclass="cantainer"ref="energyChart">data: () => ({ title: '能源比例', color: ['#B9ACFE', '#FF862D', '#FFFFFF'], list: [ { name: '市电', value: 0.5 }, { name: '光伏', value: 0.3 }, ..

原创 js运行机制详解（宏-同步-微任务-宏）

1.js中的异步操作（new promise声明相当于同步）setTimeOut setInterval ajax promise I/O2.同步任务 or 异步任务同步任务(synchronous)：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务； 异步任务(asynchronous)：不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。3.宏任务 or 微任务这里需.

原创 window对象详解

路径：http://10.200.1.3:8080/disk?ciCode=xxxxxx打开后台控制器，输入windows打印找到location，可以发现1.host：获取域名+端口 windows.lacation.host2.hostname：获取域名windows.lacation.hostname3.href：获取整个urlwindows.lacation.href4.origin：获取传参路由前面的url/接口路径windows.lacation.orig...

原创 reactive对比ref，如何使用

从定义数据角度对比： ref用来定义：基本类型数据。 reactive用来定义：对象（或数组）类型数据。 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。 从原理角度对比： ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。 reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数..

原创 Vue2和Vue3中的响应式原理

1.实现原理对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。2.存在问题①新增属性、删除属性, 界面不会更新。②直接通过下标修改数组, 界面不会自动更新。3.Vue2解决这些问题的方法：① 针对对象新增和删除，引入$set方法，属性添加：this.$set(this.person,'sex','女')，属性删除：this.$delete(thi..

原创 父盒子跟随子盒子margin-top移动问题

问题：当我们想给子元素设置margin-top时，发现子元素没有出现上外边距的效果，反而是父元素出现了上外边距的效果。原因根据规范，一个盒子如果没有上补白(padding-top)和上边框(border-top)，那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。说白点就是：父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己父元素。直到找到父元素有有效的padding或border为止。解决方法..

原创 解决echarts渲染数组重复加载的问题

原创 解决element-ui的tab栏切换样式的问题

1.出现如上情况，用element-ui同样也可以实现；2.实现难度在于，用css画出来的三角可以实现，三十由于父盒子宽度不够，会被默认隐藏，此时我们需要抬高下划线和三角形，如何用伪类让后面的线也抬高；代码如下：::v-deep.thing-tab{.is-stretch{display:flex;min-width:1024px;}.el-tabs__item{width:20...

原创 子盒子设置百分百后，设置margin如何解决溢出问题，实测超好用！！！

直接上图，上代码：.echarts-02{box-sizing:border-box;width:1543px;padding-right:56px;padding-left:54px;}.health-chart{height:580px;width:100%;margin-top:71px;}...