js的兼容性处理

在一开始学习js的时候,从基础语法到动画的学习过程中,不得不提的一点就是兼容性处理

为什么会有兼容性处理???一开始的时候微软一家独大,认为他自己就是标准,然而后来各种浏览器百花争放,不同浏览器支持的属性有所不同.如果我们做一个基本的网页,那用户装各种浏览器的都有.那我们 可爱的程序员可就多写点能力检测的代码了.

 

在这里再说一点,现在浏览器升级很快,连微软也变得很乖,跟同谷歌火狐,也支持了99%标准的属性或者方法.所以在做产品开发的时候,针对产品的用户群,可以少些点兼容性代码哟.因为毕竟你在做一个游戏网站的时候,不会有一个老太拿着一款ie6的浏览器来上你的网站打游戏.哈哈~~~

 

其实不要看兼容性处理这个词吧,那样的高大上,甚至一开始小编我都是晕晕哒.可是一看别人的代码,不就是个if....else么.简而言之,就是做判断,如果浏览器不支持这种属性那就else一下,换另外一个属性呗.

第一点说下事件的兼容性,写这种兼容性代码,一般用一个函数封装起来,或者一个对象,我们去调用这个函数,或者调用对象里面的方法.

/**
 * 获取滚动出去的距离
 * 在ie和谷歌中有差别，有的是根据body，有的是根据html元素
 * 返回的是滚动出去的距离
 * @returns {{scrollLeft: number, scrollTop: number}}
 */

function scroll() {
    return {
        scrollLeft: document.body.scrollLeft || document.documentElement.scrollLeft,
        scrollTop: document.body.scrollTop || document.documentElement.scrollTop,
    }
}
/**
 * 获取事件参数在页面中的位置，ie8中不兼容pageX pageY 老版本也不支持e这个事件参数，所以e要进行e=e||window.event的处理
 * 返回的是页面距离
 * @param e
 * @returns {{pageX: (*|Number), pageY: (*|Number)}}
 */
function getPage(e) {
    return {
        pageX: e.pageX || (e.clientX + scroll().scrollLeft),
        pageY: e.pageY || (e.clientY + scroll().scrollTop)
    }

}
/**
 *
 * @param element
 * @param type
 * @param listen
 */
function addEventListener(element,type,listener){
    if(element.addEventListener){
        element.addEventListener(type,listener,false);
    }else if(element.attachEvent){
        element.attachEvent("on"+type,listener);
    }else{
//最后一步,就使用大家都行的简单事件注册吧
        element["on"+type]=listener;
    }
}
function removeEventListener(element,type,listener){
    if(element.addEventListener){
        element.addEventListener(type,listener,false);
    }else if(element.attachEvent){
        element.detachEvent("on"+type,listener);
    }else{
        element["on"+type]=listener;
    }
}

再说一个 关于找节点的兼容性处理,

/**
 * 获得当前对象的上一个标签元素
 * @param obj
 * @returns {*}
 */
function getPreviousSibling(obj){
    if(obj.previousElementSibling){
        return obj.previousElementSibling;
    }else {
        var node = obj.previousSibling;//是所有的浏览器都支持的，但是得判断节点类型
        while(node&&node.nodeType!=1){
            node = node.previousSibling;
        }
        return node;  //将找到的标签节点返回
    }
}

/**
 * 获取当前元素的兄弟标签节点的函数
 * @param obj
 * @returns {*}
 */
function getNextSibling(obj){
    if(obj.nextElementSibling){ // 火狐谷歌都支持的，只会获得标签兄弟节点，IE8不支持
        return  obj.nextElementSibling;
    }else {
        var node = obj.nextSibling;// nextSibling是所有的浏览器都会支持的，但是会获得文本节点，IE8及之前的浏览器会忽略空白文本节点
        while(node&&node.nodeType!=1){
            node = node.nextSibling;
        }
        return node;
    }
}

/**
 * 获得兼容性的当前对象的第一个子标签节点
 * @param obj
 * @returns {*}
 */
function getFirstChild(obj){
    if(obj.firstElementChild){
        return obj.firstElementChild;//将获取到的第一个子节点元素返回
    }else {
        var node = obj.firstChild;//获得当前对象的第一个子节点，但是这个节点有可能是文本节点
        while(node&&node.nodeType!=1){
            node = node.nextSibling;
        }
        return node;
    }
}

/**
 * 获得当前对象的最后一个子标签节点
 * @param obj
 * @returns {*}
 */
function getLastChild(obj){
    if(obj.lastElementChild){
        return obj.lastElementChild;
    }else {
        var node = obj.lastChild;
        while(node&&node.nodeType!=1){
            node = node.previousSibling;//当前对象的上一个兄弟姊妹节点
        }
        return node;
    }
}

代码就是这样写的,此路不通,再换一路.再不通,再换一路.再再不通,不好意思,我这个产品不适合你这个老太~~~~~