一、对于点击后请求时间过长的按钮
现象:容易给用户点击无效的错觉,从而导致多次点击,从而发出多个相同请求,这显然是不符合我们意愿的
解决:
用户点击发出多个请求:加个锁,当用户点击后,将锁关闭,使用户之后的点击无效,当请求完毕后再打开锁
等待时间过长用户体验降低:可以加个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