js橋接設計模式詳解

 橋接設計模式是許多其他設計模式的基礎,比如裝飾模式, 代理模式都或多或少看到他的影子, 在面向對象設計中最重要的一個特點就是繼承, 然而作為拓展類的功能的方式有兩種-- 繼承和橋接, 橋接用我簡單的理解就是放棄使用繼承的方式拓展類, 而是採用包含另一個具有一定功能的對象來拓展類, 下面來看兩種結構。

首先我們假設有一個需求, 有一個圖形介面, 然後有長方形, 正方形, 圓形等圖形類別, 我們需要各種顏色的圖形, 下面用繼承和橋接的方式來實現這種需求.

• 繼承

• 橋接

橋接模式結構

實作

• 圖形抽象類別

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

• 顏色類別

  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中文網其他相關文章！