[設計模式][面板模式][Javascript]

yexiaobai 發布于2019-08-21 10:18 / 2360人閱讀

摘要：對于客戶來說只需要知道面板層，而不需要知道被面板層包裝的子系統，從而降低耦合。職責是從中獲取接口，調用對應的服務。在層，其實也做了一個的設計，它把各個模塊看做是子系統，然后進行封裝出需要的角色提供的的面板實現調用參考

  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

云服務器 GPU云服務器面板模式 javascript設計模式 javascript命令模式 javascript嚴格模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85269.html

高性能JavaScript（文檔）

摘要：最近在全力整理高性能的文檔，并重新學習一遍，放在這里方便大家查看并找到自己需要的知識點。最近在全力整理《高性能JavaScript》的文檔，并重新學習一遍，放在這里方便大家查看并找到自己需要的知識點。前端開發文檔高性能JavaScript 第1章：加載和執行腳本位置阻止腳本無阻塞的腳本延遲的腳本動態腳本元素 XMLHTTPRequest腳本注入推薦的無阻塞模式...

RayKr 2019-08-22 18:32 評論0 收藏0
在 Chrome 中 JavaScript 數組到底占用了多少內存？

摘要：原文譯者因為我原作者的代碼使用的很大的內存，所以我看了一下字符串對象數字和數組分別占用了多少內存。位是字節，但是每個數字平均占用了字節。同樣，將每個空數組的大小顯示為字節，每個空對象的大小為字節。另外，并不是所有的數組在內部都是相同的。原文：How much memory do JavaScript arrays take up in Chrome?譯者：justjavac 因為我（...

Ajian 2019-08-20 18:04 評論0 收藏0
一個前端程序猿的Sublime Text3的自我修養

摘要：效果如下配置方法參考下的配置方法完美支持提供了比默認更好的語法高亮，而且他完美支持。語法高亮默認安裝的對的支持讓人抓狂，幀動畫別開玩笑了你只會看到一片白色的純文本一樣的代碼。事實上不光，我建議用完全替代原來的來完成語法高亮。文章轉載自本人的博客《三省吾身丶丶》點擊查看喜歡的話請瘋狂的推薦吧！ ^_^ 本文章會在本人有插件或者設置更新時，進行不定時更新偷懶了，圖片地址直接設置的博客...

KunMinX 2019-08-22 10:59 評論0 收藏0
Visual Studio Code前端開發使用之旅

摘要：更好的斷點控制啟用禁用重新啟用可以在調試視圖中的斷點區域設置。編輯器邊距中的斷點一般用紅色的實心圓表示。前端開發必備插件功能性插件匹配標簽，關閉對應的標簽。這可以使得團隊內的書寫更為規范且具有一致性。 Visual Studio Code是個現下比較流行的編輯器，啟動非?？欤耆梢杂脕泶嫫渌谋疚募庉嫻ぞ摺Ｓ挚梢杂脕碜鲩_發，支持各種語言，相比其他IDE，輕量級完全可配置還集成Gi...

stormjun 2019-08-21 18:46 評論0 收藏0
如何更愉快地使用rem —— 別說你懂CSS相對單位

摘要：值得注意的是，這個設置對使用或其他絕對單位定義的字號大小無效。事實上，提供了一個在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板，加到你的頁面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其...

Snailclimb 2019-08-30 15:54 評論0 收藏0