web前端中访问者模式的示例分析

这篇文章将为大家详细讲解有关web前端中访问者模式的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联主要从事网站设计、成都网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务黟县,十多年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

访问者模式（Visitor Pattern）

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

// 访问者  class Visitor {
    constructor() {}
    visitConcreteElement(ConcreteElement) {
        ConcreteElement.operation()
    }}// 元素类  class ConcreteElement{
    constructor() {
    }
    operation() {
       console.log("ConcreteElement.operation invoked");  
    }
    accept(visitor) {
        visitor.visitConcreteElement(this)
    }}// clientlet 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

场景

• 对象结构中对象对应的类很少改变，但经常需要在此对象结构上定义新的操作

• 需要对一个对象结构中的对象进行很多不同的并且不相关的操作，而需要避免让这些操作"污染"这些对象的类，也不希望在增加新操作时修改这些类。

优点

• 符合单一职责原则

• 优秀的扩展性

• 灵活性

缺点

• 具体元素对访问者公布细节，违反了迪米特原则

• 违反了依赖倒置原则，依赖了具体类，没有依赖抽象。

• 具体元素变更比较困难

关于“web前端中访问者模式的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。