JavaScript 23 种设计模式之 10 外观模式

太过爱你忘了你带给我的痛 2023-03-13 01:57 17阅读 0赞

### 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>

![在这里插入图片描述][20200629144133474.png]

# 应用场景 #

1.  构建分层结构系统时，使用外观模式定义子系统中的每层入口点可以简化子系统之间的依赖关系。
2.  当一个复杂系统的子系统很多时，可以使用外观模式将系统设计一个简单的接口供外界调用。
3.  当客户端与子系统耦合度较高时，可以使用外观模式将子系统与客户端解耦，使子系统独立性更强。

# 应用实例 #

暂无。

# 总结 #

外观模式应该是结构型设计模式里面最好理解的了。其功能主要是将多个子系统的方法进行归集，放在一个函数里调用，并仅对客户端暴露这一个函数。这样很好地解耦了客户端与子系统之间的关系，并且客户端减少了对子系统的处理。

[20200629144133474.png]: /images/20230312/8e1ee7c0d1694a988209d1aee5e11df8.png