vue项目中遇到的一点小问题记录

1、鼠标悬浮显示不同的背景图片,代码如下:效果如图,页面初始效果:鼠标悬浮后效果: 2、for 循环发送axios遇到的问题问题背景:在声动语商项目中,需求更改后,出现一个:教师发布课程的时候要求一个课程同时发送给多个班级。现在的接口:每次只能发送一个班级的id,也就是:classesId字段只能传一个班级的id,因此为了满足这个新需求就想着:将select修改为多选,使用for循环循环用户选中的班级数组,使用axios发送创建课程请求。更改后的界面如下图所示: 问题复现:思路:使用for循环,发送axios,发现请求发送的data中classesId总是最后一个,立马想到了闭包,以为是闭包问题,于是使用 这种方法想着解决下闭包,重新发送axios请求发现classesId数据还是不对。然后自我怀疑,以为自己写的闭包是不是有啥问题.... 于是使用了第三方lodash的forEach方法一下,将axios请求写到了foreach里面,重新运行还是发现不对。。。。 以为this指向有问题,有将this重新赋值,结果:还是一样。。。。。。。 于是又调整了一下代码:将axios请求重新封装出去,重新在for循环里面调用,结果:还是不对 打断点发现for循环出来的classesId数据是对的,但是加上axios请求,每次请求发送的classesId还只是最后一个的 又想着是不是axios的异步请求影响的,于是将axios改为了同步请求,结果:还是一样,这个时候,整个人就有点不好了。。。。 眼看着快要下班了,而这个问题已经看了一下午还没有解决,就很着急啊啊啊啊 努力回想自己曾经这样请求过啊,当时并没有发生任何不对。于是想着将请求的数据简化一下,就将发送的data数据简化到了只有classesId,想着只有一个数据了,就没有再定义任何的变量,直接将数据写到了axios请求内部。运行发现:classesId竟然是对的。。。。于是立马将其他数据都写到了axios请求内容,发现结果对了,天啊,终于看到了希望。。。。 问题原因:将这两种数据的定义及发送方式对比,分析问题可能是因为 js赋值的深拷贝和浅拷贝造成的。。。 其他解决过程中还试了watch监听for循环classesId的变化,发现也只能监听获取到最后一个classesId.,并不能解决这个问题

May 14, 2019 · 1 min · jiezi

前台性能优化总结

场景某天上完课,走在路上,突然想起来,一个企业中,计算机量可能很大,500到2000左右。分组时,可能会很耗时,前台能不能承受的住。模拟加了1000台计算机,前台直接炸,将近4秒才能出来,并且选择的时候也很卡。学习了很多数据量多时性能优化的方法,目前前台经过一系列优化,能保证在Chrome浏览器环境、1000台测试机的条件下,,2s内完成页面渲染。优化组件介绍前台多选使用的是NZ为我们提供的多选框组件,该组件要求输入信息必须满足一定格式。/** * NZ 多选框 * nz-checkbox-group * 数据格式规范 */export class NzCheckBoxSpec<T> { label: string; value: T; checked: boolean;}所以,计算机多选组件整体逻辑如下:获取外部传入的计算机列表(考虑到默认选中的问题)。从后台查询所有的计算机列表。根据所有计算机构造NZ多选框组件的输入,checked一项根据当前遍历的计算机是否在传入的计算机列表中判断。性能问题看着问题不大:this.hostService.getAllHosts().subscribe((hosts) => { this.hostListValues = []; // 使用主机信息构造多选框绑定数据 hosts.forEach((host) => { this.hostListValues.push({ label: host.name, value: host, checked: HostCheckboxComponent.existIn(host, this._hostList) }); });});查阅相关资料,原来一直都用的有问题,forEach虽然很好使,但是是性能最低的一种循环。性能测试我亲自写测试代码测试三种循环方式的性能(数据量2000,内部执行同样业务操作):实验次数 / 实验方法forEachfor offor1654ms524ms517ms2604ms571ms563ms3550ms506ms508ms4621ms495ms522ms5506ms562ms470ms平均时间587ms531.6ms516ms我这里只是部分少量数据,结果具有随机性,不具有普遍性。反正这里我是总结出几点:当数据量少的时候,我使用forEach,方便。当数据量大的时候,我是用for循环,性能略好。当需要在循环中return时,使用for of,方便。学习过程中还查到了Duff’s Device,这是目前性能最好的循环方式。有人测试,Duff’s Device需要达到30万的数据量才能显示其算法高效的性能。组件的错误使用最开始,组件是这样使用的。<app-host-checkbox [hostList]=“hostGroup.hostList” (hostCheck)=“bindHostList($event)"></app-host-checkbox>看着没啥毛病啊,把计算机组的hostList传进去,然后一个输出事件,绑定hostCheck事件,当选中的计算机有改动的时候就调用bindHostList()方法。bindHostList(hostList: Array<Host>): void { this.hostGroup.hostList = hostList;}注意看这张图:页面把hostGroup的hostList传给组件。组件初始化,当用户选择的时候,再把选中的值回传给hostGroup。hostGroup的hostList变了,又传给组件了。所以,组件初始化执行了两次,本来for循环就已经很耗时了,更何况执行两次。之前测试数据少没发现。新建临时变量,该变量只用于传输入的hostList。总结在校学习过的东西,我们总是很久以后用到。如果不是华软项目,也用不到学过的计算机网络,没有大数据量,学的算法复杂度也用不上。当编码不是问题的时候,我们开始考虑设计与用户体验。

March 8, 2019 · 1 min · jiezi

for of, for in, forEach比较

forEachforEach无法中途跳出forEach循环,break、continue和return都不奏效。for infor…in 循环只遍历可枚举属性。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性,例如 String 的 indexOf() 方法或 Object的toString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)。for…in不应该用于迭代一个 Array,其中索引顺序很重要。for in 循环的输出顺序问题先遍历出整数属性(integer properties,按照升序),然后其他属性按照创建时候的顺序遍历出来。var obj = { a:1, ‘2’:1, ‘1’:1, d:1, c:1, ‘3’:1}obj.b=66;for (var key in obj) { console.log(key ); } //“1”, “2”, “3”, “a”, “d”, “c”, “b"Object.keys(obj); //[“1”, “2”, “3”, “a”, “d”, “c”, “b”]Object.keys()和for in 具有相同的排列顺序for of有着同for…in一样的简洁语法,但是没有for…in那些缺点。不同于forEach方法,它可以与break、continue和return配合使用。提供了遍历所有数据结构的统一操作接口。

February 26, 2019 · 1 min · jiezi