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

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

前言

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


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

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

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

介绍

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


// 访问者  
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数据的能力


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);
  }
}


验证


const employee = new Employee('bruce', 1000);
const visitor = new Visitor();
employee.accept(visitor);
console.log(employee.getSalary());//输出:2000


优缺点

优点:


分离数据结构与操作:访问者模式可以帮助我们将数据结构与对其进行操作的算法解耦,使得数据结构的变化不会影响到算法的变化。


增加新的操作很容易:通过继承或扩展现有的访问者接口,可以很容易地增加新的操作,而无需修改已有的数据结构。


各种操作行为集中:访问者模式能够将对数据结构的各种操作行为集中到一个访问者类中,从而便于管理和维护。


缺点:


增加新的数据结构困难:如果需要增加新的数据结构,就需要修改所有的访问者类,这可能会带来一定的复杂性和工作量。


破坏封装性:访问者模式在某种程度上可能会破坏数据结构的封装性,因为它要求数据结构暴露一些内部元素给访问者对象。

应用场景


  • 对数据结构的多种操作:当一个数据结构有多种不同的操作,并且这些操作相互独立、频繁发生变化时,可以考虑使用访问者模式。
  • 数据结构稳定,但需要增加新的操作:如果数据结构相对稳定,但需要经常增加新的操作,访问者模式可以很好地满足这个需求。
  • 数据结构的操作方式多样:当数据结构的元素类型固定,但对其进行的操作方式却多样的时候,访问者模式也是一个很好的选择。


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

后言

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


目录
相关文章
|
1天前
|
设计模式 前端开发
前端设计模式
前端设计模式
12 5
|
17天前
|
前端开发 搜索推荐 开发者
【Flutter前端技术开发专栏】Flutter中的自定义主题与暗黑模式
【4月更文挑战第30天】本文介绍了如何在Flutter中自定义主题和实现暗黑模式。通过`ThemeData`类定义应用的外观,包括颜色、字体和样式。示例展示了如何设置主色、强调色及文本、按钮主题。暗黑模式可通过`darkTheme`属性启用,结合`ThemeData.dark()`方法定制。利用`MediaQuery`监听系统亮度变化,动态调整暗黑模式状态。Flutter的这些特性有助于开发者创建独特且用户友好的界面。
【Flutter前端技术开发专栏】Flutter中的自定义主题与暗黑模式
|
17天前
|
前端开发 UED
前端事件驱动模式如何提高用户体验和应用程序的交互性
前端事件驱动模式提升用户体验,实现即时响应、动态更新界面、精确处理交互、创建用户友好界面和增强可扩展性。通过监听用户操作触发事件处理,实现流畅、直观的交互,如表单验证、输入补全、拖拽排序等。模块化设计便于功能扩展和维护,打造响应式、用户中心化的应用。
|
17天前
|
前端开发 网络协议 JavaScript
如何在前端实现WebSocket发送和接收TCP消息(多线程模式)
请确保在你的服务器端实现WebSocket的处理,以便它可以接受和响应前端发送的消息。同时,考虑处理错误情况和关闭连接的情况以提高可靠性。
52 0
|
17天前
|
设计模式 存储 缓存
精进前端开发:深入探讨前端设计模式
精进前端开发:深入探讨前端设计模式
34 0
|
17天前
|
前端开发 搜索推荐 UED
解密前端路由: hash模式vs.history模式
解密前端路由: hash模式vs.history模式
|
17天前
|
设计模式 算法 前端开发
【面试题】如何理解 前端设计模式-测策略模式?
【面试题】如何理解 前端设计模式-测策略模式?
|
17天前
|
前端开发
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
前端必看的8个HTML+CSS技巧 (七)混合模式(Blend)
|
17天前
|
移动开发 前端开发 JavaScript
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?
VSCode设置类似Webstorm那样可以用本地局域网IP地址访问自己开发的测试项目,vs code 前端如何以服务器模式打开?