JavaScript 23 種設計模式之 10 外觀模式

JavaScript 23 種設計模式之 10 外觀模式

概念與特點

概念:
爲多個複雜的子系統提供一個統一的接口,使子系統更容易被訪問到,降低系統之間的耦合度。

特點:

  1. 降低了客戶端與子系統的耦合度。使子系統的改變不會影響到調用它的客戶端。
  2. 減少客戶處理對象的數目。
  3. 客戶端對子系統的限制不夠靈活。

結構與實現

外觀模式包含外觀類,子系統類,客戶類。
外觀類:對多個子系統對外提供共同的接口。
子系統類:實現系統的局部功能,客戶可以通過外觀類訪問它。
客戶類:通過外觀角色訪問各個子系統。

小劇場:
小王想給女朋友小花買衣服,買鞋子,買帽子。但是小王比較懶,不想分別去服裝店、鞋店。所以小王打算直接去可以同時買衣服、鞋子、帽子的商場。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>React App</title>
</head>
<body>
<script>
    class MarketShop{
        constructor(){
            this.clothes = new ClothesShop();
            this.shoe = new ShoeShop();
            this.cap = new CapShop();
        }
        sell(){
            this.clothes.sell();
            this.shoe.sell();
            this.cap.sell();
        }
    }
    class ClothesShop{
        sell(){
            console.log('賣衣服');
        }
    }
    class ShoeShop{
        sell(){
            console.log('賣鞋');
        }
    }
    class CapShop{
        sell(){
            console.log('賣帽子');
        }
    }
    class Customer{
      static  main(){
           let shop = new MarketShop();
          shop.sell();
        }
    }
    Customer.main();
</script>
</body>
</html>

在這裏插入圖片描述

應用場景

  1. 構建分層結構系統時,使用外觀模式定義子系統中的每層入口點可以簡化子系統之間的依賴關係。
  2. 當一個複雜系統的子系統很多時,可以使用外觀模式將系統設計一個簡單的接口供外界調用。
  3. 當客戶端與子系統耦合度較高時,可以使用外觀模式將子系統與客戶端解耦,使子系統獨立性更強。

應用實例

暫無。

總結

外觀模式應該是結構型設計模式裏面最好理解的了。其功能主要是將多個子系統的方法進行歸集,放在一個函數裏調用,並僅對客戶端暴露這一個函數。這樣很好地解耦了客戶端與子系統之間的關係,並且客戶端減少了對子系統的處理。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章