[設(shè)計(jì)模式][面板模式][Javascript]

yexiaobai 發(fā)布于2019-08-21 10:18 / 2370人閱讀

摘要：對于客戶來說只需要知道面板層，而不需要知道被面板層包裝的子系統(tǒng)，從而降低耦合。職責(zé)是從中獲取接口，調(diào)用對應(yīng)的服務(wù)。在層，其實(shí)也做了一個的設(shè)計(jì)，它把各個模塊看做是子系統(tǒng)，然后進(jìn)行封裝出需要的角色提供的的面板實(shí)現(xiàn)調(diào)用參考

  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

定義

外觀模式的目標(biāo)是為子系統(tǒng)提供一個一致的"界面"，定義了一個高層的接口，這個接口使得這一子系統(tǒng)更加容易使用

客戶如果直接使用子系統(tǒng)，需要對子系統(tǒng)“知道”的更多，“知道”本身就增加了耦合
在子系統(tǒng)上抽象出一個面板層，面板層是對子系統(tǒng)爆出路的接口的包裝。對于客戶來說只需要知道面板層，而不需要知道被面板層包裝的子系統(tǒng)，從而降低耦合。
如果有一天更換子系統(tǒng)，同樣的只要抽象出一致的面板層，對客戶來說調(diào)用沒有發(fā)生變化。

需求

對于智能手機(jī)的開發(fā)，新興起一種Hybrid開發(fā)，在手機(jī)App中嵌入web，通過javascript與手機(jī)底層的通信，來實(shí)現(xiàn)web本身不能實(shí)現(xiàn)的功能

native層需要暴露出一組公共的接口，web層通過調(diào)用這些接口達(dá)到同樣的工作目標(biāo)

類圖

工作中的實(shí)際案例，所以對Hybrid這里的設(shè)計(jì)摻雜了橋接模式和面板模式兩種，另外還有些移動端Hybrid的知識補(bǔ)充。

關(guān)于Hybrid的知識，另外有文檔補(bǔ)充，簡單說一下，Hybrid核心的URL Scheme，關(guān)于URL Scheme可以參考這篇文章，很犀利：http://xujiwei.com/blog/2011/09/ios-app-custom-url-scheme-design/

對于URL Scheme的支持，Android從4.4開始，IOS開始的版本較早，未考證。可以把url schem看做是暴露出來的API，把native底層看做是一個子系統(tǒng)，所以需要構(gòu)建UrlSchemeFacade來封裝子系統(tǒng)露出來的接口。

HybridBridge職責(zé)是從UrlSchemeFacade中獲取接口，調(diào)用對應(yīng)的服務(wù)。
在Native層，其實(shí)也做了一個Facade的設(shè)計(jì)，它把各個模塊看做是子系統(tǒng)，然后進(jìn)行封裝出需要的URL Scheme

角色

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

實(shí)現(xiàn)

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 調(diào)用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