总结前端项目开发中遇到的那些坑
-
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)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏