前端设计模式之【访问者模式】

文章目录

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:前端设计模式

🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹

💖感谢大家支持!您的观看就是作者创作的动力

介绍

访问者模式 是一种将算法与对象结构分离的设计模式,通俗点讲就是:访问者模式让我们能够在不改变一个对象结构的前提下能够给该对象增加新的逻辑,新增的逻辑保存在一个独立的访问者对象中。访问者模式常用于拓展一些第三方的库和工具。

javascript 复制代码
// 访问者  
class Visitor {
    constructor() {}
    visitConcreteElement(ConcreteElement) {
        ConcreteElement.operation()
    }
}
// 元素类  
class ConcreteElement{
    constructor() {
    }
    operation() {
       console.log("ConcreteElement.operation invoked");  
    }
    accept(visitor) {
        visitor.visitConcreteElement(this)
    }
}
// client
let visitor = new Visitor()
let element = new ConcreteElement()
elementA.accept(visitor)
 

实现

访问者模式的实现有以下几个要素:

  • Visitor Object:访问者对象,拥有一个visit()方法
  • Receiving Object:接收对象,拥有一个 accept() 方法
  • visit(receivingObj):用于Visitor接收一个Receiving Object
  • accept(visitor):用于Receving Object接收一个Visitor,并通过调用Visitor的 visit() 为其提供获取 Receiving Object数据的能力
javascript 复制代码
Receiving Object:

function Employee(name, salary) {
  this.name = name;
  this.salary = salary;
}

Employee.prototype = {
  getSalary: function () {
    return this.salary;
  },
  setSalary: function (salary) {
    this.salary = salary;
  },
  accept: function (visitor) {
    visitor.visit(this);
  }
}
Visitor Object:

function Visitor() { }

Visitor.prototype = {
  visit: function (employee) {
    employee.setSalary(employee.getSalary() * 2);
  }
}

验证

javascript 复制代码
const employee = new Employee('bruce', 1000);
const visitor = new Visitor();
employee.accept(visitor);

console.log(employee.getSalary());//输出:2000
 

优缺点

优点:

分离数据结构与操作:访问者模式可以帮助我们将数据结构与对其进行操作的算法解耦,使得数据结构的变化不会影响到算法的变化。
增加新的操作很容易:通过继承或扩展现有的访问者接口,可以很容易地增加新的操作,而无需修改已有的数据结构。
各种操作行为集中:访问者模式能够将对数据结构的各种操作行为集中到一个访问者类中,从而便于管理和维护。

缺点:

增加新的数据结构困难:如果需要增加新的数据结构,就需要修改所有的访问者类,这可能会带来一定的复杂性和工作量。
破坏封装性:访问者模式在某种程度上可能会破坏数据结构的封装性,因为它要求数据结构暴露一些内部元素给访问者对象。

应用场景

  • 对数据结构的多种操作:当一个数据结构有多种不同的操作,并且这些操作相互独立、频繁发生变化时,可以考虑使用访问者模式。

  • 数据结构稳定,但需要增加新的操作:如果数据结构相对稳定,但需要经常增加新的操作,访问者模式可以很好地满足这个需求。

  • 数据结构的操作方式多样:当数据结构的元素类型固定,但对其进行的操作方式却多样的时候,访问者模式也是一个很好的选择。

在实际项目中,访问者模式常常应用于解析、转换和操作复杂的数据结构,比如编译器、解释器等。另外,在图形界面开发中,访问者模式也可以用于对图形元素进行不同类型的操作,比如绘制、计算尺寸等。此外,在游戏开发中,访问者模式也可以用于处理游戏中的各种角色或对象的不同行为。总的来说,访问者模式适用于那些数据结构相对稳定,但需要对其进行多种操作的场景,能够有效地管理和扩展不同类型的操作。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

相关推荐
wangruofeng3 小时前
AI Models 1.1.0 发布,查大模型价格、对比模型和找 API 地址
前端·aigc·ai编程
wangruofeng3 小时前
给前端开发者的 100 个设计参考网站
前端·设计
星栈7 小时前
视频即代码,Remotion 能做什么、不能做什么
前端·音视频开发
广州华水科技7 小时前
单北斗GNSS位移监测系统的应用与技术解析
前端
用户47949283569157 小时前
从一句话或代码仓到可交互 HTML:开源 Agent 画图技能 Archify v3.2 实测与选型边界
前端·后端·面试
风骏时光牛马9 小时前
生成一个AI多模态标题,仅输出一条标题,无额外文字、问句、备选、配图、文案等任何附加内容,不需要其他的任务服务 只要标题。
前端
wangruofeng10 小时前
从 GIF 到 AVIF:网页图片格式演进与 2026 年选型指南
前端·架构
清晨Coding11 小时前
为什么用 React Developer Tools 查看组件树这么乱?
前端·react.js
用户6242931966211 小时前
告别 Electron 臃肿与 Wireshark 老化界面:用 Rust + Tauri 2.0 构建多总线网络与现场总线深度分析仪 Omni-Probe
设计模式
鶴哥只手遮天11 小时前
《Electron 45.2.3 内核解剖》第 4 章 补丁体系:380 个补丁改了什么
前端·electron