JavaScript 访问者模式：打造高扩展性的对象结构

anyup_前端梦工厂2024-10-15 20:45

一. 前言

在面向对象编程中，访问者模式（Visitor Pattern）是一种行为设计模式，它允许我们向现有的类结构添加新的操作，而无需修改这些类。这对于需要对类层次结构中的元素进行复杂算法处理的场景非常有用。

本文将详细介绍访问者模式的概念、实现方式及其在 JavaScript 中的一个应用小案例，让我们更加快速的了解它。

二. 什么是访问者模式

1. 定义

访问者模式定义了一个访问者的接口，该接口可以处理一个对象结构中的各个元素，而无需改变各元素的类。使用访问者模式可以让用户在不修改现有对象结构的情况下定义新的操作。

2. 核心角色

  • Object Structure（对象结构）：是一个包含一个或多个 Element 对象的集合，同时提供一个接受操作 accept()，以接收一个访问者对象。

  • Element（元素）：是对象结构中每个对象的类，它提供一个 accept()方法以接收访问者。

  • Visitor（访问者）：是一个接口，为 Element 类中的每一个具体类声明一个 Visit 方法。

  • Concrete Visitor（具体访问者）：实现了 Visitor 接口中声明的各个 Visit 方法，每个方法实现了对应 Element 类型的业务逻辑。

3. UML

三. 实现方式

访问者模式的实现方式依赖于具体的应用场景和技术栈。在 JavaScript 中，实现访问者模式可以通过多种方式，其中最常见的方法是使用对象组合和多态来完成。

假设我们有一个简单的表达式树，其中包含两种节点类型：加法节点和数字节点。我们将使用访问者模式来计算表达式的值。

  1. 定义元素接口 ：首先，需要定义一个抽象的元素接口，该接口至少包含一个 accept 方法，此方法接受一个访问者作为参数。

    // 元素接口
    class Element {
    accept(visitor) {
    throw new Error('Method not implemented.')
    }
    }

  2. 具体元素实现 ：为每种具体的元素类型实现该接口。每个具体元素类都必须实现 accept 方法，并调用访问者对应的访问方法。

    // 具体元素 - 加法节点
    class AddNode extends Element {
    constructor(left, right) {
    super()
    this.left = left
    this.right = right
    }

    accept(visitor) {
    return visitor.visitAddNode(this)
    }
    }

    // 具体元素 - 数字节点
    class NumberNode extends Element {
    constructor(value) {
    super()
    this.value = value
    }

    accept(visitor) {
    return visitor.visitNumberNode(this)
    }
    }

  3. 定义访问者接口：定义一个访问者接口，该接口为每一种具体的元素类型声明一个访问方法。

    // 访问者接口
    class Visitor {
    visitAddNode(node) {
    throw new Error('Method not implemented.')
    }

    visitNumberNode(node) {
    throw new Error('Method not implemented.')
    }
    }

  4. 具体访问者实现：为每种访问者类型实现具体的访问逻辑，每个具体访问者类都要实现所有访问方法。

    // 具体访问者 - 表达式求值
    class Evaluator extends Visitor {
    visitAddNode(node) {
    return this.visit(node.left) + this.visit(node.right)
    }

    visitNumberNode(node) {
    return node.value
    }

    visit(node) {
    return node.accept(this)
    }
    }

  5. 对象结构：定义一个对象结构，它包含元素的集合，并提供方法来迭代这些元素，允许访问者访问它们。

    // 对象结构
    class ExpressionTree {
    constructor(root) {
    this.root = root
    }

    evaluate() {
    const evaluator = new Evaluator()
    return evaluator.visit(this.root)
    }
    }

  6. 具体使用：最后，编写相应代码，实例化具体元素和访问者，并通过对象结构让访问者访问所有的元素。

    // 使用
    const tree = new ExpressionTree(new AddNode(new NumberNode(1), new AddNode(new NumberNode(2), new NumberNode(3))))

    console.log(tree.evaluate()) // 输出: 6

解释一下，在以上这几个步骤中：

  • AddNode 和 NumberNode 是具体元素，它们都实现了 accept 方法，调用访问者对应的 visitAddNode 或 visitNumberNode 方法。

  • Evaluator 是一个具体访问者，它实现了访问者接口中定义的 visitAddNode 和 visitNumberNode 方法，用于计算表达式的值。

  • ExpressionTree 是对象结构，它持有表达式的根节点，并提供 evaluate 方法来遍历树结构，执行计算。

这种方法的优点在于它允许我们在不修改现有元素类的情况下引入新的访问者类（例如，添加一个新的访问者来打印表达式的字符串表示形式）。这样就可以很容易地扩展系统的功能。

四. 实战应用

通过以上我们已经学习到的实现方式，接下来我们基于访问者模式来设计一个对象类型校验的方式。主要原理是：借用对象的 toString 方法。

我们使用访问者模式来创建一个类型检查器，它可以检查给定对象的类型，并根据对象的类型执行特定的操作。这样可以方便地扩展类型检查逻辑，而无需修改现有代码。

1. 定义元素接口

首先，我们需要定义一个抽象的元素基类，该类包含一个 accept 方法，用于接收访问者。

class Element {
  accept(visitor) {
    throw new Error('Method not implemented.')
  }
}

2. 具体元素

然后，我们定义具体的元素类，每个类都实现 accept 方法，并调用访问者对应的访问方法。

class StringElement extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    visitor.visit(this)
  }
}

class NumberElement extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    visitor.visit(this)
  }
}

class BooleanElement extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    visitor.visit(this)
  }
}

class ArrayElement extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    visitor.visit(this)
  }
}

class ObjectElement extends Element {
  constructor(value) {
    super()
    this.value = value
  }

  accept(visitor) {
    visitor.visit(this)
  }
}

// 可以继续添加其他类型的元素

3. 定义访问者接口

接着，我们定义一个访问者接口，它为每一种具体的元素类型声明一个访问方法。

class Visitor {
  visit(element) {
    throw new Error('Method not implemented.')
  }
}

4. 具体访问者

然后，我们实现具体的访问者类，每个类都会实现访问者接口中的方法，并提供具体的功能实现。

class TypeChecker extends Visitor {
  visit(element) {
    const type = this.getType(element)
    console.log(`Type of '${element.value}' is ${type}.`)
  }

  getType(element) {
    const toString = Object.prototype.toString.call(element.value)
    switch (toString) {
      case '[object String]':
        return 'String'
      case '[object Number]':
        return 'Number'
      case '[object Boolean]':
        return 'Boolean'
      case '[object Array]':
        return 'Array'
      case '[object Object]':
        return 'Object'
      default:
        return 'Unknown'
    }
  }
}

5. 客户端代码

最后，编写客户端代码来实例化具体元素和访问者，并通过元素的 accept 方法让访问者访问所有元素。

// 创建具体元素
const stringElement = new StringElement('Hello')
const numberElement = new NumberElement(123)
const booleanElement = new BooleanElement(true)
const arrayElement = new ArrayElement([1, 2, 3])
const objectElement = new ObjectElement({ key: 'value' })

// 创建访问者
const typeChecker = new TypeChecker()

// 使用访问者检查所有元素的类型
stringElement.accept(typeChecker) // 输出: "Type of 'Hello' is String."
numberElement.accept(typeChecker) // 输出: "Type of '123' is Number."
booleanElement.accept(typeChecker) // 输出: "Type of 'true' is Boolean."
arrayElement.accept(typeChecker) // 输出: "Type of '1,2,3' is Array."
objectElement.accept(typeChecker) // 输出: "Type of '{ key: 'value' }' is Object."

  1. **元素基类 Element**：定义了一个 accept 方法，该方法用于接收访问者。

  2. 具体元素 ：如 StringElement、NumberElement 等，它们都继承自 Element 并实现了 accept 方法，该方法会调用访问者中对应的方法。

  3. **访问者接口 Visitor**：定义了一个通用的 visit 方法，具体访问者需要实现这个方法。

  4. **具体访问者 TypeChecker**：实现了访问者接口中的方法，并根据元素类型执行特定的操作。getType 方法使用 Object.prototype.toString.call() 方法来确定对象的确切类型，并返回相应的类型名称。

通过这种方式，我们可以在不修改现有元素类的情况下添加新的类型检查逻辑。如果需要添加更多的类型检查功能，只需扩展 Visitor 接口并实现新的具体访问者类即可。这种方法不仅提高了代码的可扩展性，还使得代码更加模块化和易于维护。

在实际开发过程中，可能我们不会完全标准化的像上述这种方式来使用访问者模式，但是我们应该在编码过程中借用其中的思想，所以在前端开发中，大多数情况下我们使用的也都是访问者模式的变种，保证单一职责原则，不修改现有对象结构。

五. 优缺点

1. 优点

  • 让用户可以在不修改现有对象结构的情况下添加新功能。

  • 符合单一职责原则，分离了数据结构和作用于结构上的操作。

2. 缺点

通过以上了解到，缺点很明显：

  • 增加了许多新的类。

  • 如果对象结构中元素种类频繁变动，则访问者类也会频繁变动。

六. 总结

访问者模式通过定义一个访问者的接口以及一系列访问者类，使得可以在不修改现有对象结构的前提下为对象结构添加新的操作。

这种方式非常适合于需要对复杂的数据结构执行多种不同且不相关操作的场景。然而，这也意味着当对象结构发生变化时，访问者模式可能会变得复杂且难以维护。

相关推荐
一條狗10 分钟前
隨筆 20241224 ts寫入excel表
开发语言·前端·typescript
小码快撩15 分钟前
vue应用移动端访问缓慢问题
前端·javascript·vue.js
低调之人19 分钟前
Fiddler勾选https后google浏览器网页访问不可用
前端·测试工具·https·fiddler·hsts
yayaya15224 分钟前
javaScriptBOM
开发语言·javascript·ecmascript
Riesenzahn24 分钟前
使用vue如何监听元素尺寸的变化？
前端·javascript
阿征学IT29 分钟前
圣诞快乐（h5 css js（圣诞树））
前端·javascript·css
程序员黄同学32 分钟前
如何使用 Flask 框架创建简单的 Web 应用？
前端·python·flask
Sword9932 分钟前
豆包 MarsCode AI Apply功能揭秘：自动代码应用与 Diff 实现
前端·人工智能·豆包marscode
前端与小赵33 分钟前
什么是全栈应用，有哪些特点
前端
a1ex33 分钟前
shadcn/ui 动态 pagination
前端
热门推荐
01SQL 主从数据库实时备份02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04VSCode插件 —— Cody AI （免费AI助手！）05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10【华东南AWDP】第十七届全国大学生信息安全竞赛 CISCN 2024 创新实践能力赛区域赛 部分题解WP