js桥接设计模式详解

 桥接设计模式是许多其他设计模式的基础,比如装饰模式, 代理模式都或多或少看到他的影子, 在面向对象设计中最重要的一个特点就是继承, 然而作为拓展类的功能的方式有两种 -- 继承和桥接, 桥接用我简单的理解就是放弃使用继承的方式拓展类, 而是采用包含另一个具有一定功能的对象来拓展类, 下面来看两种结构。

首先我们假设有一个需求, 有一个图形接口, 然后有长方形, 正方形, 圆形等图形类, 我们需要各种颜色的图形, 下面用继承和桥接的方式来实现这种需求.

• 继承

• 桥接

桥接模式结构

实现

• 图形抽象类

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

• 图形类

  

  Glimmer Ai

  基于GPT-3和DALL·E2的PPT制作工具

  下载

  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设计模式之委托模式