JS 结构型设计模式 --外观模式

外观模式:为一组复杂的子系统接口提供一个更加高级的统一接口，在js中可以用于消除一些的底层的兼容性

function addEvent(dom,type,fn){
    if(dom.addEventListener){ //支持dom2级操作
        dom.addEventListener(type,fn)
    }else if(dom.attachEvent){ //不支持dom2 但支持attach方法
        dom.attachEvent('on'+type,fn)
    }else{ //上面上个方法都不支持的方式
        dom['on'+type] = fn;
    }
}
比如为dom添加事件，这个时候需要考虑到浏览器之间的不同兼容性，老旧版本的兼容性；
通过使用对浏览器能力的检测(dom.addEventListener)来使用不同的方法来添加事件

function getEvent(event){
    //标准浏览器返回event，IE返回window.event
    return event || window.event;
}
//event在标准与ie中也存在差异

function getTarget(event){
    var event = getEvent(event);
    //event.target，IE返回event.srcElement
    return event.target || event.srcElement;
}
//event.target在标准与ie中也存在差异

function preventDefault(event){
    var event = getEvent(event);
    if(event.preventDefault){ //标准浏览器的event.prevent()
        event.preventDefault();
    }else{
        event.returnValue = false;  //IE
    }
}
//event.preventDefault在标准与ie中也存在差异


function getCss(dom){
    // 利用判断是否支持currentStyle（是否为ie）
    return dom.currentStyle ? dom.currentStyle : document.defaultView.getComputedStyle(dom, null);
}

例子如下:

    
        
        
        
        
        
        
    
    
        
11111111111
        
    

d.css

.d2{
    position: relative;
}