外观模式

外观模式(Facade):为一组复杂的子系统接口提供一个更高级的统一接口,通过这个接口使得对子系统接口的访问更容易。
定义一个统一接口方法,提供一个更见的高级接口,简化对复杂的底层接口不统一的使用需求。
对于一个页面文档绑定click事件容易被覆盖,即使用DOM0级,所以需要使用DOM2级的addEventListener来实现,当不可以使用时再使用0级进行绑定

//外观模式实现
function addEvent(dom,type,fn){
    //对于支持DOM2级事件处理程序addEventListener方法的浏览器
    if(dom.addEventListener){
        dom.addEventListener(type,fn,false);
    }
    //对于不支持addEventListener但支持attachEvent方法的浏览器
    else if{
        dom.attachEvent('on'+type,fn);
    }else{
        //对于什么也不支持的浏览器
        dom['on'+type] = fn;
    }
}
//这样就可以对于支持DOM2级方法的浏览器安心绑定事件

//对于IE低版本浏览器不兼容e.preventDefault()和e.target也可以使用外观模式来解决
//获取事件对象
var getEvent = function(e){
    return e || window.e;
}
//获取元素
var getTarget = function(e){
    var event = getEvent(e);
    return event.target || event.srcElement;
}
//阻止默认行为
var preventDefault = function(e){
    var event = getEvent(e);
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

外观模式可以将浏览器不兼容的方法变得简单而又兼容各个浏览器,很多代码库中也是通过外观模式来封装多个功能,简化底层操作方法。

设计模式 文章被收录于专栏

设计模式

全部评论

相关推荐

01-24 08:13
已编辑
合肥工业大学 Java
程序员牛肉:没啥问题。标准的流水线简历,但是学历好一点,所以应该是有约面的机会的。 这段时间可以考虑把自己的两个项目彻底的理一理。争取能够讲清楚每一个功能点
点赞 评论 收藏
分享
起名字真难233:人家只有找猴子的预算,来个齐天大圣他们驾驭不住呀😂😂
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务