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