22-设计模式-桥接模式(设计模式学习笔记)

377 阅读2分钟

桥接模式将抽象部分与实现部分分离开来,使两者都可以独立的变化,并且可以一起和谐地工作。抽象部分和实现部分都可以独立的变化而不会互相影响,降低了代码的耦合性,提高了代码的扩展性。

比如我们要实现一个画图的需求,画各种颜色的圆形和三角形,在没有使用桥接模式的时候是这样的:

image.png

      class Darwing {
           darwing() {}
      }

      // 画圆
      class Circle extends Darwing {
           darwing(color) {
             if (color == "yello") {
               console.log("正在画黄色的圆!");
             } else {
               console.log("正在画红色的圆!");
             }
             // 缺点是每增加一种颜色就要增加一个else if语句,还会修改原来的代码
           }
      }

      // 画三角形
      class Triangle extends Darwing {
           darwing(color) {
             if (color == "yello") {
               console.log("正在画黄色的三角形!");
             } else if (color == "red") {
               console.log("正在画红色的三角形!");
             } else {
               console.log("正在画其他色的三角形!");
             }
             // 缺点是每增加一种颜色就要增加一个else if语句,还会修改原来的代码
           }
      }

      new Triangle().darwing("red");

如果使用桥接模式来画各种圆形和三角形,就是下面这样的: image.png

      // 形状
      class Shape {
        darwing() {}
      }

      // 圆形继承形状
      class Circle extends Shape {
        darwing(color) {
          console.log("正在画" + color.getColor() + "的圆!");
        }
      }

      // 三角形继承形状
      class Triangle extends Shape {
        darwing(color) {
          console.log("正在画" + color.getColor() + "的三角形!");
        }
      }

      // 颜色  抽象是制定规则
      class Color {
        getColor() {}
      }

      // 黄色继承颜色
      class Yellow extends Color {
        getColor() {
          return "yellow";
        }
      }

      // 黑色继承颜色
      class Black extends Color {
        getColor() {
          return "Black";
        }
      }

      // 红色继承颜色
      class Red extends Color {
        getColor() {
          return "Red";
        }
      }

      let circle = new Circle(); // 实例化圆形
		
      let triangle = new Triangle(); // 实例化三角形

      circle.darwing(new Black()); // 画黑色的圆

      circle.darwing(new Red()); // 画红色的圆

      triangle.darwing(new Yellow()); // 画黄色的三角形

      // 使用桥接模式之后,每当增添一种新的颜色或者新的形状,都无需修改原来的代码,降低了代码的耦合性,提高了代码的扩展性。