遇到的坑

经验
/
踩坑

日常项目中遇到的坑记录

# 1.vuex 缓存导致的加载速度太慢

因为项目需要，vuex 做了缓存处理，塞到了 session 里面，并且是加密的。因为初始化页面有多个塞值操作，每次都要重新加密解密一遍，会导致页面非常卡。

解决方法：在塞值的时候，写一个防抖处理。初始化时连续的塞值操作只执行一次。以最后一次为准即可

# 2. “Unexpected end of JSON input while parsing near···”错误解决方案

背景：使用 git 管理项目，git pull 项目文件后运行 npm install 时报错，错误是：Unexpected end of JSON input while parsing near...

npm cache clean --force//清除缓存

# 3. react.js 自动执行绑定的 onClick 事件 如何解决

//例
 <a href="#" onClick={this.onLoadQR(text)}><Icon type="qrcode" />下载</a>
 //这个会初始化时会自动执行一次onLoadQR，解决办法是
 <a href="#" onClick={()=>this.onLoadQR(text)}><Icon type="qrcode" />下载</a>

# 4. 关于 for 循环中有异步操作时的 BUG

//例

for (var i = 0; i < 22; i++) {
  console.log('i', i) // 这里i打印出来 是0-21
  var arr = [points[i]]
  var convertor = new BMap.Convertor()
  //下面是一个异步操作
  convertor.translate(arr, 1, 5, (data) => {
    console.log('i', i) // 这里i打印出来 是22,22,22,22...22.因为在整个for循环运行完毕后才会开始运行异步操作。FOR循环最后一论是21+1=22
    //坐标转换完之后的回调函数
    if (data.status === 0) {
      baiDuPoints.push(...data.points)
      if (i === 21) {
        //因为i都是22，所以这里不会运行
        this.drawMap(baiDuPoints)
      }
    }
  })
}
  • 在 FOR 循环中有异步操作时，如果 i 是 var 申明，异步操作中的回调函数会在整个 FOR 循环结束后才会执行
  • 因为 var 出来的 i ，在整个 for 循环里是同一个，所以最后打印出的都是 22.如果换成 let，有了作用域，i 就会每次循环独立，打印出 0-21。
  • 但是，由于 convertor.translate 是异步操作，返回的时间不一定是按运行顺序，所以打印出的并不是 0-21，有可能是 2，1，0，3....

解决办法：

  • 在每一次循环里面，将返回值和 index 组成对象，塞到数组里。然后判断数组长度和循环的次数是否相等，相等的话就是最后一次循环了，就去根据 index 做一个排序，拍完序再 map 单独返回出数据
let baiDuPointsOBJ = []
for (let i = 0; i < points.length; i++) {
  console.log(i) //0-21
  var arr = [points[i]]
  var convertor = new BMap.Convertor()
  convertor.translate(arr, 1, 5, (data) => {
    console.log(i) //0-21，但是顺序是乱的
    //坐标转换完之后的回调函数
    if (data.status === 0) {
      //连index一起组成对象插入数组
      baiDuPointsOBJ.push({ index: i, points: data.points[0] })
      //当新组成的数组长度等于原数组长度（所有异步操作都已经执行完）
      if (baiDuPointsOBJ.length === points.length) {
        //先利用index排序，然后取出points，得到一个正确顺序的需要的数组
        let baiDuPoints = baiDuPointsOBJ
          .sort((a, b) => {
            return a.index - b.index
          })
          .map((item) => item.points)
        this.drawMap(baiDuPoints)
      }
    }
  })
}

# 5. gnvm 安装对应版本的 npm 失败，找不到源

切换成淘宝源，因为原本的地址已经迁移 gnvm config registry TAOBAO

# 6.rem 进行适配时，element 的操作栏出现了下边框的错位

原因:操作栏固定，el-table**fixed-body-wrapper 的 div 有一个 top，取值是标题栏的行高。因该是用 dom 的 offsetHight 的值。但是这个值是个整数。在 rem 适配时，很有可能会出现标题栏是 50.12 这种小数。但是 offsetHight 就会变成 50. 所以 top:50 跟实际高度不符，就错位了 解决办法：在 mounted 里加上

setTimeout(() => {
  let html = document
    .getElementsByClassName('el-table**fixed-header-wrapper')[0]
    .getBoundingClientRect().height
  document.getElementsByClassName('el-table__fixed-body-wrapper')[0].style.top =
    html + 'px'
}, 100)

# 7.## mounted 里面取元素

html = document.getElementsByClassName("el-table__fixed-header-wrapper")
这个 html 是能够取到的。是个数组 但是 html[0]取不到值。必须用 setTimeout(() => { console.log('11111',html[0])

},0)

才鞥取到值

# 腾讯 SDK 推流，默认分辨率是 360 * 640。这时新款苹果手机会出现画质模糊雪花的现象

改推流分辨率为高分辨率，如 720*1280 即可

# taro video 标签，有些事件名跟文档上记录不符，跟微信文档也也不符。

如：onLoadedMetaData => 实际上生效的是 loadedMetaData

  • 可能其他标签也存在类似问题
项目中遇到的难题

项目中遇到的难题

技术-项目中遇到的难题
vscode代码格式化配置

vscode代码格式化配置