`
aijuans
  • 浏览: 1543983 次
社区版块
存档分类
最新评论

外观/门面模式(Facade)

 
阅读更多

Facade Pattern 国内有些书译为门面模式,如「Java与模式」,「JavaScript设计模式」。有些则译为外观模式,如「设计模式:可复用面向对象软件的基础」,「Java设计模式」。这里使用名词“外观模式”。

 

外观模式属于接口型模式,它提供一个更方便,高层接口,使用一致性的界面使得API更加容易使用。它有两个作用:

  1. 简化复杂接口
  2. 解耦和,屏蔽客户端对子系统的直接访问

 

外观模式在JavaScript中被众多类库频繁使用。由于早期各浏览器提供的API差异性较大,类库的基本作用之一是扫平这些凹凸不平,提供统一接口供前端工程师使用。使用外观模式,我们可以间接地与一个复杂子系统打交道,与直接访问相比耦合性更低,更不易出错。

 

比如添加事件标准浏览器使用addEventListener,旧版本IE使用attachEvent,可能自己需要封装一个addEvent函数,这个addEvent函数就是一个门面。

function addEvent(el, type, fn) {
    if (el.addEventListener) {
        el.addEventListener(type, fn, false)
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, fn)
    } else {
        el['on' + type] = fn
    }
}

实际就是将两个不同的函数放到自己定义的函数里,之后使用该函数完成特定功能而不再使用有差异性的函数。

 

又如处理DOM事件时,有时会同时使用以下方法

e.stopPropagation()
e.preventDefault()

可以使用外观模式创建一个新方法stop同时调用这两个方法

function stop(e) {
	e.stopPropagation()
	e.preventDefault()   
}

 

jQuery中大量使用外观模式,比如数据缓存模块,内部internalData,internalRemoveData是低级API,实现核心功能,外部提供了data,removeData这两个高级API供客户端程序员使用。

事件模块也是如此,内部有jQuery.event.add,jQuery.event.remove,jQuery.event.trigger等低级API,向外提供了on/bind,off/unbind,trigger等高级API,甚至再利用on又提供了.click/.dblclick/mouseover/mousedown等更快捷的添加事件API。

Ajax模块也是外观模式的典型例子,jQuery提供了一个基本的,低级接口$.ajax方法,通过封装$.ajax产生了一些便利函数$.get, $.post。再通过封装$.get又产生了$.getJSON,$.getScript等更高级的方法。

 

jQuery里的事件模块和Ajax模块可以说是外观模式在JS中的经典应用。

 

适用场合

对于那些反复同时出现的代码,如函数a和b多次同时出现在代码中,应考虑将a,b组合起来放到一个新函数中。

 

之利

简化了一些复杂接口(如$.ajax, $.event.add),清除不再需要的大对象以及提供一种更加单一,便利的方式展现接口功能。编写一次组合代码,就可以反复使用它,节省了代码量,时间和精力。它还提供了较高层的功能,抽象,降低客户端代码对底层接口的耦合。如$.getJSON,通过$.ajax方法也可以得到相同的效果。但每次都需要配置相同的参数,如果获取JSON的需求很频繁,页面中的相同的代码就需要写很多次。而封装一次$.getJSON,之后就少写很多代码,且该方法更直观。

 

之弊

外观模式并非必不可少,同样的功能不使用它也能完成功能。如不使用$.getJSON,通过$.ajax方法也可以得到相同的效果。此外由于增加了一层闭包,性能会有一定降低。

 

分享到:
评论

相关推荐

    Ajax中使用Facade外观模式的Eclipse版本的Demo

    Ajax中使用Facade外观(门面)模式的Eclipse版本的Demo.

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

    模式定义:外观模式(Facade Pattern):外部与一个子系统的通信必须通过一个统一的外观对象进行,为子系统中的一组接口提供一个一致的界面,外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用。外观...

    facade门面模式

    java设计模式门面模式java设计模式门面模式

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

    主要介绍了C#设计模式编程中外观模式Facade Pattern的应用,外观模式中分为门面(Facade)和子系统(subsystem)两个角色来进行实现,需要的朋友可以参考下

    第14章_外观模式.ppt

    外观模式(Facade Pattern):外部与一个子系统的通信必须通过一个统一的外观对象进行,为子系统中的一组接口提供一个一致的界面,外观模式定义了一个高层接口,这个接口使得这一子系统更加容易使用。外观模式又称为...

    详解PHP中的外观模式facade pattern

    facade这个词,原意指的是一个建筑物的表面、外观,在建筑学中被翻译为“立面”这个术语,国内对facade这个词的关注,可能更多要依赖于laravel的流行,似乎都一致把laravel里的facade翻译作“门面”。说实在的,当第...

    c++设计模式-结构型模式-外观模式

    外观(Facade)模式又叫作门面模式,是一种通过为多个复杂的子系统提供一个一致的接口,而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口,外部应用程序不用关心内部子系统的具体细节,这样会大大降低...

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

    为子系统中的一组接口提供一个一致的界面, Facade 模式定义了一个高层接口,这个接口使得这一子系统更加容易使用。本文给大家介绍Java设计模式详解之门面模式(外观模式),感兴趣的朋友参考下吧

    Python笔记之facade模式

    facade模式,即门面模式,也称外观模式,这个模式的核心思想是使用facade对象为外部客户端提供一个统一的访问一组子系统的接口,即客户端不会直接与各个子系统交互,而是通过facade对象与各个子系统进行通信并使用子...

    设计模式中的facade外观模式在JavaScript开发中的运用

    外观模式(门面模式),是一种相对简单而又无处不在的模式。外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用。 外观模式并不是适配器模式,适配器模式是一种包装器,用来对接口进行适配以便在不...

    C++设计模式原理与实战视频课

    C++设计模式原理与实战视频课 1-1 课程介绍 1-2 导论UML和设计模式导论 2-1 简单工厂方法的定义场景与实现-针对接口编程的设计思想剖析 ...3-2 门面(外观)模式Facade的定义、场景与实用工程技术:LOD

    23种设计模式的实现(Java 版),java设计模式

    Factory模式,Prototype模式,Builder 模式,Singleton模式,Facade模式,Proxy模式,Adapter模式,Composite模式,Decorator模式....

    .NET设计模式(12):外观模式(Fa?adePattern)

    [GOF《设计模式》]门面模式没有一个一般化的类图描述,下面是一个示意性的对象图:外观模式为子系统中的接口定义了一个统一的更高层次的界面,以便于使用。当消费者按照目录采购时,则体现了一个外观模式。消费者...

    二十三种设计模式【PDF版】

    设计模式之 Facade(门面?) 可扩展的使用 JDBC针对不同的数据库编程,Facade提供了一种灵活的实现. 设计模式之 Composite(组合) 就是将类用树形结构组合成一个单位.你向别人介绍你是某单位,你是单位中的一个元素...

Global site tag (gtag.js) - Google Analytics