JavaScript设计模式 Item8 --外观模式Facade_facadeclick

外观模式的实现：

function addEvent(dom, type, fn){
    if (dom.addEventListener) {
        dom.addEventListener(type,fn, false);//W3C浏览器
    }else if (dom.attachEvent) {
        dom.attachEvent("on"+type, fn);//低版本IE
    }else{
        dom["on"+type] = fn;//两种方法都不支持的处理。
    }
}

这样就可以放心的使用了。

var panel = document.getElementById("panel");
addEvent(panel,"click",function(){
    alert("绑定第一个事件");
});
addEvent(panel,"click",function(){
    alert("绑定第二个事件");
});
addEvent(panel,"click",function(){
    alert("绑定第三个事件");
});

四、进一步探讨

回想之前的代码，我还会发现一些兼容性问题，比如e.target与e.preventDefault(),下面我们继续完善代码

//获取事件对象
var getEvent = function(event){
    return event || window.event;//标准浏览器返回event，低版本IE返回window.event;
}
//获取元素
var getTarget = function(event){
    var event = getEvent(event);
    return event.target || event.srcElement;//标准浏览器返回event.target，低版本IE返回event.srcElement;
}
//阻止事件默认行为
var preventDefault = function(event){
    var event = getEvent(event);
    if (event.preventDefault) {
        event.preventDefault();//标准浏览器  
    }else{
        event.returnValue = false;//IE浏览器
    }
}

有了上述方法，我们就可以兼容的方式来完善刚开始的代码

document.onclick = function(e){
    preventDefault(e);
    if (getTarget(e) == document.getElementById("panel")) {
        hidePanel();
    }
}
function hidePanel(){
    alert("隐藏了panel");//没有具体实现。
};

五、封装自己小型代码库

再来一个简单的例子，说白了就是用一个接口封装其它的接口，很多代码库就是通过外观模式来封装多个功能，简化底层代码的操作，比如下方：

var EventUtil = {
    getEvent: function(event){ //获取事件对象
        return event || window.event; //return event?event:window.event;
    },
    getTarget = function(event){//获取目标元素
        var event = getEvent(event);
        return event.target || event.srcElement;
    },
    preventDefault = function(event){//阻止事件默认行为
        var event = getEvent(event);
        if (event.preventDefault) {
            event.preventDefault();//标准浏览器  
        }else{
            event.returnValue = false;//IE浏览器
        }
    },
    addEvent: function(element, type, fn){//添加事件
        if (element.addEventListener) {
            element.addEventListener(type,fn, false);//W3C浏览器
        }else if (element.attachEvent) {
            element.attachEvent("on"+type, fn);//低版本IE
        }else{
            element["on"+type] = fn;//两种方法都不支持的处理。
        }
    },
    removeHandler: function(element, type, fn){//移除事件
        if (element.removeEventListener){
            element.removeEventListener(type, fn, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, fn);
        } else {
            element["on" + type] = null;
        }
    },
    stopPropagation:function(event){//取消事件冒泡
        var event = getEvent(event);
        if (event.stopPropagation) {
            event.stopPropagation();
        }else{
            event.cancleBubble = true;
        }
    }
}

这样我们就可以随便的操作自己的代码库了。

EventUtil.addEvent(panel,"click",function(){


### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。



![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)