西南IT社区
    • 注册
    • 登录
    • 搜索
    • 主页
    • 问答
    • 话题
    • 热门
    • 圈子
    • 工作机会
    • 活动
    • 项目

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

    极客生涯
    1
    1
    203
    正在加载更多帖子
    • 从旧到新
    • 从新到旧
    • 最多赞同
    回复
    • 在新帖中回复
    登录后回复
    此主题已被删除。只有拥有主题管理权限的用户可以查看。
    • ivorzk
      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>
      

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

      7619d94f-e67f-4154-8479-fb128a0206ef-image.png

      解决方案:

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


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

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

      729f643a-eee4-45ab-b5d6-3770573f0b3d-image.png


      代码执行时机问题

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

      fe08f1d0-3da1-4dd4-897d-a9c72a7cfc93-image.png

      解决方案:

      待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  
      });
      
      1 条回复 最后回复 回复 引用 0
      • First post
        Last post
      使用HTML构建办公软件 使用HTML构建办公软件 使用HTML构建办公软件
      成
      Y
      洋
      书
      Y
      D
      U
      Y
      娇
      玩
      1
      光
      A
      庆
      小
      U
      Y
      L
      I
      Z
      I
      Y
      C
      Z

      西南地区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
      西藏
      社群
      昆明网页设计交流吧
      友情链接
      • Funtask
      • Funtask 社区
      • SUWIS
      ©2019-2021 滇ICP备20006698号