JS 外观模式

BothEyes1993 发布于2019-08-22 11:18 / 1752人阅读

摘要：外观模式在中常常用于解决浏览器兼容性问题。实现外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式的优势是易于使用，而且本身也比较轻量级。

1. 简介

外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口值得这一子系统更加容易使用。
外观模式在JS中常常用于解决浏览器兼容性问题。

2. 实现

外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式经常被认为开发者必备，它可以将一些复杂操作封装起来，并创建一个简单的接口用于调用。
外观模式经常被用于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("呵呵")}
}

3. 总结

那么何时使用外观模式呢？一般来说分三个阶段：

在设计初期，应该要有意识地将不同的两个层分离，比如经典的三层结构，在数据访问层和业务逻辑层、业务逻辑层和表示层之间建立外观Facade。

在开发阶段，子系统往往因为不断的重构演化而变得越来越复杂，增加外观Facade可以提供一个简单的接口，减少他们之间的依赖。

在维护一个遗留的大型系统时，可能这个系统已经很难维护了，这时候使用外观Facade也是非常合适的，为系统开发一个外观Facade类，为设计粗糙和高度复杂的遗留代码提供比较清晰的接口，让新系统和Facade对象交互，Facade与遗留代码交互所有的复杂工作。

本文是系列文章，可以相互参考印证，共同进步~

JS 抽象工厂模式

JS 工厂模式

JS 建造者模式

JS 原型模式

JS 单例模式

JS 回调模式

JS 外观模式

JS 适配器模式

JS 利用高阶函数实现函数缓存(备忘模式)

JS 状态模式

JS 桥接模式

JS 观察者模式

网上的帖子大多深浅不一，甚至有些前后矛盾，在下的文章都是学习过程中的总结，如果发现错误，欢迎留言指出~

参考：
设计模式之外观模式
《Javascript 设计模式》 - 张荣铭

PS：欢迎大家关注我的公众号【前端下午茶】，一起加油吧~

另外可以加入「前端下午茶交流群」微信群，长按识别下面二维码即可加我好友，备注加群，我拉你入群～

idc机房托管超融合服务器外观模式 js继承模式 JS设计模式 js 创建对象安全模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92141.html

js设计模式 --- 外观设计模式

摘要：外观设计模式外部与一个子系统的通信必须通过一个统一的门面对象进行，这就是门面模式。此角色知晓相关的子系统的功能和责任。外观模式结构客户端正常调用方式外观模式调用方式实现未使用外观模式子系统类客户端调用使用外观模式子系统类同上外观类客户端调用外观设计模式外部与一个子系统的通信必须通过一个统一的门面(Facade)对象进行，这就是门面模式。外观模式为子系统提供了统一的界面, 屏蔽了子类...

saucxs 2019-08-26 11:47 评论0 收藏0
JavaScript设计模式系列八：外观模式

摘要：外观模式外观模式是指提供一个统一的接口去访问多个子系统的多个不同的接口，为子系统中的一组接口提供统一的高层接口。外观模式在我们的日常工作中十分常见。外观模式外观模式是指提供一个统一的接口去访问多个子系统的多个不同的接口，为子系统中的一组接口提供统一的高层接口。使得子系统更容易使用，不仅简化类中的接口，而且实现调用者和接口的解耦。外观模式在我们的日常工作中十分常见。我们来看一个例子...

tianren124 2019-08-22 15:58 评论0 收藏0
JS设计模式之Facade（外观）模式

摘要：概念模式为更大的代码提供了一个方便的高层次接口，能够隐藏其底层的真是复杂性。参考设计模式设计模式系列文章设计模式之模块模式揭示模块模式设计模式之单例模式设计模式之外观模式概念 Facade模式为更大的代码提供了一个方便的高层次接口，能够隐藏其底层的真是复杂性。可以把它想成是简化API来展示给其他开发人员。优缺点优点简化接口使用者与代码解耦易于使用缺点存在隐性成本，性...

xiaodao 2019-08-23 13:57 评论0 收藏0
JS 设计模式十一（外观模式）

摘要：外观模式为子系统中的一组接口提供一个一致的界面，模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。代码外观模式启动启动启动外观模式优点减少系统相互依赖。适用场景为复杂的模块或子系统提供外界访问的模块。外观模式为子系统中的一组接口提供一个一致的界面，Facade模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。隐藏系统的复杂性，并向客户端提供了一个客户端可以访问系...

ISherry 2019-08-19 18:23 评论0 收藏0
【JS】常用设计模式

摘要：常用设计模式大型单页应用里，复杂度上升到一定程度时，没有适当的设计模式进行降耦，后续的开发也难以下手。而设计模式正是为了降耦而存在。特点满足单一职责原则使用代理模式，不在构造函数中判断是否已经创建过该单例满足惰性原则应用弹出登陆窗口。 JS常用设计模式大型单页应用里，复杂度上升到一定程度时，没有适当的设计模式进行降耦，后续的开发也难以下手。而设计模式正是为了降耦而存在。单例模式单...

VishKozus 2019-08-26 11:45 评论0 收藏0