当前位置:Gxlcms > JavaScript > js桥接设计模式详解

js桥接设计模式详解

时间:2021-07-01 10:21:17 帮助过:42人阅读

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

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

  • 继承

  • 桥接

桥接模式结构

实现

  • 图形抽象类

    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桥接设计模式详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行