总结前端项目开发中遇到的那些坑

ivorzk

dom节点没有闭合导致页面布局异常

像 div 、a 、p 这些常用的标签都是闭合标签，有些时候写了 <div> 忘记写 </div> 这个时候页面布局会出现异常，比如下面这段

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <img src="https://upyfuntask.suwis.com/xnit.funtask.club/a7483bf6-c488-45a3-bdc4-8b3e02d30417.png" alt="">
  <p>
    如 何检查DIV标签有没有闭合呢？如果页面布局简单，代码少是可以直接观  察出来；如果布局复杂了，看代码很难看明白。有一个很简单的方法来检测：在整个页面中搜索代码看有多少个，然后再搜索代码看有多少个，如何一样的个数，那基本没问题。 
  <p>
    结尾语
  </p>
</body>
</html>

实际到浏览器渲染以后，会变成这样，浏览器会自动帮我们补全没有闭合的标签，但往往它给我们补全的，并不是我们想要的，这样就会导致页面和预期的布局不一致，影响程序的执行逻辑，和稳定性

解决方案：

现代编辑器大部分可以自动检查这类问题，如果编辑器不支持，可以选择换编辑器，或者借助一些工具去扫描和检查

浮动不清理，导致父容器没有高度

这个是经典的坑了，使用浮动布局的小伙伴应该都遇到过这个问题

代码执行时机问题

这种问题表现在这几个方面，事件绑定不生效，轮播图、第三方插件初始化不成功

解决方案：

待dom节点渲染完成后，在执行js逻辑

video自动播放 ios 可以通过事件触发视频播放，有些安卓却不能

在一些网页专题中，我们希望视频在页面里面自动播放，兼容的方案是，在 ios 端，监听页面 touch事件，然后调用video的play方法，让video自动播放，而安卓则使用video的autoplay 功能自动播放，但实际测试中，小米 和 华为 的部分机型无法自动播放，监听点击事件主动去播放视频也不管用，必须要手动去点击video上的播放按钮才可以，对于这类机型的解决方案是：页面加载完毕时候，间隔3~5秒，去检查video的播放情况，如果video没有自动播放，则将video删除，替换成gif做降级处理

A标签监测代码无法触发

每开发完一个专题项目，我们都会给专题做埋码监测工作，对于在页面内点击触发，不进行页面跳转的元素，我们可以直接绑定点击事件，然后触发监测代码，而a标签，如果是在当前页打开，这种情况会导致监测代码无法触发的情况，页面跳转速度过快，导致监测代码还没发出去，就已经跳转了

解决方案：

可以给a标签做延迟跳转，全局拦截a标签，监听点击事件，获取a标签的href ，并延迟跳转url

vue cli2 react 脚手架打包css图片找不到的问题

vue cli2 现在已经过时，新版 vue 脚手架和 vite已经不存在这个问题，react 脚手架打包还是会存在css背景图片找不到的问题

解决方案：

背景图片改为绝对路径

ie11 不支持 promise产生的兼容问题

一些第三方库，使用了 promise ，比如 vuex , 这些库在主流浏览器上没有问题，在 ie11上却无法运行

解决方案

ie11 安装 babel-polyfill 这类兼容插件

在没有脚手架的项目上误用es6语法去写项目

习惯了，es6的便捷后，难免在普通项目里面顺手就写了 let 结果开发的时候使用的是模拟器，都能正常运行，苹果上也测试正常，跑到安卓机子上网页就挂了

微信签名与hash的孽缘

在开发spa应用的时候，由于路由是用 hash模式标识的，开发倒是挺方便的，但在微信签名的时候就不太友好了，后端签名的时候需要去掉 hash部分，否则会出现签名不成功的情况

解决方案：

后端在做签名的时候，去掉 url #号后面部分

wx.config({  
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
    appId: '', // 必填，公众号的唯一标识  
    timestamp: , // 必填，生成签名的时间戳  
    nonceStr: '', // 必填，生成签名的随机串  
    signature: '',// 必填，签名，见附录1  
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});

总结前端项目开发中遇到的那些坑

西南地区IT社群(QQ)