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

简介: 【10月更文挑战第1天】

在 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));

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

目录
相关文章
|
5月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 职责链模式
js设计模式【详解】—— 职责链模式
77 8
|
5月前
|
设计模式 JavaScript 前端开发
js设计模式【详解】—— 组合模式
js设计模式【详解】—— 组合模式
58 7
|
3月前
|
设计模式 缓存 算法
Java设计模式-访问者模式(22)
Java设计模式-访问者模式(22)
|
4月前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
59 1
|
4月前
|
设计模式 JavaScript 前端开发
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
小白请看 JS大项目宝典:设计模式 教你如何追到心仪的女神
|
5月前
|
设计模式 JavaScript Go
js设计模式【详解】—— 状态模式
js设计模式【详解】—— 状态模式
83 7
|
5月前
|
设计模式 JavaScript
js设计模式【详解】—— 桥接模式
js设计模式【详解】—— 桥接模式
73 6
|
5月前
|
设计模式 JavaScript
js设计模式【详解】—— 原型模式
js设计模式【详解】—— 原型模式
53 6
|
5月前
|
设计模式 JavaScript 算法
js设计模式【详解】—— 模板方法模式
js设计模式【详解】—— 模板方法模式
48 6
|
5月前
|
设计模式 存储 JavaScript
js设计模式【详解】—— 享元模式
js设计模式【详解】—— 享元模式
67 6