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

最新推荐文章于 2024-02-09 11:07:39 发布

杏子姐_1024

最新推荐文章于 2024-02-09 11:07:39 发布

阅读量223

点赞数

分类专栏：设计模式

本文链接：https://blog.csdn.net/weixin_44135121/article/details/106017409

版权

设计模式专栏收录该内容

30 篇文章 2 订阅

订阅专栏

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

概念与特点
结构与实现
应用场景
应用实例
总结

概念与特点

概念：
为多个复杂的子系统提供一个统一的接口，使子系统更容易被访问到，降低系统之间的耦合度。

特点：

降低了客户端与子系统的耦合度。使子系统的改变不会影响到调用它的客户端。
减少客户处理对象的数目。
客户端对子系统的限制不够灵活。

结构与实现

外观模式包含外观类，子系统类，客户类。
外观类：对多个子系统对外提供共同的接口。
子系统类：实现系统的局部功能，客户可以通过外观类访问它。
客户类：通过外观角色访问各个子系统。

小剧场：
小王想给女朋友小花买衣服，买鞋子，买帽子。但是小王比较懒，不想分别去服装店、鞋店。所以小王打算直接去可以同时买衣服、鞋子、帽子的商场。

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