外观模式

外观模式(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;
    }
}

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

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

设计模式

全部评论

相关推荐

2025-12-27 16:01
重庆大学 Java
蛊界Go学长林剑行:项目部分,不光要展示技术栈的熟练程度,还要有架构意识+产品意识。知道每个业务逻辑落地的成果和技术选型的思考,不然纯炫技是没意义的,毕竟你用的这些技术大概率跟大厂实际项目不垂直,面试官不一定有兴趣
简历中的项目经历要怎么写
点赞 评论 收藏
分享
2025-12-19 21:53
门头沟学院 Java
想做OpenGL:不要一来就把自己定位这么低吧,把大厂当成目标,不断去学技术做项目,最后你至少能学到能找到中小厂的技术水平,你一上来就找这种两千块还要前后端都会的,其实对你用处不会很大,真去了也是打杂
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务