H5遇到的那些坑 ( 持续更新 )

最新推荐文章于 2024-08-16 12:22:04 发布

JIseven

最新推荐文章于 2024-08-16 12:22:04 发布

阅读量1.2k

点赞数

分类专栏：项目现成文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/qq_37833745/article/details/121249015

版权

项目现成专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1: 原生js (es5语法和 jquery) 【jquery使用jsonp进行ajax发送请求，在同时发送多个请求时，响应结果会乱】

答：jquery版本1.10.2 ，A请求应当响应 RA，B请求响应 RB，但是偶尔出现 A请求响应了RB。导致响应结果乱了，原因是jquery会在window对象上定义一个变量（window["jsonp1505717931752" ]），变量是以时间戳来定义的，即使定义了时间戳，全局变量也会存在冲突问题，导致响应结果乱。

解决办法：在$.ajax()方法内使用： jsonpCallback: "jsonp" + new Date().getTime() + Math.floor(Math.random() * 10000)。

全局变量为:window["jsonp15057179317521111"]

2: 原生js (es6语法 )[ this 和 let ]

2.1:箭头函数this指向问题. ( this指向问题说明如下图：)

2.2: let定义的变量在window对象中找不到？

答：因为let具有块级作用域，let定义的变量a，在变量a这一行代码前面，是访问不到a的，页面会报错

3: vue2框架相关问题

1、 v-if组件渲染顺序问题?

答：在一进入页面时要向服务端请求数据时，在未请求到数据时，子组件的 mounted 等方法已经渲染，此方法会导致子组件获取不到服务端请求过来的数据。

解决办法：在父组件放置一个 v-if 条件，请求到数据后通过 v-if 来展示页面，v-if 展示后，才触发子组件的 mounted 等方法。

2、如何获取页面dom元素的位置和宽高？

答：如果页面一个元素 input框的清除X，刚开始是隐藏的，通过js控制显示这个X，要计算这个X的位置。就要用到this.$nextTick()方法来获取元素的位置
this.$nextTick(() => {
     let _inputClear=this.$refs.inputClear;
     let _inputClearStyle=_inputClear.getBoundingClientRect();
      // _inputClearStyle是一个对象，包含width、height、top、left值
});
3、webpack2引入 mint-ui 在进行 build 的时候会报错，比如 module 找不到之类的

答：原因是 webpack2 不允许混合使用 import 和 require 引入module

解决办法：

1.使用webpack1

2.改mint-ui的源代码

3.督促mint-ui维护方更改代码

4、在vue2框架中，使用背景图片时，在build压缩代码环节图片找不到路径

答：原因是 build 压缩时背景图片的地址被替换了

解决办法：如果是用 vue-cli 搭建基础框架的可以改 build/util.js下面语句块。主要添加了 publicPath: '../../'
if (options.extract) {
  return ExtractTextPlugin.extract('vue-style-loader', sourceLoader, {
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader', sourceLoader].join('!')
}
5、微信开发中，对于单页面应用，通过hash改变路由的方式不能被微信监听。导致通过微信默认分享出的路径为第一次进入的路径地址

答：解决办法如下

1. 调用微信交互，屏蔽分享

2. 改用多页面

3. ssr

3: css兼容性问题

1、部分安卓手机 input 框 type=date 属性不支持

答：部分 安卓手机低版本 不支持 type=date 属性，安卓4.5版本有手机不支持，如果碰到需要使用日历的项目，需要引入日历插件

2、在移动端编写样式时，计算元素显示定位的位置

答：计算位置最好开启硬件加速，使用 translate3d 来代替设置 left 和 top 值，手机对计算这个位置的速度会提高

3、css3 常用样式有兼容性的属性

答：1、transform、animate、perspective、border-radius、这些属性需要加 -webkit- 前缀，不写会导致在部分手机上有不支持的情况。

2、通过webpack打包工具，引入插件自动添加前缀。

4、线型渐变兼容性问题

答：即使添加了 linear-gradient 和 -webkit-linear-gradient 前缀，也会有部分安卓手机不支持渐变属性，

解决办法：在这个写了渐变元素的父元素添加一层背景颜色，在渐变色不支持的情况下，可看到背景色。

4: 打包压缩问题(gulp、webpack)

1、webpack打包分离依赖公共js文件，总共压缩成2个js（1个依赖js，1个业务js）

答：请看链接https://segmentfault.com/a/1190000009799021

5: 浏览器限制问题

1、url最大长度限制，在浏览器通过url链接访问，url会被截断，多余不会展示在浏览器的地址栏

答：在 ie浏览器 url 链接限制 2083 字节, chrome浏览器是4097字节，多余的字节会被截断。

解决办法：在新pc收银台收银台碰到上面的问题，以前是get方式，现在改成post方式，url变短了。

2、sessionStorage和localStorage 在ie7和8 不支持

答：如果兼容到ie7和8，需要另外引入sessionStorage和localStorage的js库，才能达到ie低版本支持

3、JSON.parse()方法在 ie7和8 不支持

答：需要在 ie 低版本引入 JSON2.js 文件，才能达到在 ie低版本支持JSON.parse()方法

4、ie7和8 不支持input框的placeholder属性

答：需要通过value属性来模拟 placeholder属性

5、浏览器sessionStorage问题

答：在pc收银台项目，支付过程中，保存sessionStorage数据，选择网银支付，POST方式跳转到网银后，网银支付成功回到pc收银台结果页，保存的sessionStorage在部分浏览器内一个数据都没有（始终都是在同一标签页打开页面），如果始终是项目内部页面不存在这个问题。

6、ie8 不支持e属性

function(e){

e || window.event

}