整理JS筆記-JavaScript兼容性

常見的JavaScript兼容性及解決方案整理：

1.選擇器兼容性
  getElementsByClassName  ( IE9以及以上支持）
  querySelector/querySelectorAll （IE8以及以上支持）

2.獲取計算後的樣式
  getComputedStyle （IE9以及以上支持）
  currentStyle（全部IE都支持，它是一個屬性）

   兼容方法：封裝函數

function getStyle(obj,attr){
  if(obj.currentStyle){
  return obj.currentStyle[attr];
  }else{
  return getComputedStyle(obj)[attr];
  }
}

3.trim方法去除字符串先後空格 （支持IE9以及以上）

   兼容方法：在原型上對trim方法用正則表達式去除空格

var str=' kaivon ';
//console.log(str.trim());
String.prototype.trim=function(){
  return this.replace(/^\s+|\s+$/g,'');
};

4.forEach()遍歷數組（ IE9及以上能支持）

var color=['red','green','blue','yellow'];
color.forEach(function(value,index,array){
  console.log(value,index,array);
});

 兼容方法：for循環數組

var color=['red','green','blue','yellow'];
for(var i=0;i<color.length;i++){
  console.log(color[i],i,color)
}

5.獲取DOM節點
   firstChild
   lastChild
   nextSibling
   previousSibling
   以上方法都是兼容的，可是各個瀏覽器取到的結果不同。
   IE8如下的非標準瀏覽器獲取到的是標籤節點，標準瀏覽器獲取到的不必定是標籤節點爲 #text。

var box=document.getElementById("box");
//alert(box.firstChild.nodeName);
//alert(box.lastChild.nodeName);
//alert(box.nextSibling.nodeName);
alert(box.previousSibling.nodeName);

6.滾動條距離

   BOM屬性：（IE9以及以上支持）
   window.pageXOffset;
   window.pageYOffset;
   DOM屬性：
   scrollTop/scrollLeft
   document.documentElement.scrollTop （其它的瀏覽器從document身上去獲取）
   document.body.scrollTop （ chrome從body身上獲取）
   兼容方法：

document.onclick=function(){
  var top=document.documentElement.scrollTop||document.body.scrollTop;
  alert(top);
}

7.event對象
    IE9以及以上支持
    IE6,7,8的事件對象是window身上的一個屬性
   兼容方法：

var ev=ev||window.event;

8.addEventListener綁定事件
   addEventListener（ IE9以及以上支持）
   attachEvent   （IE678支持），可是要注意它的事件名字參數要加on。
  兼容方法：綁定函數封裝

//綁定事件
function addEvent(obj,type,fn){
  if(obj.addEventListener){
  obj.addEventListener(type,fn);
  }else{
  obj.attachEvent('on'+type,fn);
  }
};
//取消綁定
function removeEvent(obj,type,fn){
  if(obj.removeEventListener){
  obj.removeEventListener(type,fn);
  }else{
  obj.detachEvent('on'+type,fn);
  }
}

addEvent(box,'click',alertBox);
function alertBox(){
  alert(1);
  removeEvent(box,'click',alertBox);
}

9.滾輪事件兼容
   mousewheel            IE/chrome支持
    滾動的方向            event.wheelDelta
                                 上：120（正數）
                                 下：-120（負數）
   DOMMouseScroll     FireFox（必須用addEventListener添加）支持
    滾動的方向            event.detail
                                 上：-3（負數）
                                 下：3（正數）
  兼容方法：滾輪事件封裝

function myScroll(obj,upFn,downFn){
  obj.onmousewheel=fn;
  obj.addEventListener('DOMMouseScroll',fn);

  function fn(ev){
  if(ev.wheelDelta>0 || ev.detail<0){
  //這個條件成立，說明如今都是往上邊滾動
  //upFn();
  upFn.call(obj,ev);
  }else{
  //走這裏說明，都是往下滾動
  //downFn();
  downFn.call(obj,ev);
  }
  ev.preventDefault();
  return false;
  };
}

10.Ajax兼容
     Ajax的兼容包括：
    1. XMLHttpRequest對象的兼容  (IE6如下不兼容)
    2.完成事件onreadystatechange、onload的兼容
        onreadystatechange： readyState的值發生改變時觸發的事件，只要這個值有變化就會觸發
        onload： 全部請求成功完成後觸發，此時readystate的值爲4 （IE678不支持）
      （新的XMLHttpRequest不推薦用onreadystatechange，使用onload）
      兼容方法：完整的Ajax封裝

     注意：由於JSON對象是不兼容的，因此在引入封裝好的Ajax以前，須要引入json2.js文件，保證JSON對象在全部平臺的兼容。

function ajax(json){
      var settings={
      url:'',
      method:'get',
      data:{},
      dataType:'json',
      succ:function(){},
      fail:function(){}
  };

  //用戶傳的參數覆蓋默認參數
  for(var attr in json){
      settings[attr]=json[attr];
  }

  //把數據拼成正確的格式
  var arr=[];
  for(var attr in settings.data){
      arr.push(attr+'='+settings.data[attr]);
  }
  settings.data=arr.join('&');

  //聲明一個ajax對象
  var ajax=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');

  //設置請求方式
  if(settings.method.toLocaleLowerCase()==='get'){
      ajax.open(settings.method,settings.url+'?'+settings.data+'&'+new Date().getTime(),true);
      ajax.send();
      }else{
      ajax.open(settings.method,settings.url,true);
      ajax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
      ajax.send(settings.data);
  }

  //設置完成事件的兼容性
  if(typeof ajax.onload==='undefined'){
      ajax.onreadystatechange=ready;
  }else{
      ajax.onload=ready;
  }

  function ready(){
      if(ajax.readyState==4){
          if(ajax.status==200){
          switch(settings.dataType.toLocaleLowerCase()){
          case 'string':
          settings.succ(ajax.responseText);
          break;
       
          case 'json':
          settings.succ(JSON.parse(ajax.responseText));
          break;
       
          case 'xml':
          settings.succ(ajax.responseXML);
          }
          }else{
          settings.fail(ajax.status);
          }
      }
   };
}