• 一些bug汇总


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

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

    解决:

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

    等待时间过长用户体验降低:可以加个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

  • 相关阅读:
    按钮在点击的时候,怎么取消按钮中的文本被选中
    JS观察者模式-自定义事件
    DIV中文字换行显示
    JS、CSS中的相对路径
    监听窗口大小改变,同时根据窗口大小修改某个元素的大小
    jquery中点击切换的实现
    lua_自己对“lua函数”知识点的总结
    Lua习题练习(9*9乘法表,输出所指定的图像,斐波那契数列)
    对 Lua闭包 知识点的学习的总结 ,在这里和大家分享一下,希望对大家有所帮助
    Lua的string库函数、lua中string的模式匹配
  • 原文地址:https://www.cnblogs.com/Walker-lyl/p/9415592.html
Copyright © 2020-2023  润新知