js之瀏覽器兼容性

1、ie瀏覽器不支持函數默認值

　　hi('李四');
　　function hi(msg = '張三'){
	alert(msg);
　　}    

 此函數在火狐、谷歌等瀏覽器下均沒問題，唯獨在萬惡的ie瀏覽器下會提示如下錯誤：

為什么會出現這樣的問題呢？

在ES6之前，不能直接為函數的參數指定默認值，Chrome，Firefox，Safari等瀏覽器對es6支持較好，所以沒有報錯，而萬惡的ie對es6支持的很差勁，所以會報錯

• Chrome：51 版起便可以支持 97% 的 ES6 新特性。
• Firefox：53 版起便可以支持 97% 的 ES6 新特性。
• Safari：10 版起便可以支持 99% 的 ES6 新特性。
• IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

如何解決此問題呢？只能采取變通的方法

　　hi();
　　function hi(msg){
	msg = msg || '張三';
	alert(msg);
　　}

 這種寫法有一種致命的缺點：

那就是如果參數msg賦值了，但是對應的布爾值為false，則該賦值不起作用，如果在調用函數的時候，傳入的參數是一個空字符傳，那么msg就會被修改為默認值；

那又如何避免這個問題呢？需要先判斷一下

1、arguments.length是否為1

2、判斷值是否為undefined

修改后的完整代碼？

    hi(" ");
    function hi(msg){
	msg = arguments.length && arguments[0] != undefined ? msg : '張三';
	alert(msg);
    }

 

2、關於事件的兼容性處理

document.onkeydown = function(event){
　　//兼容IE和Firefox獲得keyBoardEvent對象  
　　event = event ? event : ((window.event) ? window.event : ""); 
   
   //兼容IE和Firefox獲得keyBoardEvent對象的鍵值
　　var key = event.keyCode ? event.keyCode : event.which; 
		
　　if(key == 13){
	alert("hello wolrd");
　　}
};

 

3、Object對象有一個比較常用的方法keys()，keys()方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組，數組中屬性名的排列屬性和使用for…in循環遍歷該對象時返回的順序一致；

不過遺憾的是，keys()方法在ie8及其一下版本不支持，怎么辦呢？

if (!Object.keys){
　　Object.keys = function(o) {
　　　　if (o !== Object(o)){
　　　　　　throw new TypeError('Object.keys called on a non-object');
　　　　}
		
　　　　var k=[],p;
　　　　for (p in o){
　　　　　　if(Object.prototype.hasOwnProperty.call(o,p)){
　　　　　　　　k.push(p);
　　　　　　}
　　　　} 
　　　　return k;
　　}
}

 【說明】Object.prototype.hasOwnProperty用來判斷一個屬性是定義在對象本身而不是繼承自原型鏈。

 

4、getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持。

if(!document.getElementsByClassName){
　　document.getElementsByClassName = function(className){
　　　　var elements = this.getElementsByTagName("*");
　　　　var result = [];
　　　　for(var i=0,length=elements.length;i<length;i++){
　　　　　　if(elements[i].className == className){
　　　　　　　　result[result.length] = elements[i]
　　　　　　}
　　　　}
　　　　return result;
　　}
}