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


    前言

    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)
     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    实现

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

    • 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);
      }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    验证

    const employee = new Employee('bruce', 1000);
    const visitor = new Visitor();
    employee.accept(visitor);
    
    console.log(employee.getSalary());//输出:2000
     
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    优缺点

    优点:

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

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

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

    缺点:

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

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

    应用场景

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

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

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

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

    后言

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

  • 相关阅读:
    lintcode 1642 · 查询字符串【二进制 字符串 中等 vip】
    【docker】网络模式管理
    Linux安装java环境的2种方式(Centos7版本,java1.8的版本环境)
    什么是多进程-多线程-多协程 ---- 文件系统
    java计算机毕业设计个人连锁民宿信息管理系统设计与开发系统(修改)MyBatis+系统+LW文档+源码+调试部署
    解决证书加密问题:OpenSSL与urllib3的兼容性与优化
    音视频技术开发周刊 | 270
    CCF CSP认证 历年题目自练Day37
    Linux常用环境Docker安装
    【ROOTFS】1-构建rootfs与nfs调试
  • 原文地址:https://blog.csdn.net/weixin_68537796/article/details/134339751