整理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);
          }
      }
   };
}