JavaScript的兼容小坑和调试小技巧

Posted 2020-11-21 chongzixing

javascript作为一种弱类型编程语言，入门简单，只要稍微注意一下IE方面的兼容性，就可以很好的使用它。

本文主要是对IE兼容的小坑和调试的小技巧进行举例分析，并给出解决方法。

1、var str； 与 var str = “”；的区别

 1 <script>
 2  var Str1;
 3 for (var i = 0; i < 3; i++)
 4 {  Str1 += "xxx"         } 
 5 alert(Str1);
 6 var Str2 = "";
 7 for (var i = 0; i < 3; i++)
 8 { Str2 += "xxx"            }
 9 alert(Str2);
10 </script>

一个变量，如果定义的时候不赋值，那么就是undefined,但是不会报错。 即使加了字符串，也是undefined，因此定义一个变量的的时候要赋值。

2、参数列表末尾的逗号

在做前后端交互用到$.ajax({})的时候，通常要传递一些数据，这些数据以键值对的形式存在，中间用逗号隔开，但是如果最后一个参数对后面还是有逗号，以逗号结尾，在IE上就会报错，逗号后面的JS都会失效。

data:{
          "name": demo,
          "age": 16,  //这里的16后面如果有逗号，IE就会报错，其他浏览器正常
        },

 

 解决方案，最后一个参数后面什么也不带，不带小尾巴

 3、const与var

在火狐下面const与var都可以定义变量，const定义的变量不能修改，因此用它来定义常量，在初始化的时候必须初始化，var定义的变量就比较灵活，可以修改。

但是在ie下，只能用var来定义常量。

4、event.X与event.Y的问题

在ie下，event对象具有x,y属性，但是没有pageX和pageY的属性，

在Firefox下，event对象有pageX,PageY属性，但是没有x,y属性。

解决方法：使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX.

5、清除IE缓存的两种方式

第一、就是引入JS的时候，在后面加个new Date()

 <script type="text/javascript" src="/123.js?new Date()"></script>

 

第二、就是在index.html的头部写入以下代码

1 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
2 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
4 <meta http-equiv="Cache-control" content="no-cache">
5 <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
6 <meta http-equiv="Cache" content="no-cache">
7 <meta http-equiv="Expires" content="0">