外观模式:为一组复杂的子系统接口提供一个更加高级的统一接口，在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);
}

例子如下:

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="index.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" href="d.css" />
        <title></title>
        <style>
            .d1{
                margin:0 auto;
                width:100px;
                height:30px;
            }
        </style>
    </head>
    <body>
        <div id="d1" class="d1 d2">11111111111</div>
        <script>
            window.onload = function(){
                var d = document.getElementById('d1');
                addEvent(d,'click',function(){
                    console.log(123)
                })
                console.log(getCss(d).width);
                console.log(getCss(d).position);
            }
        </script>
    </body>
</html>

d.css