js設計模式 --- 外觀設計模式

saucxs 發布于2019-08-26 11:47 / 1713人閱讀

摘要：外觀設計模式外部與一個子系統的通信必須通過一個統一的門面對象進行，這就是門面模式。此角色知曉相關的子系統的功能和責任。外觀模式結構客戶端正常調用方式外觀模式調用方式實現未使用外觀模式子系統類客戶端調用使用外觀模式子系統類同上外觀類客戶端調用

外觀設計模式

外部與一個子系統的通信必須通過一個統一的門面(Facade)對象進行，這就是門面模式。

外觀模式為子系統提供了統一的界面, 屏蔽了子類的不同

現代大型軟件發展到一定程度會非常復雜, 于是就需要對軟件進行模塊化開發, 將系統分成各個模塊, 有利于維護和拓展,但即使這樣在我們調用的時候依然要和許多類打交道, 依然很復雜, 于是外觀設計模式應運而生. 外觀設計模式就是為多個子系統提供一個統一的外觀類來簡化外部人員操作, 下面是使用外觀模式前后的的醫院案例

外觀模式就好像一個接待員免去了外部人員與各個科室進行交流, 應為各個科室運作流程還是比較復雜的, 通過一個熟悉業務的外觀類可以大大提高醫院的效率.

正常情況

使用外觀模式后

外觀模式設計兩種對象

外觀類: 客戶端調用這個角色的方法。此角色知曉相關的子系統的功能和責任。正常情況下，本角色會將所有從客戶端發來的請求委派到相應的子系統中去.

子系統類:可以同時有一個或者多個子系統。每個子系統都不是一個多帶帶的類，而是一個類的集合。每一個子系統都可以被客戶端直接調用，或者被門面角色直接調用。子系統并不知道門面的存在，對于子系統而言，門面僅僅是另一個客戶端而已。

外觀模式結構
客戶端正常調用方式

外觀模式調用方式

實現

未使用外觀模式

子系統類

let Light = function () {  
};
Light.prototype.turnOn = function () {
  console.log("Light turn on");
};
Light.prototype.turnOff = function () {
  console.log("Light turn off");
};

let TV = function () { 
};
TV.prototype.turnOn = function () {
  console.log("TV turn on");
};
TV.prototype.turnOff = function () {
  console.log("TV turn off");
};

let Computer = function () {
};
Computer.prototype.turnOn = function () {
  console.log("Computer turn on");
};
Computer.prototype.turnOff = function () {
  console.log("Computer turn off");
};

客戶端調用

let light = new Light();
let tv = new TV();
let computer = new Computer();

light.turnOn();
tv.turnOn();
computer.turnOn();

light.turnOff();
tv.turnOff();
computer.turnOff();

使用外觀模式

子系統類

//同上

外觀類

let Facade = function () {
  this.light = new Light();
  this.tv = new TV();
  this.computer = new Computer();
}
Facade.prototype.turnOn = function () {
  light.turnOn();
  tv.turnOn();
  computer.turnOn();
}
Facade.prototype.turnOff = function () {
  light.turnOff();
  tv.turnOff();
  computer.turnOff();
}

客戶端調用

let facade = new Facade();

facade.turnOn();
facade.turnOff();

GPU云服務器云服務器 JS設計模式代碼設計模式工廠模式模式設計設計模式?

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

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

JS或Jquery

摘要：大潮來襲前端開發能做些什么去年谷歌和火狐針對提出了的標準，顧名思義，即的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的標準讓我們可以使用語言來開發。 VR 大潮來襲 --- 前端開發能做些什么去年谷歌和火狐針對 WebVR 提出了 WebVR API 的標準，顧名思義，WebVR 即 web + VR 的體驗方式，我們可以戴著頭顯享受沉浸式的網頁，新的 API 標準讓我們可以使用 ...

CatalpaFlat 2019-08-22 11:17 評論0 收藏0
JS 外觀模式

摘要：外觀模式在中常常用于解決瀏覽器兼容性問題。實現外觀模式不僅簡化類中的接口，而且對接口與調用者也進行了解耦。外觀模式的優勢是易于使用，而且本身也比較輕量級。 1. 簡介外觀模式（Facade）為子系統中的一組接口提供了一個一致的界面，此模塊定義了一個高層接口，這個接口值得這一子系統更加容易使用。外觀模式在JS中常常用于解決瀏覽器兼容性問題。 2. 實現外觀模式不僅簡化類中的接口，而且...

BothEyes1993 2019-08-22 11:18 評論0 收藏0
js設計模式--模板方法模式

摘要：前言本系列文章主要根據設計模式與開發實踐整理而來，其中會加入了一些自己的思考。模板方法模式由兩部分結構組成，第一部分是抽象父類，第二部分是具體的實現子類。前言本系列文章主要根據《JavaScript設計模式與開發實踐》整理而來，其中會加入了一些自己的思考。希望對大家有所幫助。文章系列 js設計模式--單例模式 js設計模式--策略模式 js設計模式--代理模式 js設計模式--迭...

yuanxin 2019-08-23 14:32 評論0 收藏0
JS設計模式之Facade（外觀）模式

摘要：概念模式為更大的代碼提供了一個方便的高層次接口，能夠隱藏其底層的真是復雜性。參考設計模式設計模式系列文章設計模式之模塊模式揭示模塊模式設計模式之單例模式設計模式之外觀模式概念 Facade模式為更大的代碼提供了一個方便的高層次接口，能夠隱藏其底層的真是復雜性。可以把它想成是簡化API來展示給其他開發人員。優缺點優點簡化接口使用者與代碼解耦易于使用缺點存在隱性成本，性...

xiaodao 2019-08-23 13:57 評論0 收藏0
JS設計模式之Module（模塊）模式、Revealing Module（揭示模塊）模式

摘要：模塊模式概念模式最初被定義為一種在傳統軟件工程中為類提供私有和共有封裝的方法。應用將暴露的公有指針指向到私有函數和屬性上參考設計模式設計模式系列文章設計模式之工廠模式設計模式之單例模式設計模式之外觀模式設計模式之模塊模式揭示模塊模式 Module（模塊）模式概念 Module模式最初被定義為一種在傳統軟件工程中為類提供私有和共有封裝的方法。通過這種方式，能夠使一個單獨的對象擁有共有...

xavier 2019-08-23 14:40 評論0 收藏0
JS設計模式--Factory(工廠)模式

摘要：對解耦是很有用對。設計模式系列文章設計模式之觀察者模式發布訂閱模式設計模式之工廠模式設計模式之單例模式設計模式之外觀模式設計模式之模塊模式揭示模塊模式工廠模式提供一個通用的接口來創建對象示例 //Car構造函數 function Car(option) { this.doors = option.doors || 4 this.color = option...

UsherChen 2019-08-26 13:35 評論0 收藏0