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 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];
}

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