前端踩坑系列《一》

前言

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

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

问题描述

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

代码语言：javascript复制

<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) 或者

代码语言：javascript复制

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

没有成功，卒！

尝试的第三种解决方法

代码语言：javascript复制

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 目录下，有以下的介绍和配置项

代码语言：javascript复制

/**
     * 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: '/'

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

代码语言：javascript复制

 assetsPublicPath: '/web/dist/'

问题解决！

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

问题描述

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

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

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

自己的浏览器版本是：

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

问题解决

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

代码语言：javascript复制

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

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

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

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

代码语言：javascript复制

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

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

如下所示

代码语言：javascript复制

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

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

问题描述

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

鲁迅说过：

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

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

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

解决过程

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

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

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

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

解法三

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

代码语言：javascript复制

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

html 打包 webpack javascript ecmascript

0 人点赞