jsブリッジ設計パターンの詳細説明

ブリッジング デザイン パターンは、装飾パターンやプロキシ パターンなど、他の多くのデザイン パターンの基礎となっており、多かれ少なかれその影に見えますが、オブジェクト指向設計の最も重要な機能は継承です。クラスの機能を拡張する方法には、継承とブリッジの 2 つのタイプがあります。私の単純な理解では、ブリッジとは、クラスを拡張するために継承の使用を放棄し、特定の機能を備えた別のオブジェクトを含めることによってクラスを拡張することです。 2つの構造を見てください。

まず、要件があり、グラフィックインターフェイスがあり、次に長方形、正方形、円などのグラフィッククラスがあると仮定します。さまざまな色のグラフィックが必要で、これを実現するために継承とブリッジを使用します。要件。

• 継承

• ブリッジ

ブリッジパターン構造

実装

• グラフィック抽象クラス

  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();

の使用は、2 つ以上の独立して変化する次元を持つクラスに適しており、両方の次元を拡張する必要があります。

ブリッジ パターンは、抽象化と実装の分離を実現します。それら 2 つは互いに独立しており、互いに影響を与えることはありません。2 つの独立して変化する次元では、ブリッジ モードが最適です。

関連する推奨事項:

js デザイン パターンの構造フライウェイト パターンの簡単な紹介

PHP デザイン パターンのサービス ロケーター パターンの例の詳細な説明

PHP デザイン パターンの委任パターンの詳細な説明

以上がjsブリッジ設計パターンの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。