JS 外观模式

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. 总结

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

  1. 在设计初期,应该要有意识地将不同的两个层分离,比如经典的三层结构,在数据访问层和业务逻辑层、业务逻辑层和表示层之间建立外观Facade。
  2. 在开发阶段,子系统往往因为不断的重构演化而变得越来越复杂,增加外观Facade可以提供一个简单的接口,减少他们之间的依赖。
  3. 在维护一个遗留的大型系统时,可能这个系统已经很难维护了,这时候使用外观Facade也是非常合适的,为系统开发一个外观Facade类,为设计粗糙和高度复杂的遗留代码提供比较清晰的接口,让新系统和Facade对象交互,Facade与遗留代码交互所有的复杂工作。

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

  1. JS 抽象工厂模式
  2. JS 工厂模式
  3. JS 建造者模式
  4. JS 原型模式
  5. JS 单例模式
  6. JS 回调模式
  7. JS 外观模式
  8. JS 适配器模式
  9. JS 利用高阶函数实现函数缓存(备忘模式)
  10. JS 状态模式
  11. JS 桥接模式
  12. JS 观察者模式

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java3y

纳税服务系统总结

纳税服务系统总结 纳税服务系统是我第一个做得比较大的项目(不同于javaWeb小项目),该项目系统来源于传智Java32期,十天的视频课程(想要视频的同学关注我...

31590
来自专栏美团技术团队

LsLoader——通用移动端Web App离线化方案

背景 由于JavaScript(以下简称JS)语言的特性,前端作用域拆分一直是前端开发中的首要关卡。从简单的全局变量分配,到RequireJS实现的AMD模块方...

490170
来自专栏帘卷西风的专栏

关于cocos2dx程序的BUG调试解决方案

      今天说一下手机游戏开发的调试问题吧。不得不说的是和PC平台游戏、软件开发相比,手机上开发游戏和软件要困难的多。原因是多方面的,比如说开发环境比较复杂...

11320
来自专栏互联网高可用架构

通用架构师应该如何把控迁移技术方案

27460
来自专栏沈唁志

整合ThinkPHP功能系列之微信公众号支付

35250
来自专栏菩提树下的杨过

在win2008 r2中安装windows phone 7开发工具

默认情况下,windows phone7开发工具只能在windows7上安装,我的本本上好不容易把win2008 r2以及相关软件安装好,总不能因为这个又把wi...

20070
来自专栏地方网络工作室的专栏

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器

打造前端 Deepin Linux 工作环境——安装配置 atom 编辑器 好,我个人推荐大家使用 atom 编辑器,第一是免费,第二是好看,第三是好用。 安装...

63780
来自专栏沈唁志

如何在Ubuntu 16.04上安装PrestaShop

如果您曾经考虑过开设在线商店,您可能会感受到各种免费的开源电子商务解决方案。虽然有这么多的选择意味着几乎可以肯定有一个可用的有效解决方案适合您的特定情况,但它也...

35730
来自专栏落影的专栏

iOS开发笔记(五)

前言 社会的模式很多是重复的,当你做一样事情很擅长时,与之类似的事情也能触类旁通。 正文 Code开发 1、delegate的trick 很多人习惯在调用de...

54940
来自专栏不二小段

【爬虫军火库】AnyProxy安装使用【Windows】

分析网络请求详情是写爬虫应用的初始步骤,抓包便是一种十分强大的分析手段,尤其是对手机App进行抓包,往往能收获到Web端没有的API接口。抓包的工具多种多样,功...

2.3K60

扫码关注云+社区

领取腾讯云代金券