前端踩坑系列《一》

时间:2022-07-25
本文章向大家介绍前端踩坑系列《一》,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

前言

记录下最近踩的一些坑,也作为踩坑系列的第一篇,主要是希望以后对遇到的问题,都能够记录下来,下次尽量避免或者在遇到的时候能够快速定位并解决。由于自己的水平有限,遇到的问题在别人看来可能相对简单,可能一些大神们对下面的问题有自己独到的见解,也欢迎指出。

问题1:transition 在 IOS 8.1下 transition 动画卡顿

问题描述

在使用 transition 的时候,在 iphone6IOS8.1 下面动画的过渡效果没有了,动画卡顿,在 Chrome 或者其他机型下面均是可以的。具体的代码如下

<div class="record-wrap"
      :style="{
      transition: recoredTransform ? `transform ${recoredTransformTime}ms ease-in-out` : 'none',
      transform: `translateY(-${recoredTransformY * 32}px) translateZ(0)`,   
}"></div>

问题解决过程

自己认为是硬件加速的问题,做了以下的尝试

尝试的第一种方法

给它们加了相关的前缀。但实际上在 Vue 项目中,这个是有点多余的。因为,Vue 在行内样式的时候,会自动帮类似 transform的属性加上浏览器前缀,类似 -webkit- 等。

第一种方法,卒!

尝试的第二种方法

transform: translateZ(0) 或者

-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

没有成功,卒!

尝试的第三种解决方法

transform-style: preserve-3d;

第三种解决方法,卒!

正确的解决方法

Old versions of iOS Safari support only vendor-prefixed properties and values for transition and transform, so you should use-webkit-transition: -webkit-transform instead -webkit-transition: transform

没错,就只需要将 -webkit-transition: transform 替换成 -webkit-transition: -webkit-transform 即可。

反思:

  • 以后直接用谷歌搜,而不是在 stackoverflow 中搜
  • 在使用css3 transtion做动画效果时,优先选择transform,尽量不要使用height,width,margin和padding。

webpack 打包后文件路径有误 assetsPublicPath 配置

问题描述

打包后的文件,部署到线上的时候,报 404 问题,如下图所示:

问题解决

第一反应,就是 webpack 的打包路径有什么题了。

目前的链接

http://***/static/css/app.c87e17c7.css

尝试了一下,发现下面是可以访问的

http://***/web/dist/static/css/app.c87e17c7.css

好的,那就是需要再配一下 web/dist/

那么在哪里配置呢?

发现在 config/index.js 目录下,有以下的介绍和配置项

/**
     * You can set by youself according to actual condition
     * You will need to set this if you plan to deploy your site under a sub path,
     * for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
     * then assetsPublicPath should be set to "/bar/".
     * In most cases please use '/' !!!
     */

 assetsPublicPath: '/'

是的,这里默认就是 /, 如果你部署的时候有特殊情况的话,就需要自己改,比较明显自己就是这里有问题。 改成以下:

 assetsPublicPath: '/web/dist/'

问题解决!

问题3:webpack 打包将 ES6 转 ES5 问题

问题描述

在部署完项目之后,自己浏览器访问正常,测试的浏览器会报以下的问题

看了一下,发现是 ES6 的语法,拓展运算符。

然后测试的浏览器版本是:

自己的浏览器版本是:

那么基本上可以确定是 ES6 解析的问题

问题解决

看了一下自己的 babel-loader 的配置

{
    test: /.js$/,
    loader: 'babel-loader',
    include: [
        resolve('src'),
        resolve('test'),
        resolve('node_modules/webpack-dev-server/client')
    ]
}

讲道理,源码都应该有转了。。再具体定位一下问题吧?

看了一下打包出来的代码,发现来自于公司内部的一个框架。突然想起之前为了调试方便,直接引入了源码。

而源码的目录又不在处理的范围之内。

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        '@': resolve('src'),
        'vue': resolve('node_modules/vue'),
        '@ams/ams': path.resolve(__dirname, '../ams/src/index')    // 直接引用了源码,目录不在范围之内
    }
}

好的,找到问题根源了,直接将上面的注释掉,它就会自动去 node_modules 中查找了,那就属于我们转换的范围之内了。

如下所示

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
        '@': resolve('src'),
        'vue': resolve('node_modules/vue')
        // ,
        // '@ams/ams': path.resolve(__dirname, '../ams/src/index')    // 直接引用了源码,目录不在范围之内
    }
}

问题4:异步操作问题 async/await 解决

问题描述

在执行任务的时候,我执行了两个操作,删除操作,然后去刷新页面。原本这个逻辑是没有问题的,但是发现有时候页面还是显示数据,但是删除的接口是显示已删除成功。那是为什么呢?

鲁迅说过:

偶现的问题,记得考虑是否为异步操作导致的

发现刷新列表的操作并没有在删除请求成功后执行!所以这就有了以上的问题!

那么我们该怎么去解决呢?

解决过程

其实在平时我们有很多中解决方法

解法一 最“蠢”的方法,就是将后续的操作放在 ajaxsuccess 函数中,这样确保它的执行时有顺序的。

这种方法的缺点也是很让人头疼的,假如有很多很多很多的 ajax 请求的时候,那岂不是要嵌套很多很多很多层,代码的可读性就非常差了。

解法二 Promise 。和这个类似的是 jQuery 中的 deferred

解法三

其实跟解法二是一样的,毕竟 async/await 就是一个语法糖而已。

async deleteBubble(args) {
    await deleteBubble.call(this, { id: args.$prevReturn.id }) // 执行了异步操作,使用 await 进行等待
}