有那些网站,做网站加班多吗,小程序源码是什么,做京东网站采购的工作内容访问者模式#xff08;Visitor Pattern#xff09;是一种行为设计模式#xff0c;它允许你在不改变元素类的前提下定义作用于这些元素的新操作。这种模式将算法与对象结构分离#xff0c;使得可以独立地变化那些保存在复杂对象结构中的元素的操作。
假设我们有一个复杂的对…
访问者模式Visitor Pattern是一种行为设计模式它允许你在不改变元素类的前提下定义作用于这些元素的新操作。这种模式将算法与对象结构分离使得可以独立地变化那些保存在复杂对象结构中的元素的操作。
假设我们有一个复杂的对象结构例如一个包含多种图形圆形、矩形、三角形的绘图系统。我们可能需要对这些图形进行多种操作如计算面积、绘制轮廓、计算周长等。如果将这些操作的代码都放在图形类中会使图形类变得非常臃肿。访问者模式就像是一个外来的“访问者”它可以独立于图形类定义这些操作然后在需要的时候“访问”图形并执行相应的操作。
一、核心思想
核心思想是将算法从对象的结构中分离出来封装在独立的访问者对象中。这样一来就可以在不修改对象结构的情况下为该结构中的元素添加新的操作或行为。
二、定义与结构
定义表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的前提下定义作用于这些元素的新操作。结构 访问者Visitor抽象类或者接口定义了对每个具体元素访问的操作方法。具体访问者ConcreteVisitor实现访问者接口实现对具体元素的操作。元素Element抽象类或者接口定义了一个接受访问者的方法accept方法。具体元素ConcreteElement实现元素接口在accept方法中调用访问者对应的操作方法。对象结构ObjectStructure包含可以被访问的元素集合提供方法让访问者访问它的元素。
三、角色
访问者Visitor 这是一个抽象角色用于声明访问具体元素的方法。例如在图形系统中它可能有visitCircle、visitRectangle等方法这些方法的参数通常是对应的具体元素。它定义了对不同类型元素进行操作的统一接口。 具体访问者ConcreteVisitor 实现了访问者接口。它为每个访问方法提供了具体的实现这些实现包含了针对具体元素的实际操作逻辑。比如一个计算图形面积的具体访问者会在visitCircle方法中实现计算圆形面积的逻辑在visitRectangle方法中实现计算矩形面积的逻辑等。 元素Element 抽象元素角色通常是一个抽象类或接口定义了accept方法。这个方法接受一个访问者对象作为参数用于将当前元素自身传递给访问者以便访问者执行相应的操作。 具体元素ConcreteElement 实现了抽象元素角色定义的接口或抽象类。在accept方法中它会调用访问者的相应方法并将自身作为参数传递进去。例如圆形类Circle作为具体元素在其accept方法中会调用访问者的visitCircle方法并把自己圆形对象传递给访问者。 对象结构ObjectStructure 这个角色用于管理和存储元素对象。它提供了方法来遍历元素集合让访问者能够访问其中的每个元素。比如在绘图系统中对象结构可能是一个包含所有图形的列表它有一个方法可以遍历这个列表然后让访问者访问每个图形。
四、实现步骤及代码示例
步骤一定义访问者接口和具体访问者类
// 访问者接口
interface Visitor {void visitCircle(Circle circle);void visitRectangle(Rectangle rectangle);
}
// 具体访问者类计算面积
class AreaCalculatorVisitor implements Visitor {Overridepublic void visitCircle(Circle circle) {double area Math.PI * circle.getRadius() * circle.getRadius();System.out.println(圆形面积 area);}Overridepublic void visitRectangle(Rectangle rectangle) {double area rectangle.getWidth() * rectangle.getHeight();System.out.println(矩形面积 area);}
}步骤二定义元素接口和具体元素类
// 元素接口
interface Shape {void accept(Visitor visitor);
}
// 具体元素类圆形
class Circle implements Shape {private double radius;public Circle(double radius) {this.radius radius;}public double getRadius() {return radius;}Overridepublic void accept(Visitor visitor) {visitor.visitCircle(this);}
}
// 具体元素类矩形
class Rectangle implements Shape {private double width;private double height;public Rectangle(double width, double height) {this.width width;this.height height;}public double getWidth() {return width;}public double getHeight() {return height;}Overridepublic void accept(Visitor visitor) {visitor.visitRectangle(this);}
}步骤三定义对象结构类并使用访问者模式
import java.util.ArrayList;
import java.util.List;
// 对象结构类
class ShapeList {private ListShape shapes new ArrayList();public void addShape(Shape shape) {shapes.add(shape);}public void accept(Visitor visitor) {for (Shape shape : shapes) {shape.accept(visitor);}}
}
// 主程序测试
public class Main {public static void main(String[] args) {ShapeList shapeList new ShapeList();shapeList.addShape(new Circle(3.0));shapeList.addShape(new Rectangle(4.0, 5.0));Visitor areaCalculator new AreaCalculatorVisitor();shapeList.accept(areaCalculator);}
}在上述代码中Visitor是访问者接口AreaCalculatorVisitor是具体访问者用于计算图形面积。Shape是元素接口Circle和Rectangle是具体元素。ShapeList是对象结构用于管理图形对象。在main方法中我们创建了图形对象列表添加了圆形和矩形对象然后创建了面积计算访问者并让对象结构接受访问者来计算每个图形的面积。
五、常见技术框架应用
1、编译器中的语法树遍历
在编译器开发中语法树是一个复杂的对象结构。访问者模式可以用于遍历语法树并执行语义分析或代码生成等操作。步骤一定义语法树节点元素接口和具体节点类
// 语法树节点接口
interface ASTNode {void accept(ASTVisitor visitor);
}
// 具体节点类表达式节点
class ExpressionNode implements ASTNode {// 表达式内容等属性Overridepublic void accept(ASTVisitor visitor) {visitor.visitExpressionNode(this);}
}
// 具体节点类语句节点
class StatementNode implements ASTNode {// 语句内容等属性Overridepublic void accept(ASTVisitor visitor) {visitor.visitStatementNode(this);}
}步骤二定义访问者接口和具体访问者类语义分析访问者
// 访问者接口
interface ASTVisitor {void visitExpressionNode(ExpressionNode node);void visitStatementNode(StatementNode node);
}
// 具体访问者类语义分析
class SemanticAnalysisVisitor implements ASTVisitor {Overridepublic void visitExpressionNode(ExpressionNode node) {// 进行表达式语义分析如检查操作数类型等}Overridepublic void visitStatementNode(StatementNode node) {// 进行语句语义分析如检查变量声明等}
}步骤三定义语法树对象结构类并使用访问者模式进行遍历
import java.util.ArrayList;
import java.util.List;
// 语法树类
class SyntaxTree {private ListASTNode nodes new ArrayList();public void addNode(ASTNode node) {nodes.add(node);}public void accept(ASTVisitor visitor) {for (ASTNode node : nodes) {node.accept(visitor);}}
}
// 主程序测试假设在编译器的某个阶段
public class Compiler {public static void main(String[] args) {SyntaxTree syntaxTree new SyntaxTree();ASTNode expressionNode new ExpressionNode();ASTNode statementNode new StatementNode();syntaxTree.addNode(expressionNode);syntaxTree.addNode(statementNode);ASTVisitor semanticAnalysisVisitor new SemanticAnalysisVisitor();syntaxTree.accept(semanticAnalysisVisitor);}
}这里的语法树由各种语法节点组成通过访问者模式语义分析访问者可以遍历语法树并对每个节点进行语义分析而不需要将语义分析代码嵌入到语法树节点的内部。
2、前端框架中的访问者模式示例
以下是一些前端框架中访问者模式应用的具体例子
处理复杂UI组件树
假设我们有一个复杂的用户界面它由各种不同的UI组件构成比如按钮、输入框、下拉菜单等。每个组件可能都需要执行特定的操作例如验证、序列化或渲染。我们可以定义一个Visitor来封装这些操作而不是将所有逻辑都放在组件内部这样可以使代码更加模块化和易于维护。
// 抽象访问者 (Abstract Visitor)
class UIComponentVisitor {visitButton(button) { }visitInput(input) { }visitDropdown(dropdown) { }
}// 具体访问者 (Concrete Visitors)
class ValidatorVisitor extends UIComponentVisitor {visitButton(button) {// 验证按钮的逻辑console.log(Validating button:, button);}visitInput(input) {if (!input.value) {console.error(Input is required:, input);} else {console.log(Input validated:, input);}}visitDropdown(dropdown) {// 验证下拉菜单的逻辑console.log(Validating dropdown:, dropdown);}
}class SerializerVisitor extends UIComponentVisitor {visitButton(button) {// 序列化按钮的状态console.log(Serializing button:, button);}visitInput(input) {// 序列化输入框的值console.log(Serializing input value:, input.value);}visitDropdown(dropdown) {// 序列化下拉菜单的选择console.log(Serializing dropdown selection:, dropdown.selectedOptions);}
}// 抽象元素 (Abstract Element)
class UIComponent {constructor() {this.name UIComponent;}accept(visitor) {visitor[visit${this.constructor.name}](this);}
}// 具体元素 (Concrete Elements)
class Button extends UIComponent {constructor(text) {super();this.text text;this.name Button;}
}class Input extends UIComponent {constructor(value) {super();this.value value;this.name Input;}
}class Dropdown extends UIComponent {constructor(options, selectedOptions) {super();this.options options;this.selectedOptions selectedOptions;this.name Dropdown;}
}// 使用访问者模式
const components [new Button(Submit), new Input(Some text), new Dropdown([Option1, Option2], [Option1])];const validator new ValidatorVisitor();
const serializer new SerializerVisitor();components.forEach(component component.accept(validator));
console.log(\n);
components.forEach(component component.accept(serializer));在这个例子中ValidatorVisitor和SerializerVisitor是具体的访问者它们实现了针对不同类型UI组件的不同行为。UIComponent及其子类作为具体元素提供了accept方法以接受访问者的访问。这种方式使得我们可以很容易地添加新的操作类型而无需修改现有的UI组件类。
React 中的虚拟 DOM 遍历与更新间接体现访问者模式思想
背景 在 React 中虚拟 DOMVirtual DOM是一个关键概念。它是真实 DOM 结构在 JavaScript 对象层面的一种表示通过对比虚拟 DOM 的前后状态变化来决定如何高效地更新真实 DOM。分析 元素类似访问者模式中的元素角色React 组件对应的虚拟 DOM 节点可以看作是元素。例如一个简单的 div 组件在虚拟 DOM 里会被表示成一个包含各种属性如 props、children 等的 JavaScript 对象它定义了 accept这里没有显式的 accept 方法名但有类似机制操作也就是允许 React 的更新机制来处理它。访问者类似访问者模式中的访问者角色React 的 Diffing 算法用于对比新旧虚拟 DOM 差异的机制以及后续的 Reconciliation 过程协调更新的过程可以看作是访问者。Diffing 算法会遍历虚拟 DOM 树从根节点开始访问每个虚拟 DOM 节点元素去判断节点的类型、属性以及子节点等是否发生了变化这个过程就类似访问者对不同元素进行访问并执行相应操作。例如当检测到一个 div 组件的 props 发生了改变访问者更新机制就会执行对应的更新真实 DOM 中该 div 对应部分的操作比如更新 style 属性或者 innerHTML 等。具体过程示例 假如有一个简单的 React 组件结构如下
function App() {return (div classNameapph1Hello/h1pWorld/p/div);
}当组件的状态发生改变比如 className 变为 app-newReact 会重新构建新的虚拟 DOM 树然后通过 Diffing 算法这个“访问者”去遍历新旧虚拟 DOM 树的各个节点元素对比发现 div 节点的 className 属性变化了就会执行相应的更新真实 DOM 中对应 div 元素的操作将 class 属性更新为 app-new。
Vue.js 的模板编译与指令解析体现访问者模式思路
背景 Vue.js 在将模板template编译成渲染函数render 函数以及解析模板中的指令如 v-if、v-for 等时运用了类似访问者模式的思路。分析 元素类似访问者模式中的元素角色模板中的 HTML 标签以及文本节点等可以看作是元素。例如 div v-ifshow{{ message }}/div 中的 div 标签、文本插值 {{ message }} 等它们构成了整个模板这个“数据结构”并且每个元素都能被访问处理。访问者类似访问者模式中的访问者角色Vue 的模板编译器就是访问者。它会对模板这个元素集合进行遍历解析每个元素。比如对于指令类的元素像遇到 v-if 指令时访问者编译器会解析出条件判断逻辑根据对应的数据show 变量的值来决定是否生成该 div 元素的渲染代码对于文本插值元素 {{ message }}访问者会解析出需要将对应的数据message 值渲染到此处的操作。具体过程示例 假设我们有如下 Vue 模板
templatedivp v-ifisShowThis is visible/pp v-elseThis is hidden/pspan{{ greeting }}/span/div
/template当 Vue 进行模板编译时编译器这个“访问者”会遍历整个模板的各个元素。对于带有 v-if 指令的 p 元素它会检查 isShow 数据的值如果为 true则生成将 This is visible 渲染到页面的相关代码逻辑对于文本插值的 span 元素编译器会根据 greeting 变量的值生成将其正确渲染到对应位置的代码从而实现模板到渲染函数的转换后续基于渲染函数就能更新页面 DOM 了。
Ember.js 的渲染系统部分体现访问者模式
背景 Ember.js 有一套自己的渲染机制用于根据定义的模板和组件来生成和更新页面内容。分析 元素类似访问者模式中的元素角色在 Ember.js 中组件对应的模板内容、DOM 元素等可以视为元素。例如一个自定义的组件模板里包含的各种 HTML 标签、绑定的数据等组成了要处理的元素集合。访问者类似访问者模式中的访问者角色Ember.js 的渲染引擎和相关的更新机制充当访问者。渲染引擎会遍历组件的模板元素比如遇到绑定数据的地方类似 {{someProperty}}访问者渲染引擎会去获取对应的数据值并将其正确渲染到 DOM 中当组件状态变化触发更新时更新机制同样会访问各个元素判断哪些元素需要重新渲染然后执行相应的更新操作。具体过程示例 假设有一个 Ember.js 组件的模板如下
{{! my-component.hbs }}
h2{{title}}/h2
pDescription: {{description}}/p当 Ember.js 渲染这个组件时渲染引擎这个“访问者”会访问模板中的每个元素对于 {{title}} 和 {{description}} 这些绑定数据的元素会从组件对应的 JavaScript 对象包含 title 和 description 等属性中获取相应的值然后将其渲染到对应的 HTML 标签内生成最终的 DOM 结构展示给用户。当组件的 title 或 description 属性值发生变化时更新机制又会作为访问者再次访问这些元素重新获取新值并更新 DOM 展示。
总之在前端框架中访问者模式或其类似思路常被用于高效地处理页面元素的渲染、更新以及对模板、DOM 相关结构的操作使得代码结构更清晰便于扩展和维护不同的功能逻辑。
六、应用场景
数据结构稳定但作用于数据结构的操作经常变化的场景。
需要将数据结构与数据操作分离的场景。
需要对不同数据类型进行操作而不适用分支判断具体类型的场景。
元素具体类型并非单一访问者均可操作的场景。数据结构的操作分离当有一个复杂的数据结构如树形结构、图形系统中的图形集合等并且需要对这个数据结构执行多种不同的操作如计算、打印、转换等时访问者模式可以将操作代码从数据结构类中分离出来使得数据结构的定义更加清晰操作的扩展更加容易。编译器设计如前面提到的语法树遍历用于语义分析、中间代码生成、代码优化等阶段。不同的编译器阶段可以定义不同的访问者来对语法树进行操作。XML文档处理可以将XML文档看作是一个树形的数据结构访问者模式可以用于对XML元素进行不同的操作如验证、转换、提取信息等。编译器构建在编译器中不同的节点类型如表达式、语句等可以通过访问者模式进行不同的处理如语法检查、代码生成等。文档处理在文档处理系统中不同的文档元素如文本、图片、表格等可以通过访问者模式进行不同的处理如渲染、统计字数等。图形界面工具在图形界面工具中不同的UI组件如按钮、文本框、菜单等可以通过访问者模式进行不同的操作如绘制、事件处理等。数据分析在数据分析系统中不同的数据结构如树、图、表等可以通过访问者模式进行不同的分析操作如计算总和、平均值等。游戏开发在游戏开发中不同的游戏对象如玩家、敌人、道具等可以通过访问者模式进行不同的操作如更新状态、渲染图像等。
七、优缺点
优点
分离操作和数据结构使得数据结构的定义和操作的定义可以独立变化提高了代码的可维护性和可扩展性。当需要添加新的操作时只需要创建新的访问者类而不需要修改数据结构类。符合开闭原则对于数据结构和操作的扩展是开放的对于修改是封闭的。可以方便地添加新的元素数据结构中的节点和新的访问者操作。增加代码的复用性访问者类可以在多个不同的数据结构上复用只要这些数据结构的元素接口是兼容的。
缺点
增加了代码的复杂性访问者模式需要定义多个接口和类包括访问者接口、具体访问者类、元素接口、具体元素类和对象结构类等这使得代码结构相对复杂对于简单的应用场景可能会增加不必要的复杂性。违背了迪米特法则因为访问者模式需要访问数据结构中的元素可能会导致访问者和元素之间的耦合度过高访问者需要知道元素的内部结构和接口细节这在一定程度上违背了迪米特法则最少知识原则。
