Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung des js-Bridge-Entwurfsmusters

Detaillierte Erläuterung des js-Bridge-Entwurfsmusters

小云云
小云云Original
2018-02-23 11:50:391420Durchsuche

Das Brückenentwurfsmuster ist die Grundlage vieler anderer Entwurfsmuster, wie zum Beispiel des dekorativen Musters und des Proxy-Musters, die mehr oder weniger in seinem Schatten zu sehen sind. Eines der wichtigsten Merkmale im objektorientierten Design ist die Vererbung Als Funktion zum Erweitern einer Klasse gibt es jedoch zwei Möglichkeiten: Vererbung und Überbrückung. Nach meinem einfachen Verständnis besteht Überbrückung darin, die Verwendung der Vererbung zur Erweiterung der Klasse aufzugeben, die Klasse jedoch durch das Einschließen eines anderen Objekts mit bestimmten Funktionen zu erweitern Schauen wir uns die beiden Strukturen an.

Zuerst gehen wir davon aus, dass es eine Anforderung gibt, es gibt eine Grafikschnittstelle und dann gibt es Grafikklassen wie Rechteck, Quadrat, Kreis usw. Wir benötigen Grafiken in verschiedenen Farben Erkennen Sie diese Anforderung 🎜>Implementierung

  • Grafik-Abstraktklasse

  • Grafikklasse

Farbabstrakte Klasse

  • Farbklasse
    let Shape = function(color) {
      this.color = color;
    };
    Shape.prototype.setColor = function(color) {
      this.color = color;
    };
    Shape.prototype.draw = function() {
      new  Error();
    }
  • Verwenden Sie
    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("圆型");
    };
  • Brückendesign Geeignet für eine Klasse mit zwei oder mehr sich unabhängig voneinander ändernden Dimensionen, und beide Dimensionen müssen erweitert werden.
    let Color = function() {
    };
    Shape.prototype.bepaint = function() {
      new  Error();
    };
    Der Brückenmodus erreicht die Entkopplung von Abstraktion und Implementierung. Die beiden sind unabhängig voneinander und beeinflussen sich nicht gegenseitig. Für zwei sich unabhängig voneinander ändernde Dimensionen ist der Brückenmodus perfekt.
  • Verwandte Empfehlungen:

    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);
    };
    Eine kurze Einführung in das strukturelle Fliegengewichtsmuster des js-Entwurfsmusters
  • Ein Beispiel für das Service-Locator-Muster von PHP-Designmuster Detaillierte Erklärung
    let red = new Red();
    
    //正方形
    let square = new Square();
    //红色的正方形
    square.setColor(red);
    square.draw();
    
    //长方形
    let rectange = new Rectangle();
    //红色长方形
    rectange.setColor(red);
    rectange.draw();
Detaillierte Erklärung des Delegationsmusters von PHP-Designmustern

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des js-Bridge-Entwurfsmusters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn