JS 브릿지 디자인 패턴에 대한 자세한 설명

브리징 디자인 패턴은 장식 패턴 및 프록시 패턴과 같은 다른 많은 디자인 패턴의 기초이며 객체 지향 디자인에서 가장 중요한 특징은 상속입니다. 클래스의 기능을 확장하는 방법에는 상속과 브리징의 두 가지 유형이 있습니다. 제가 간단히 이해하면 브리징은 클래스를 확장하기 위해 상속의 사용을 포기하고 특정 기능을 가진 다른 객체를 포함하여 클래스를 확장하는 것입니다. 두 구조를 보세요.

먼저 요구 사항이 있고 그래픽 인터페이스가 있고 그 다음에는 직사각형, 정사각형, 원형 ​​등과 같은 그래픽 클래스가 있다고 가정합니다. 다양한 색상의 그래픽이 필요하며 이를 실현하기 위해 상속과 브리징을 사용할 것입니다.

• 상속

• Bridge

브릿지 패턴 구조

구현

• 그래픽 추상 클래스

  let Shape = function(color) {
    this.color = color;
  };
  Shape.prototype.setColor = function(color) {
    this.color = color;
  };
  Shape.prototype.draw = function() {
    new  Error();
  }

• 그래픽 클래스

  let Rectangle = function (color) {
    Shape.call(this, color);
  };
  extend(Rectangle, Shape);
  Rectangle.prototype.draw = function () {
    color.bepaint("长方形");
  };
  
  let Square = function (color) {
    Shape.call(this, color);
  };
  extend(Square, Shape);
  Square.prototype.draw = function () {
    color.bepaint("正方形");
  }
  
  let Circle = function (color) {
    Shape.call(this, color);
  };
  extend(Circle, Shape);
  Circle.prototype.draw = function () {
    color.bepaint("圆型");
  };

• 색상 추상 수업

  let Color = function() {
  };
  Shape.prototype.bepaint = function() {
    new  Error();
  };

• Color Category

  let Red = function () {
    Color.call(this);
  };
  extend(Red, Color);
  Red.prototype.bepaint = function(shape) {
    console.log("白色的" + shape);
  };
  
  let Green = function () {
    Color.call(this);
  };
  extend(Green, Color);
  Green.prototype.bepaint = function(shape) {
    console.log("绿色的" + shape);
  };
  
  let Blue = function () {
    Color.call(this);
  };
  extend(Blue, Color);
  Blue.prototype.bepaint = function(shape) {
    console.log("蓝色的" + shape);
  };

• let red = new Red();
  
  //正方形
  let square = new Square();
  //红色的正方形
  square.setColor(red);
  square.draw();
  
  //长方形
  let rectange = new Rectangle();
  //红色长方形
  rectange.setColor(red);
  rectange.draw();

브릿지 디자인은 두 개 이상의 차원이 독립적으로 변경되는 클래스에 적합하며 두 차원 모두 확장이 필요합니다.
브릿지 패턴은 추상화와 구현의 분리를 달성합니다. 그 둘은 서로 독립적이며 서로 영향을 미치지 않습니다. 독립적으로 변경되는 두 차원의 경우 브리지 모드가 완벽합니다.

관련 추천:

js 디자인 패턴의 구조적 플라이웨이트 패턴에 대한 간략한 소개

PHP 디자인 패턴의 서비스 로케이터 패턴 예에 대한 자세한 설명

PHP 디자인 패턴의 위임 패턴에 대한 자세한 설명

위 내용은 JS 브릿지 디자인 패턴에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!