js之瀏覽器兼容性

一、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就會被修改成默認值；

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

一、arguments.length是否爲1

二、判斷值是否爲undefined

修改後的完整代碼？

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

 

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

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");
　　}
};

 

三、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用來判斷一個屬性是定義在對象自己而不是繼承自原型鏈。

 

四、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;
　　}}