bug最后汇总-2018/08/03

一、对于点击后请求时间过长的按钮

现象：容易给用户点击无效的错觉，从而导致多次点击，从而发出多个相同请求，这显然是不符合我们意愿的

解决：

用户点击发出多个请求：加个锁，当用户点击后，将锁关闭，使用户之后的点击无效，当请求完毕后再打开锁

等待时间过长用户体验降低：可以加个loading，点击后按钮内容后加个"..."，或者后加个loading图标，当请求完毕再回复原样

二、发送数据内容能在前端验证的尽量在前端验证

原因：如果把一些验证放到后端接口，我们发送请求，然后验证没通过，请求返回原因，然后呢？肯定是用户修改后，再次发送请求了。

但是如果我们把这些验证放到前端，这个请求就没必要发出，之后验证通过后才会发出请求，这样可以一定程度减少请求数量，减轻服务器负担。

三、Vue.js开发中关于第三方组件的使用

使用第三方组件的好处：节省了很多重复代码，直接引入使用即可

使用第三方组件的缺点：虽然组件好用，但是我们也要根据需求具体分析，因为组件的样式和功能是定死的，要考虑使用这个的组件和当前需求冲突的多少，如果冲突很多，或者自己写个适配的组件会更加高效方便。

四、开发前一定要把需求弄清楚才开始开发，如果是因为需求弄错而导致的时间和人力的浪费，痛苦的只会是你自己，要对自己负责。

五、Vue.js开发，如果如果通过等号，为data中的一个数组或者一个对象内，添加一个新对象，这个新添加的新对象不是响应式，我们修改该对象的值，并不会触发重新渲染。

解决：通过 this.$set(obj, prop, value) 来添加，通过此方法添加的是响应式的，因为会被重新定义添加setter和getter

六、如果接口传递的数据除了正常的数据外，还存在文件，我们需要 new FormData() ，通过FormData实例的append方法添加数据，然后将改FormData实例作为参数传递

七、文件字节转换为正常单位

// 字节转换为最合适的单位，最后是四舍五入取整，如果其他需求可以修改
function bytesToSize(bytes) {if (bytes === 0) return '0 B';var k = 1024, // or 1000sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],i = Math.floor(Math.log(bytes) / Math.log(k));return (bytes / Math.pow(k, i)).toFixed(0) + '' + sizes[i];
}

八、Vue.js使用ElementUI组件，自定义样式问题

问题：自定义样式其实就是覆盖组件的默认样式，这些内容需要放到全局，即不能放到设置scope的style标签中，否则不会生效

原因：因为Vue.js被放到scope中的样式选择器在打包后都会被加上一个唯一的属性标识，通过这个唯一的属性标识来限定组件作用域，避免影响其他组件的样式。

九、编辑器内容初始化问题

需求：如果组件或者页面存在编辑器，当页面初次加载时，我们需要将获取到的数据初始化到编辑器中

问题：编辑器初始化一般要操作dom，如果在为编辑器初始化填充数据的时候，编辑器实例（也就是编辑器DOM）还没有渲染完毕，会导致编辑器的内容初始化失败

解决：

方一：有些编辑器会提供编辑器实例加载完毕的事件，我们在该事件的回调中填充初始化数据，如下例子

editor.on('ready', () => {editor.setData("初始化数据");
});

方法二：如果没有提供方一的事件api，可能会存在一个编辑器当前状态的属性，比如说是status，加载时status为loading，加载完毕，status变为ready

然后我们可以设定定时器，每过100ms就监测一次status，如果status变为ready，关闭监测定时器，填充初始化数据

let timer = setInterval( () => {clearInterval(timer);if (editor.status == 'ready') {editor.setData('初始化数据');}
});

十、Vue.js开发中使用了ElementUI中的table组件

问题：会出现横向滚动条，虽然表格中内容没有超过设定的宽度

原因：table的border存在会导致内容border超过设定的width，从而莫名出现横向滚动条，但因为样式，表格的border又不能去掉

解决：在全局样式中加入如下代码：

.form-content .el-table__body-wrapper,
.form-content .el-table__footer-wrapper,
.form-content .el-table__header-wrapper {width: 101%;
}

------------ end

转载于:https://www.cnblogs.com/Walker-lyl/p/9415592.html

bug最后汇总-2018/08/03相关推荐

新手C#string类常用函数的学习2018.08.04
ToLower()用于将字符串变为小写,注意字符串的不可变特性,需要重新赋值给另一个字符串变量. s = s.ToLower();//字符串具有不可变性,转换后需要重新赋值,不可仅有s.ToLower ...
2018.08.20高二互测
2018.08.20 NOIp模拟赛 GKK大佬出的毒瘤题,烧脑.全是原题就不要密码保护了. 第一题 T1链接一张图,每条边有代价也有限制,遍历过的点可以解锁这些限制,求最短路.这是一道套路题, ...
新手C#面向对象的学习2018.08.06
class Person//声明一个Person类 {//类中的声明与Main中不同,类中声明的是字段而不是函数.public string gender;public string name=&qu ...
格式化时间将2021-09-05T09:08:03.000Z 转换成 YYYY-MM-DD HH:mm:ss 格式
格式化时间将2021-09-05T09:08:03.000Z 转换成 YYYY-MM-DD HH:mm:ss 格式 1.引入第三方包 dayjs (一个轻量的处理时间和日期的javascript库) ...
蒲公英 Ghost Win10（x86/x64）装机版/纯净版 2018.08
32位装机版 File:GhostWin10x86z_PGYv201808New.iso Size:5.12G MD5:C7B293BCECF0FF2310C22544F2C5B746 下载地址(请把 ...
【新书推荐】【2018.08】电子防御系统概论（第三版）
[2018.08]电子防御系统概论(第三版)Introduction to Electronic Defense Systems, Third Edition,共761页. 如果需要电子版,请联系QQ ...
【Yolov5】1.认真总结6000字Yolov5保姆级教程（旧版本2021.08.03作为备份）
旧版本2021.08.03 新版本https://blog.csdn.net/m0_53392188/article/details/119334634 以作备份目录一.前言二.学 ...
【LeetCode】面试题 08.03. 魔术索引（C++）
面试题 08.03. 魔术索引(C++) 1 题目描述 2 示例描述 2.1 示例1 2.2 示例2 3 解题提示 4 解题思路 5 源码详解(C++) 1 题目描述魔术索引. 在数组A[0-n-1 ...
贝壳找房 2019校招研发类试卷C++ 编程题 2018.08.19
贝壳找房 2019校招研发类试卷编程题 C++ 2018.08.19 遍历的同时求出最小值min 和村庄高度和sum,sum-min即可 #include <iostream>usin ...

bug最后汇总-2018/08/03

bug最后汇总-2018/08/03相关推荐

最新文章

热门文章