分分钟理解外观模式

外观模式（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 = 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('呵呵')}
}

当遇到这些场景，我们应该考虑使用外观模式：
1、为复杂的模块或子系统提供外界访问的模块。 2、子系统相对独立。 3、预防低水平人员带来的风险。

ＯＫ，以上就是本篇分享，你“学废”了吗？

我是掘金安东尼，输出暴露输入，技术洞见生活。

本文摘自：https://blog.51cto.com/u

分分钟理解外观模式2022-04-29 13:56:29

分分钟理解外观模式
2022-04-29 13:56:29