[設計模式][面板模式][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層經過調用這些接口達到一樣的工做目標

類圖

工做中的實際案例，因此對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();

參考

• http://baike.baidu.com/view/1151448.htm
• http://www.cnblogs.com/kid-li/archive/2006/07/10/446904.html
• http://en.wikipedia.org/wiki/Facade_pattern