JavaScript设计模式--访问者模式

在 JavaScript 中，访问者模式是一种较为复杂但功能强大的设计模式。

一、访问者模式的定义

访问者模式的主要目的是将数据结构与数据操作分离，使得操作可以在不修改数据结构的情况下进行扩展。

二、访问者模式的结构

1. 访问者（Visitor）：定义了对各种元素的操作方法。
2. 元素（Element）：提供接受访问者的方法。

三、访问者模式的工作原理

当需要对数据结构中的元素进行操作时，将访问者对象传递给元素，元素调用访问者的相应操作方法来执行具体的操作。

四、访问者模式的优点

1. 开闭原则：可以在不修改现有数据结构的情况下添加新的操作。
2. 扩展性强：可以方便地添加新的访问者来实现不同的操作逻辑。

五、访问者模式的适用场景

1. 当需要对一个复杂的数据结构进行多种不同的操作，且这些操作彼此相对独立时。
2. 当需要在不改变数据结构的前提下添加新的操作时。

六、访问者模式的示例代码

假设有一个表示图形的类层次结构，包括圆形、矩形和三角形等图形。我们可以使用访问者模式来实现对这些图形的不同操作，如计算面积、周长等。

// 定义访问者接口
class Visitor {
   
  visitCircle(circle) {
   }
  visitRectangle(rectangle) {
   }
  visitTriangle(triangle) {
   }
}

// 定义图形元素接口
class Element {
   
  accept(visitor) {
   }
}

// 圆形类
class Circle extends Element {
   
  constructor(radius) {
   
    super();
    this.radius = radius;
  }

  accept(visitor) {
   
    visitor.visitCircle(this);
  }

  getRadius() {
   
    return this.radius;
  }
}

// 矩形类
class Rectangle extends Element {
   
  constructor(width, height) {
   
    super();
    this.width = width;
    this.height = height;
  }

  accept(visitor) {
   
    visitor.visitRectangle(this);
  }

  getWidth() {
   
    return this.width;
  }

  getHeight() {
   
    return this.height;
  }
}

// 三角形类
class Triangle extends Element {
   
  constructor(base, height) {
   
    super();
    this.base = base;
    this.height = height;
  }

  accept(visitor) {
   
    visitor.visitTriangle(this);
  }

  getBase() {
   
    return this.base;
  }

  getHeight() {
   
    return this.height;
  }
}

// 计算面积的访问者
class AreaVisitor extends Visitor {
   
  visitCircle(circle) {
   
    return Math.PI * circle.getRadius() ** 2;
  }

  visitRectangle(rectangle) {
   
    return rectangle.getWidth() * rectangle.getHeight();
  }

  visitTriangle(triangle) {
   
    return 0.5 * triangle.getBase() * triangle.getHeight();
  }
}

// 计算周长的访问者
class PerimeterVisitor extends Visitor {
   
  visitCircle(circle) {
   
    return 2 * Math.PI * circle.getRadius();
  }

  visitRectangle(rectangle) {
   
    return 2 * (rectangle.getWidth() + rectangle.getHeight());
  }

  visitTriangle(triangle) {
   
    const a = triangle.getBase();
    const b = triangle.getHeight();
    const c = Math.sqrt(a ** 2 + b ** 2);
    return a + b + c;
  }
}

// 使用示例
const circle = new Circle(5);
const rectangle = new Rectangle(10, 20);
const triangle = new Triangle(6, 8);

const areaVisitor = new AreaVisitor();
const perimeterVisitor = new PerimeterVisitor();

console.log(areaVisitor.visitCircle(circle));
console.log(areaVisitor.visitRectangle(rectangle));
console.log(areaVisitor.visitTriangle(triangle));

console.log(perimeterVisitor.visitCircle(circle));
console.log(perimeterVisitor.visitRectangle(rectangle));
console.log(perimeterVisitor.visitTriangle(triangle));

通过以上示例可以看到，访问者模式将数据操作与数据结构分离，使得操作的扩展变得更加灵活和方便。