[设计模式][面板模式][Javascript]


The Facade Pattern is an object that provide a simplified interface to a larger body of code, such as a class library. A Facade can
+ make a software library easier to use, understand and test, since the facade has convenient methods for common tasks
+ make the library more readable, for the same reason;
+ reduce dependencies of outside code on the inner working of a library, since most code uses the facade, thus allowing more flexibility in developing the system
+ wrap a poorly designed collection of APIs with a single well-designed API
From http://en.wikipedia.org/wiki/Facade_pattern

定义

外观模式的目标是为子系统提供一个一致的”界面”,定义了一个高层的接口,这个接口使得这一子系统更加容易使用

客户如果直接使用子系统,需要对子系统“知道”的更多,“知道”本身就增加了耦合
在子系统上抽象出一个面板层,面板层是对子系统爆出路的接口的包装。对于客户来说只需要知道面板层,而不需要知道被面板层包装的子系统,从而降低耦合。
如果有一天更换子系统,同样的只要抽象出一致的面板层,对客户来说调用没有发生变化。

需求

对于智能手机的开发,新兴起一种Hybrid开发,在手机App中嵌入web,通过javascript与手机底层的通信,来实现web本身不能实现的功能

  • native层需要暴露出一组公共的接口,web层通过调用这些接口达到同样的工作目标

[设计模式][面板模式][Javascript]

类图

[设计模式][面板模式][Javascript]

工作中的实际案例,所以对Hybrid这里的设计掺杂了桥接模式和面板模式两种,另外还有些移动端Hybrid的知识补充。

关于Hybrid的知识,另外有文档补充,简单说一下,Hybrid核心的URL Scheme,关于URL Scheme可以参考这篇文章,很犀利:http://xujiwei.com/blog/2011/09/ios-app-custom-url-scheme-design/

对于URL Scheme的支持,Android从4.4开始,IOS开始的版本较早,未考证。可以把url schem看做是暴露出来的API,把native底层看做是一个子系统,所以需要构建UrlSchemeFacade来封装子系统露出来的接口。

HybridBridge职责是从UrlSchemeFacade中获取接口,调用对应的服务。
在Native层,其实也做了一个Facade的设计,它把各个模块看做是子系统,然后进行封装出需要的URL Scheme

角色

  • UrlSchemeFacade (Facade): Native提供的Url Scheme的面板

实现

var prototype = require('prototype');

var UrlSchemeFacade = prototype.Class.create({

  nativeInterfaceMap: {
    'geo.locate': 'ctrip://wireless/geo/locate',
    'device.info': 'ctrip://wireless/device/info'
  },

  getUrlScheme: function(key) {
    return this.nativeInterfaceMap[key];
  }

});

UrlSchemeFacade.API = {
  'GEOLOCATE':'geo.locate',
  'DEVICEINFO': 'device.info'
}

var HybridBridge = prototype.Class.create({

  initialize: function(facade) {
    this.urlSchemeFacade = facade;
  },

  request: function(api) {
    var url = this.urlSchemeFacade.getUrlScheme(api);
    console.log(url);

    // @todo 调用url scheme
    // window.location.replace = url;
  }

});

var Main = function () {
  var urlSchemeFacade = new UrlSchemeFacade();
  var hybridBridge = new HybridBridge(urlSchemeFacade);

  hybridBridge.request(UrlSchemeFacade.API.GEOLOCATE);
}

Main();

参考