访问者模式(Visitor)的数据结构与操作分离

访问者模式是一种行为型设计模式，允许在不修改数据结构的前提下定义新的操作。它将数据结构与操作解耦，使得操作可以独立变化，尤其适合处理复杂对象结构中的多样化操作。

访问者模式的核心思想

访问者模式基于双重分派（Double Dispatch）机制，通过将操作从数据结构中抽离，让操作成为独立的"访问者"对象。数据结构只需接受访问者并调用其方法，具体执行什么操作由访问者决定。

模式包含两个核心角色：

1. 元素（Element）：定义accept方法接收访问者
2. 访问者（Visitor）：为每个具体元素类声明visit方法

JavaScript实现基础结构

// 访问者接口
class Visitor {
  visitElementA(element) {}
  visitElementB(element) {}
}

// 元素接口
class Element {
  accept(visitor) {}
}

// 具体元素A
class ConcreteElementA extends Element {
  accept(visitor) {
    visitor.visitElementA(this);
  }
  
  operationA() {
    return 'ElementA operation';
  }
}

// 具体元素B
class ConcreteElementB extends Element {
  accept(visitor) {
    visitor.visitElementB(this);
  }
  
  operationB() {
    return 'ElementB operation';
  }
}

// 具体访问者
class ConcreteVisitor extends Visitor {
  visitElementA(element) {
    console.log(`Processing ${element.operationA()}`);
  }
  
  visitElementB(element) {
    console.log(`Processing ${element.operationB()}`);
  }
}

实际应用场景示例

文档处理系统案例

假设我们需要处理多种文档节点（文本、图像、表格），并实现导出HTML和Markdown两种格式：

// 文档节点基类
class DocumentNode {
  accept(visitor) {}
}

// 文本节点
class TextNode extends DocumentNode {
  constructor(content) {
    super();
    this.content = content;
  }
  
  accept(visitor) {
    visitor.visitText(this);
  }
}

// 图像节点
class ImageNode extends DocumentNode {
  constructor(src, alt) {
    super();
    this.src = src;
    this.alt = alt;
  }
  
  accept(visitor) {
    visitor.visitImage(this);
  }
}

// 访问者接口
class DocumentVisitor {
  visitText(textNode) {}
  visitImage(imageNode) {}
}

// HTML导出访问者
class HTMLExportVisitor extends DocumentVisitor {
  visitText(textNode) {
    return `<p>${textNode.content}</p>`;
  }
  
  visitImage(imageNode) {
    return `<img src="${imageNode.src}" alt="${imageNode.alt}">`;
  }
}

// Markdown导出访问者
class MarkdownExportVisitor extends DocumentVisitor {
  visitText(textNode) {
    return textNode.content + '\n\n';
  }
  
  visitImage(imageNode) {
    return `![${imageNode.alt}](${imageNode.src})`;
  }
}

// 使用示例
const nodes = [
  new TextNode('Hello World'),
  new ImageNode('pic.jpg', 'Example')
];

const htmlExporter = new HTMLExportVisitor();
const markdownExporter = new MarkdownExportVisitor();

nodes.forEach(node => {
  console.log(node.accept(htmlExporter));
  console.log(node.accept(markdownExporter));
});

访问者模式的进阶应用

复合结构的处理

当数据结构呈现树形或图状时，访问者模式能优雅地处理递归遍历：

class Directory {
  constructor(name) {
    this.name = name;
    this.children = [];
  }
  
  add(child) {
    this.children.push(child);
  }
  
  accept(visitor) {
    visitor.visitDirectory(this);
    this.children.forEach(child => child.accept(visitor));
  }
}

class File {
  constructor(name, size) {
    this.name = name;
    this.size = size;
  }
  
  accept(visitor) {
    visitor.visitFile(this);
  }
}

class FileSystemVisitor {
  visitDirectory(dir) {
    console.log(`Entering directory: ${dir.name}`);
  }
  
  visitFile(file) {
    console.log(`File: ${file.name} (${file.size} bytes)`);
  }
}

// 构建文件系统
const root = new Directory('root');
const docs = new Directory('Documents');
docs.add(new File('resume.pdf', 1024));
root.add(docs);
root.add(new File('README.txt', 512));

// 遍历
const visitor = new FileSystemVisitor();
root.accept(visitor);

带状态的访问者

访问者可以维护遍历过程中的状态信息：

class SizeCalculatorVisitor {
  constructor() {
    this.totalSize = 0;
  }
  
  visitDirectory(dir) {
    // 目录本身不占空间
  }
  
  visitFile(file) {
    this.totalSize += file.size;
  }
}

const sizeVisitor = new SizeCalculatorVisitor();
root.accept(sizeVisitor);
console.log(`Total size: ${sizeVisitor.totalSize} bytes`);

访问者模式的变体与优化

动态分派优化

JavaScript可以利用其动态特性简化访问者实现：

class DynamicVisitor {
  visit(element) {
    const methodName = `visit${element.constructor.name}`;
    if(this[methodName]) {
      return this[methodName](element);
    }
    return this.defaultVisit(element);
  }
  
  defaultVisit(element) {
    console.log(`No handler for ${element.constructor.name}`);
  }
}

class JSONExportVisitor extends DynamicVisitor {
  visitTextNode(node) {
    return { type: 'text', content: node.content };
  }
  
  visitImageNode(node) {
    return { type: 'image', src: node.src, alt: node.alt };
  }
}

访问者组合模式

多个访问者可以组合使用，形成处理管道：

class VisitorPipeline {
  constructor(...visitors) {
    this.visitors = visitors;
  }
  
  visit(element) {
    return this.visitors.reduce(
      (result, visitor) => visitor.visit(result),
      element
    );
  }
}

const pipeline = new VisitorPipeline(
  new ValidationVisitor(),
  new TransformationVisitor(),
  new ExportVisitor()
);

pipeline.visit(document);

访问者模式的优缺点

优势体现

1. 开闭原则：新增操作只需添加新的访问者类，无需修改现有结构
2. 单一职责：相关操作集中在同一访问者中，无关操作分离到不同访问者
3. 复杂操作集中：访问者可以累积状态，适合统计、分析等需要遍历的操作

局限性分析

1. 破坏封装：访问者需要访问元素的内部细节，可能破坏封装性
2. 元素接口变更困难：新增元素类型需要修改所有访问者接口
3. 不适用于频繁变更的结构：元素类结构稳定但操作多变时最适用

与其他模式的关系

与组合模式协同

访问者常用来处理组合模式构建的树形结构，如前面文件系统的例子所示。组合模式负责结构的构建，访问者模式负责结构的操作。

与迭代器模式对比

两者都用于遍历集合，但迭代器侧重顺序访问，访问者侧重对每个元素执行操作。实际中可以结合使用：

class CustomIterator {
  constructor(collection) {
    this.collection = collection;
    this.index = 0;
  }
  
  next() {
    return this.collection[this.index++];
  }
  
  hasNext() {
    return this.index < this.collection.length;
  }
  
  traverse(visitor) {
    while(this.hasNext()) {
      this.next().accept(visitor);
    }
  }
}

实际项目中的考量因素

性能优化策略

1. 访问者缓存：对不变的元素结构，可以缓存访问结果
2. 并行访问：对无状态访问者，可以并行处理不同元素
3. 惰性求值：对复杂计算，可以实现惰性访问者

class LazyVisitor {
  constructor() {
    this.cache = new Map();
  }
  
  visit(element) {
    if(!this.cache.has(element)) {
      this.cache.set(element, this.computeValue(element));
    }
    return this.cache.get(element);
  }
  
  computeValue(element) {
    // 昂贵的计算操作
  }
}

测试注意事项

1. 访问者测试应包含：
   • 单个元素的访问测试
   • 复合结构的遍历测试
   • 访问者状态变化的验证
2. 模拟元素时注意保持接口一致性

// 测试示例
describe('HTMLExportVisitor', () => {
  it('should handle text nodes', () => {
    const visitor = new HTMLExportVisitor();
    const textNode = new TextNode('test');
    expect(textNode.accept(visitor)).toBe('<p>test</p>');
  });
  
  it('should process multiple nodes', () => {
    const fragment = [
      new TextNode('hello'),
      new ImageNode('img.png', 'test')
    ];
    const results = fragment.map(node => node.accept(new HTMLExportVisitor()));
    expect(results).toEqual([
      '<p>hello</p>',
      '<img src="img.png" alt="test">'
    ]);
  });
});