Published on

访问者模式详解

Authors
  • avatar
    Name
    青雲
    Twitter

访问者模式（Visitor Pattern）是一种行为型设计模式，它允许你在不修改对象结构的前提下定义作用于这些对象的新操作。它通过将操作行为从对象中分离出来，放置在一个访问者（Visitor）对象中，使得行为可以动态地添加到对象结构中。这个模式特别适用于对象结构较为稳定，而行为规则频繁变化的场景。

为什么需要访问者模式？

动物园中有多种类型的动物，比如老虎、猴子和鸟。这个动物园还有不同的职能人员，比如兽医和讲解员。每种动物需要接受不同的服务，例如健康检查或是参与讲解。如果按照传统的设计，我们可能会在每种动物中都定义 acceptHealthCheck 和 acceptTourExplanation 这样的方法，这样做在动物种类或服务类型发生变化时显得不够灵活。

在访问者模式下，我们可以将动物作为稳定的数据结构，而将兽医和讲解员作为访问者，他们可以访问每种动物。每当有新的兽医或讲解员加入时，我们不需要教会每个动物如何接受新来者的服务，而只需确保新来者知道如何与现有的动物互动即可。动物们（数据结构）保持不变，而服务人员（访问者）可以根据他们的专长为动物提供服务。

访问者模式让我们能够轻易地添加新的操作，而无需改动已有的数据结构，这对于经常需要引入新功能的软件系统来说非常有效。

基本概念

访问者模式主要包含以下角色：

  1. 抽象访问者（Visitor）：定义访问对象结构中各类元素的接口。
  2. 具体访问者（Concrete Visitor）：实现抽象访问者接口，定义对每一个具体元素类的访问行为。
  3. 元素接口（Element）：定义一个接受访问者的方法，通常是 accept 方法。
  4. 具体元素（Concrete Element）：实现元素接口，定义一个接受访问者的方法。
  5. 对象结构（Object Structure）：通常是一个容器，包含多个不同类型的元素。它提供一个接受访问者的方法，以便访问者可以访问这些元素。

实现示例

假设我们有一个文件系统，其中包含文件和文件夹。我们希望能够对文件系统中的每一个元素（文件和文件夹）进行不同的操作，例如统计文件大小、打印文件路径等。可以使用访问者模式来实现。

定义抽象访问者和具体访问者

// 抽象访问者接口
interface Visitor {
  visitFile(file: File): void;
  visitDirectory(directory: Directory): void;
}

// 具体访问者类：统计文件大小
class SizeVisitor implements Visitor {
  private totalSize: number = 0;

  visitFile(file: File): void {
    this.totalSize += file.getSize();
  }

  visitDirectory(directory: Directory): void {
    // 文件夹不贡献大小
    directory.getChildren().forEach(child => child.accept(this));
  }

  getTotalSize(): number {
    return this.totalSize;
  }
}

// 具体访问者类：打印文件路径
class PathVisitor implements Visitor {
  private currentPath: string = '';

  visitFile(file: File): void {
    console.log(`${this.currentPath}/${file.getName()}`);
  }

  visitDirectory(directory: Directory): void {
    const savedPath = this.currentPath;
    this.currentPath += `/${directory.getName()}`;
    console.log(this.currentPath);
    directory.getChildren().forEach(child => child.accept(this));
    this.currentPath = savedPath;
  }
}

定义元素接口和具体元素

// 元素接口
interface Element {
  accept(visitor: Visitor): void;
}

// 具体元素类：文件
class File implements Element {
  private name: string;
  private size: number;

  constructor(name: string, size: number) {
    this.name = name;
    this.size = size;
  }

  getName(): string {
    return this.name;
  }

  getSize(): number {
    return this.size;
  }

  accept(visitor: Visitor): void {
    visitor.visitFile(this);
  }
}

// 具体元素类：文件夹
class Directory implements Element {
  private name: string;
  private children: Element[] = [];

  constructor(name: string) {
    this.name = name;
  }

  getName(): string {
    return this.name;
  }

  add(child: Element): void {
    this.children.push(child);
  }

  getChildren(): Element[] {
    return this.children;
  }

  accept(visitor: Visitor): void {
    visitor.visitDirectory(this);
  }
}

对象结构

// 对象结构：文件系统
class FileSystem {
  private root: Directory;

  constructor(root: Directory) {
    this.root = root;
  }

  accept(visitor: Visitor): void {
    this.root.accept(visitor);
  }
}

使用访问者模式

// 创建文件和文件夹
const file1 = new File('file1.txt', 100);
const file2 = new File('file2.txt', 200);
const directory1 = new Directory('dir1');
directory1.add(file1);
directory1.add(file2);

const file3 = new File('file3.txt', 300);
const rootDirectory = new Directory('root');
rootDirectory.add(directory1);
rootDirectory.add(file3);

const fileSystem = new FileSystem(rootDirectory);

// 使用 SizeVisitor 统计文件大小
const sizeVisitor = new SizeVisitor();
fileSystem.accept(sizeVisitor);
console.log(`Total size: ${sizeVisitor.getTotalSize()}`); // 输出: Total size: 600

// 使用 PathVisitor 打印文件路径
const pathVisitor = new PathVisitor();
fileSystem.accept(pathVisitor);
// 输出:
// /root
// /root/dir1
// /root/dir1/file1.txt
// /root/dir1/file2.txt
// /root/file3.txt

应用场景

虚拟 DOM 操作

虚拟 DOM 的结构通常比较复杂，尤其是在大型的前端框架中，比如 React。如果我们需要对虚拟 DOM 树进行一些特定的操作（比如元素的替换、属性的修改等），使用访问者模式可以有效地处理这种复杂结构。

示例：替换特定类型的虚拟DOM元素

// 虚拟 DOM 元素类
class VirtualDOMElement {
  constructor(type, props, children = []) {
    this.type = type;
    this.props = props;
    this.children = children;
  }

  accept(visitor) {
    visitor.visitElement(this);
    this.children.forEach(child => child.accept(visitor));
  }
}

// 访问者接口
class Visitor {
  visitElement(element) {
    throw new Error("This method should be overridden by subclasses");
  }
}

// 具体访问者：替换特定类型的元素
class ReplaceVisitor extends Visitor {
  visitElement(element) {
    if (element.type === 'text') {
      // 替换逻辑
      element.type = 'span';
    }
  }
}

// 使用示例
const tree = new VirtualDOMElement('div', {}, [
  new VirtualDOMElement('text', {}, ['Hello']),
  new VirtualDOMElement('span', {}, ['World']),
  new VirtualDOMElement('text', {}, ['!'])
]);

const replaceVisitor = new ReplaceVisitor();
tree.accept(replaceVisitor);

// 查看变更后的虚拟DOM
console.log(JSON.stringify(tree, null, 2));

输出：

{
  "type": "div",
  "props": {},
  "children": [
    {
      "type": "span",
      "props": {},
      "children": [
        "Hello"
      ]
    },
    {
      "type": "span",
      "props": {},
      "children": [
        "World"
      ]
    },
    {
      "type": "span",
      "props": {},
      "children": [
        "!"
      ]
    }
  ]
}

AST 处理

抽象语法树（AST）在前端的许多领域中都有应用，尤其是在构建工具和编译器（比如 Babel）中。使用访问者模式，可以把操作逻辑和数据结构分离开，使得代码更加清晰和易于维护。

示例：修改字面量节点

// 定义 AST 节点类及接口
class ASTNode {
  constructor(type) {
    this.type = type;
  }

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

class LiteralNode extends ASTNode {
  constructor(value) {
    super('Literal');
    this.value = value;
  }

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

class BinaryExpressionNode extends ASTNode {
  constructor(left, right) {
    super('BinaryExpression');
    this.left = left;
    this.right = right;
  }

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

// 访问者接口
class ASTVisitor {
  visitNode(node) {
    throw new Error("This method should be overridden by subclasses");
  }

  visitLiteralNode(node) {
    throw new Error("This method should be overridden by subclasses");
  }

  visitBinaryExpressionNode(node) {
    throw new Error("This method should be overridden by subclasses");
  }
}

// 具体访问者：修改字面量节点
class ModifyLiteralVisitor extends ASTVisitor {
  visitLiteralNode(node) {
    if (typeof node.value === 'number') {
      node.value += 1; // 修改逻辑：将字面量增加 1
    }
  }

  visitBinaryExpressionNode(node) {
    node.left.accept(this);
    node.right.accept(this);
  }
}

// 使用示例
const left = new LiteralNode(1);
const right = new LiteralNode(2);
const expression = new BinaryExpressionNode(left, right);

const modifyLiteralVisitor = new ModifyLiteralVisitor();
expression.accept(modifyLiteralVisitor);

// 查看修改后的 AST
console.log(JSON.stringify(expression, null, 2));

组件或插件系统

在一些复杂的前端插件或组件系统中，可能需要对组件进行多种不同的处理或应用一些特定的规则。使用访问者模式，可以为每种不同的操作定义不同的访问者，实现操作的动态扩展。

示例：组件系统中的日志记录

// 定义组件类及接口
class Component {
  constructor(name) {
    this.name = name;
  }

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

// 访问者接口
class ComponentVisitor {
  visitComponent(component) {
    throw new Error("This method should be overridden by subclasses");
  }
}

// 具体访问者：日志记录
class LoggingVisitor extends ComponentVisitor {
  visitComponent(component) {
    console.log(`Visiting component: ${component.name}`);
    // 记录一些日志信息
  }
}

// 使用示例
const button = new Component('Button');
const textField = new Component('TextField');

const loggingVisitor = new LoggingVisitor();
button.accept(loggingVisitor); // Visiting component: Button
textField.accept(loggingVisitor); // Visiting component: TextField

性能监控与分析

在一些复杂的单页应用（SPA）中，可能需要对组件树或者其他结构进行遍历以收集性能数据。访问者模式能够帮助开发者插入性能监控的逻辑，而不影响到原有的应用结构。

示例：组件性能监控

// 定义组件类及接口
class UIComponent {
  constructor(name) {
    this.name = name;
  }

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

// 访问者接口
class UIComponentVisitor {
  visitUIComponent(component) {
    throw new Error("This method should be overridden by subclasses");
  }
}

// 具体访问者：性能监控
class PerformanceMonitoringVisitor extends UIComponentVisitor {
  visitUIComponent(component) {
    console.time(`Rendering ${component.name}`);
    // 模拟渲染过程
    setTimeout(() => {
      console.timeEnd(`Rendering ${component.name}`);
    }, Math.random() * 1000);
  }
}

// 使用示例
const header = new UIComponent('Header');
const footer = new UIComponent('Footer');

const performanceMonitoringVisitor = new PerformanceMonitoringVisitor();
header.accept(performanceMonitoringVisitor);
footer.accept(performanceMonitoringVisitor);

典型案例

TypeScript Compiler API

TypeScript 编译器 API 使用了访问者模式来遍历和操作抽象语法树（AST）。访问者模式使得编译器能够灵活地执行各种分析、转换和代码生成操作，而无需修改 AST 节点类。

示例：使用 TypeScript Compiler API 进行 AST 遍历

TypeScript 编译器 API 提供了强大的 AST 操作能力，通过实现访问者可以灵活地遍历和处理 AST 节点。

import * as ts from 'typescript';

// 自定义访问函数
function visit(node: ts.Node) {
  if (ts.isVariableStatement(node)) {
    console.log('Found a variable statement');
  }

  ts.forEachChild(node, visit);
}

// 创建源代码
const sourceCode = `
  const x = 10;
  let y = 20;
`;

// 创建源文件对象
const sourceFile = ts.createSourceFile(
  'example.ts',
  sourceCode,
  ts.ScriptTarget.Latest
);

// 遍历 AST
visit(sourceFile);

Babel

Babel 是一个广泛使用的 JavaScript 编译器，通过访问者模式遍历和转换 JavaScript 的 AST。可以使用 Babel 提供的访问者功能轻松进行代码分析和转换。

示例：使用 Babel 进行 AST 访问和转换

Babel 提供了对 AST 的遍历和转换功能，通过访问者模式可以灵活地对 AST 进行各种操作。

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;

// 源代码
const code = `
  const x = 10;
  let y = 20;
`;

// 解析为 AST
const ast = parser.parse(code);

// 自定义访问者
const visitor = {
  VariableDeclaration(path) {
    console.log('Found a variable declaration');
    if (path.node.kind === 'const') {
      path.node.kind = 'let';
    }
  }
};

// 遍历 AST
traverse(ast, visitor);

// 生成新的代码
const newCode = generator(ast).code;
console.log(newCode);

React

React 中的 JSX 编译和转换采用了访问者模式，使得各种插件和工具能够方便地操作和转换 JSX 结构。

示例：使用 React 和 Babel 处理 JSX

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;

// 解析为 AST
const jsxCode = `
  const element = <div className="foo">Hello, world</div>;
`;
const ast = parser.parse(jsxCode, { sourceType: 'module', plugins: ['jsx'] });

// 自定义访问者
const visitor = {
  JSXElement(path) {
    console.log('Found a JSX element');
    // 将所有 <div> 标签替换为 <span> 标签
    if (path.node.openingElement.name.name === 'div') {
      path.node.openingElement.name.name = 'span';
      path.node.closingElement.name.name = 'span';
    }
  }
};

// 遍历 AST
traverse(ast, visitor);

// 生成新的代码
const newJSXCode = generator(ast).code;
console.log(newJSXCode);

输出

Found a JSX element
const element = <span className="foo">Hello, world</span>;

优缺点

优点

  1. 遵循单一责任原则：
    • 访问者模式通过将有关操作的代码迁移到独立的访问者类中，使得每个访问者类仅需关注执行该操作的特定需求。
    • 这使得对象结构与操作分离，从而简化了对象类的设计，并提高了代码的维护性和可读性。
  2. 灵活性强：
    • 访问者模式使得在不改变对象结构的前提下，可以很容易地增加新的操作。这让系统更具有扩展性，能够适应未来的变化和需求。
    • 可以根据需要定义多种访问者，以实现不同的操作，避免在对象类中添加新的方法。
  3. 集中管理行为：
    • 访问者模式将所有操作集中在访问者类中，不需要在多个对象类中定义相同或相似的操作，从而避免了代码重复和逻辑散布。
    • 使得操作逻辑更加集中和明了，便于管理和修改。

缺点

  1. 对象结构需要暴露内部细节：
    • 访问者模式要求对象结构在接受访问者时暴露其内部状态和内容，这破坏了封装性。特别在对象结构复杂的情况下，可能会导致安全性和代码维护的问题。
  2. 违反了依赖倒置原则：
    • 对象结构依赖于访问者接口，而访问者接口又依赖于具体的对象类。这种双向依赖使得对象结构与访问者紧密耦合，增加了系统的复杂性。
    • 增加新的访问者时，需要在对象结构中添加相应的接受方法，导致对象结构的改动。
  3. 增加系统复杂性：
    • 访问者模式要求增加访问者类和接受方法等内容，可能使系统的类层次结构增多，复杂度增大。
    • 在某些情况下，添加访问者可能不如直接在对象类中实现相应操作简便和高效。

总结

访问者模式通过将操作行为从对象结构中分离出来，使得新的操作可以方便地添加到对象结构中，而不需要改变对象类的实现。它特别适用于对象结构稳定、操作行为频繁变化的场景。通过访问者模式，可以实现行为的复用和扩展，提高代码的灵活性和可维护性。然而，它也带来了对象结构暴露内部细节、违反依赖倒置原则等问题，这难以在某些场景中使用。在选择是否使用访问者模式时，需要根据系统的实际需求和复杂性进行权衡。

Discuss on Twitter • View on GitHub