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

文章目录

前言

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
 

优缺点

优点:

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

缺点:

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

应用场景

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

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

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

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

后言

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

相关推荐
m0_748247551 小时前
Web 应用项目开发全流程解析与实战经验分享
开发语言·前端·php
m0_748255022 小时前
前端常用算法集合
前端·算法
真的很上进2 小时前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203982 小时前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_2343 小时前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1233 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~4 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语4 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport4 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg4 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全