外观模式

最新推荐文章于 2024-09-03 07:00:00 发布

UIEngineer

最新推荐文章于 2024-09-03 07:00:00 发布

阅读量219

点赞数

分类专栏：设计模式

本文链接：https://blog.csdn.net/zjsfdx/article/details/82254463

版权

设计模式专栏收录该内容

6 篇文章 0 订阅

订阅专栏

外部与一个子系统的通信必须通过一个统一的外观对象进行，为子系统的一组接口提供一个一致的界面，外观模式定义了一个高层接口，这个接口使得这一子系统更加容易使用。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <script>
    class FaceShape{
      draw(){
        throw "定义抽象方法"
      }
    }

    class Rectangle extends FaceShape{
      draw(){
        console.log("Rectangle :: draw()")
      }
    }
    class Square extends FaceShape{
      draw(){
        console.log("Square :: draw()")
      }
    }
    class FCircle extends FaceShape{
      draw(){
        console.log("Circle :: draw()")
      }
    }

    class ShapeMaker{
      constructor(){
        this.circle = new FCircle();
        this.rectangle = new Rectangle();
        this.square = new Square();
      }

      drawCircle(){
        this.circle.draw();
      }
      drawRectangle(){
        this.rectangle.draw();
      }
      drawSquare(){
        this.square.draw();
      }
    }
    let shapeMaker = new ShapeMaker();
    shapeMaker.drawCircle();
    shapeMaker.drawRectangle();
    shapeMaker.drawSquare();
  </script>
</body>

</html>


<!-- 
  设计模式
  https://www.jianshu.com/p/9671deff9e5a
 -->