J*aScript访问者模式_数据结构遍历操作_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

J*aScript访问者模式_数据结构遍历操作

2025-11-24

浏览次数：次

返回列表

访问者模式通过分离数据结构与操作实现解耦，适用于树形结构如AST或DOM的多种遍历场景。其核心是元素类提供accept方法接收访问者，访问者实现visit方法对不同元素执行具体操作。例如在表达式树中，可通过EvaluateVisitor计算值、PrintVisitor打印表达式，新增操作无需修改节点类，只需扩展访问者。优点是易扩展、操作集中，缺点是节点类型变动时需更新所有访问者。该模式在J*aScript中适合构建解析器或编译器，提升代码可维护性。

javascript访问者模式_数据结构遍历操作

J*aScript中的访问者模式常用于解耦数据结构与对数据的操作，特别适合需要对复杂对象结构（如树、DOM、AST等）进行多种不同遍历操作的场景。它让新增操作变得灵活，而无需修改原有的数据结构。

什么是访问者模式

访问者模式是一种行为设计模式，它将作用于某种数据结构中的各元素的操作分离出来，封装到独立的访问者对象中。这样可以在不改变元素类的前提下，为这些元素添加新的操作。

核心思想是：把数据结构和作用于结构上的操作分离开。适用于数据结构相对稳定，但操作多变的场景。

基本实现结构

在J*aScript中，可以通过定义元素的accept方法和访问者的visit方法来实现。

Element（元素）：定义accept方法，接收一个访问者对象
Visitor（访问者）：定义visit方法，针对不同类型的元素实现具体操作

示例代码：

class NumberNode {
  constructor(value) {
    this.value = value;
  }
<p>accept(visitor) {
visitor.visitNumber(this);
}
}</p><p>class OperationNode {
constructor(operator, left, right) {
this.operator = operator;
this.left = left;
this.right = right;
}</p><p>accept(visitor) {
visitor.visitOperation(this);
}
}</p><p>class EvaluateVisitor {
visitNumber(node) {
return node.value;
}</p><p>visitOperation(node) {
const left = node.left.accept(this);
const right = node.right.accept(this);
if (node.operator === '+') return left + right;
if (node.operator === '<em>') return left </em> right;
return 0;
}
}</p>

使用方式：

const ast = new OperationNode('+', 
  new NumberNode(5), 
  new OperationNode('*', new NumberNode(2), new NumberNode(3))
);
<p>const evaluator = new EvaluateVisitor();
console.log(ast.accept(evaluator)); // 输出 11</p>

应用场景：遍历复杂数据结构

访问者模式非常适合处理树形结构，比如抽象语法树（AST）、DOM树或文件系统目录。

魔法映像企业网站管理系统

技术上面应用了三层结构，AJAX框架，URL重写等基础的开发。并用了动软的代码生成器及数据访问类，加进了一些自己用到的小功能，算是整理了一些自己的操作类。系统设计上面说不出用什么模式，大体设计是后台分两级分类，设置好一级之后，再设置二级并选择栏目类型，如内容，列表，上传文件，新窗口等。这样就可以生成无限多个二级分类，也就是网站栏目。对于扩展性来说，如果有新的需求可以直接加一个栏目类型并新加功能操作

0 查看详情魔法映像企业网站管理系统

可扩展性强：新增操作只需添加新访问者，不影响现有节点
集中操作逻辑：相似操作集中在访问者类中，便于维护
支持多种遍历策略：如打印、验证、优化、序列化等

例如，再加一个打印访问者：

class PrintVisitor {
  visitNumber(node) {
    return node.value.toString();
  }
<p>visitOperation(node) {
const left = node.left.accept(this);
const right = node.right.accept(this);
return <code>(${left} ${node.operator} ${right})</code>;
}
}</p><p>console.log(ast.accept(new PrintVisitor())); // 输出 (5 + (2 * 3))</p>