分分钟理解外观模式

弓背霞明剑照霜，秋风走马出咸阳。这篇文章主要讲述分分钟理解外观模式相关的知识，希望能为你提供帮助。
外观模式（Facade Pattern）隐藏系统的复杂性，并向客户端提供了一个客户端可以访问系统的接口。这种类型的设计模式属于结构型模式，它向现有的系统添加一个接口，来隐藏系统的复杂性。

外观模式经常被用于javascript类库里，通过它封装一些接口用于兼容多浏览器，外观模式可以让我们间接调用子系统，从而避免因直接访问子系统而产生不必要的错误。
外观模式的优势是易于使用，而且本身也比较轻量级。但也有缺点外观模式被开发者连续使用时会产生一定的性能问题，因为在每次调用时都要检测功能的可用性。
我们使用了外观模式通过检测浏览器特性的方式来创建一个跨浏览器的使用方法。比如对??document??对象添加??click??事件的时候：

function addEvent(dom, type, fn)
if (dom.addEventListener)// 支持DOM2级事件处理方法的浏览器
dom.addEventListener(type, fn, false)
else if (dom.attachEvent)// 不支持DOM2级但支持attachEvent
dom.attachEvent(on + type, fn)
else
dom[on + type] = fn// 都不支持的浏览器

const myInput = document.getElementById(myinput)
addEvent(myInput, click, function() console.log(绑定 click 事件))

还可以用来解决一些其他的浏览器兼容性问题：

const getEvent = function(event)// 获取事件对象
return event || window.event// IE下window.event

const getTarget = function(event)// 获取事件元素
const event = getEvent(event)
return event.target || event.srcElement// IE下event.srcElement

const preventDefault = function(event)// 阻止默认事件
const event = getEvent(event)
if (event.preventDefault) event.preventDefault()
else event.returnValue = https://www.songbingjia.com/android/false// IE下

const cancelBubble = function(event)
const event = getEvent(event)
if (event.stopPropagation) event.stopPropagation()
else event.cancelBubble = true// IE下

document.onclick = function(e)
preventDefault(e)
if (getTarget(e) !== document.getElementById(myinput)) console.log(呵呵)