深入理解JavaScript系列（30）：设计模式之外观模式详解

介绍

外观模式（Facade）为子系统中的一组接口提供了一个一致的界面，此模块定义了一个高层接口，这个接口值得这一子系统更加容易使用。

正文

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

外观模式经常被用于JavaScript类库里，通过它封装一些接口用于兼容多浏览器，外观模式可以让我们间接调用子系统，从而避免因直接访问子系统而产生不必要的错误。

外观模式的优势是易于使用，而且本身也比较轻量级。但也有缺点 外观模式被开发者连续使用时会产生一定的性能问题，因为在每次调用时都要检测功能的可用性。

下面是一段未优化过的代码，我们使用了外观模式通过检测浏览器特性的方式来创建一个跨浏览器的使用方法。

代码如下:

var addMyEvent = function (el, ev, fn) {
    if (el.addEventListener) {
        el.addEventListener(ev, fn, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + ev, fn);
    } else {
        el['on' + ev] = fn;
    }
};

再来一个简单的例子，说白了就是用一个接口封装其它的接口：

代码如下:

var mobileEvent = {
    // ...
    stop: function (e) {
        e.preventDefault();
        e.stopPropagation();
    }
    // ...
};

总结

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

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

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

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

参考：大话设计模式

赞 (0)

相关推荐

  • java设计模式之外观模式学习笔记

    java设计模式之外观模式学习笔记

    外观模式: 又称门面模式: 外观Facade为子系统的一组接口提供一个一致界面,使得这组子系统易于使用(通过引入一个新的外观角色降低原系统复杂度,同时降低客户类与子系统的耦合度). 图片来源: 设计模式: 可复用面向对象软件的基础. 实现 案例需求: 租房 有过自己找房租房经历的同学能够体会得到找房是件很痛苦的事, 不光要挨个小区跑而且还要跟(二)房东讨价还价. 于是后来学聪明了, 不再自己挨门挨户的磨嘴皮子, 而是直接找像链家.我爱我家这样的房屋中介, 他们手上握有一定的房源, 我们只需付给他

  • 解析C#设计模式编程中外观模式Facade Pattern的应用

    解析C#设计模式编程中外观模式Facade Pattern的应用

    实例引入 在家庭影院中,有灯光,屏幕,投影机,功放机,DVD 播放器这几个基本的工具: 灯光,可以关闭灯光和打开灯光. 投影机,可以打开和关闭投影机. 屏幕,可以打开和关闭. 功放机,可以关闭音量和打开音量. DVD 播放器,可以打开播放器和关闭播放器. 以最普通的方式实现观看电影,类图如下所示: 按照类图所示,如果要观看电影,必须在客户端执行下面的操作:先打开投影仪,再打开功放机,再打开屏幕,再打开 DVD 播放机,再打开灯光,在经历了这么多操作后,才可以看一场电影.而在关闭电影的时候,也要先

  • php设计模式 Facade(外观模式)

    php设计模式 Facade(外观模式)

    模式定义:外观模式(Facade Pattern):外部与一个子系统的通信必须通过一个统一的外观对象进行,为子系统中的一组接口提供一个一致的界面,外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用.外观模式又称为门面模式,它是一种对象结构型模式. 模式结构: 外观模式的就是让client客户端以一种简单的方式来调用比较复杂的系统,来完成一件事情. Subsystem: 复制代码 代码如下: class car { public function start() { print_r("

  • Java设计模式详解之门面模式(外观模式)

    Java设计模式详解之门面模式(外观模式)

    门面模式(Facade Pattern)也叫外观模式,它隐藏系统的复杂性,并向客户端提供一个可以访问系统的接口.这种类型的设计模式属于结构型模式,它向现有的系统添加一个接口,来隐藏系统的复杂性,为子系统中的一组接口提供了一个统一的高层访问接口,这个接口使得子系统更容易被访问或使用.这种模式涉及到一个单一的类,该类提供了客户端请求的简化方法和对现有系统类方法的委托调用. 简而言之,就是把一堆复杂的流程封装成一个接口供给用户更简单的使用,这个设计模式里有三个角色: 1)门面角色( facade ):

  • C#设计模式之外观模式介绍

    C#设计模式之外观模式介绍

    1.在设计初期阶段,应该要有意识的将不同的两层分离,比如考虑数据访问层.业务逻辑层.表示层之间建立外观模式,这样可以为子系统提供简单一致的接口,使得耦合大大降低. 2.开发阶段,子系统内部由于不够重构变得非常复杂,增加外观模式可以屏蔽这个复杂性,并提供简单的接口. 3.维护一个遗留的大型系统,代码不好再维护时,使用外观模式也是不错的选择. 看看外观模式的结构图: Facade类定义:可以给高层系统提供简单的接口 复制代码 代码如下: class Facade { SubSystemOne one

  • C++设计模式之外观模式

    C++设计模式之外观模式

    前言 在实际开发时,面对一个大的系统,总是会将一个大的系统分成若干个子系统,等子系统完成之后,再分别调用对应的子系统来完成对应的整体功能,这样有利于降低系统的复杂性:最终进行实现某个具体的功能时,我们将对应的子系统进行组合就好了:但是,子系统那么多,关系那么复杂,组合形成一个完整的系统,是存在难度的. 我们在使用visual studio进行编译C++代码时,你只是在菜单中选择了Build,然后visual studio就开始了一堆的编译工作:你应该知道,因为你的一个简单的Build动作,编译器

  • JavaScript设计模式之外观模式实例

    外观模式(门面模式),是一种相对简单而又无处不在的模式.外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用. 用一段再简单不过的代码来表示: 复制代码 代码如下: var getName = function(){ return "svenzeng" } var getSex = function(){ return 'man' } 如果你需要分别调用getName和getSex函数. 那可以用一个更高层的接口getUserInfo来调用. 复制代码 代码如下: var

  • JavaScript设计模式之外观模式介绍

    外观模式说明 说明:外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口; 外观模式是我们经常使用遇到的模式,我们经常涉及到的功能,可能需要涉及到几个子接口或子系统,而我们的某个功能,可能只需要这向个多个子接口中的一个或几个组成的顺序封装.如果是业务功能直接对应子接口或子系统的,可能要求开发人员对内部需要相当的了解:你可能需要去了解业务流程是怎么走,他的顺序是什么,等等.这即需要开发员了解业务,也使得客户端编程变得相当的复杂: 这里如果有一层

  • Java设计模式之外观模式（Facade模式）介绍

    Java设计模式之外观模式（Facade模式）介绍

    外观模式(Facade)的定义:为子系统中的一组接口提供一个一致的界面. Facade一个典型应用就是数据库JDBC的应用,如下例对数据库的操作: 复制代码 代码如下: public class DBCompare { Connection conn = null; PreparedStatement prep = null; ResultSet rset = null; try { Class.forName( "<driver>" ).newInstance(); co

  • 实例解析设计模式中的外观模式在iOS App开发中的运用

    实例解析设计模式中的外观模式在iOS App开发中的运用

    外观模式(Facade),为子系统中的一组接口提供一个一致的界面,此模式定义 一个高层接口,这个接口使得这一子系统更加容易使用. 下面给大家展示一下类的结构图,想必大家一看就明白了: 其实这个模式中,没有类与类之间的继承关系,只是进行了简单的类引用,统一了对外的接口而已.看起来是不是很简单?废话不多说了,下面简单向大家展示一下代码吧! 注意:本文所有代码均在ARC环境下编译通过. SubSystemOne类接口 复制代码 代码如下: #import <Foundation/Foundation.

随机推荐