bug最后汇总-2018/08/03

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

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

解决：

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

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

 

2、发送数据内容能在前端验证的尽可能在前端验证

缘由：若是把一些验证放到后端接口，咱们发送请求，而后验证没经过，请求返回缘由，而后呢？确定是用户修改后，再次发送请求了。

可是若是咱们把这些验证放到前端，这个请求就不必发出，以后验证经过后才会发出请求，这样能够必定程度减小请求数量，减轻服务器负担。

 

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

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

使用第三方组件的缺点：虽然组件好用，可是咱们也要根据需求具体分析，由于组件的样式和功能是定死的，要考虑使用这个的组件和当前需求冲突的多少，若是冲突不少，或者本身写个适配的组件会更加高效方便。

 

4、开发前必定要把需求弄清楚才开始开发，若是是由于需求弄错而致使的时间和人力的浪费，痛苦的只会是你本身，要对本身负责。

 

5、Vue.js开发，若是若是经过等号，为data中的一个数组或者一个对象内，添加一个新对象，这个新添加的新对象不是响应式，咱们修改该对象的值，并不会触发从新渲染。

 

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

 

6、若是接口传递的数据除了正常的数据外，还存在文件，咱们须要 new FormData() ，经过FormData实例的append方法添加数据，而后将改FormData实例做为参数传递

 

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

// 字节转换为最合适的单位，最后是四舍五入取整，若是其余需求能够修改
function bytesToSize(bytes) {
    if (bytes === 0) return '0 B';
    var k = 1024, // or 1000
        sizes = ['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];
}

 

 

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

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

缘由：由于Vue.js被放到scope中的样式选择器在打包后都会被加上一个惟一的属性标识，经过这个惟一的属性标识来限定组件做用域，避免影响其余组件的样式。

 

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

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

问题：编辑器初始化通常要操做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('初始化数据');
   }
});

 

 

10、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