javascript设计模式 – 访问者模式原理与用法实例分析

站长资源 2024/12/27 佚名

33 1538 33

DDR爱好者之家 Design By 杰米

本文实例讲述了javascript设计模式 – 访问者模式原理与用法。分享给大家供大家参考，具体如下：

介绍：访问者模式比较复杂，它包含访问者和被访问元素两个主要组成部分，这些被访问的元素通常具有不同的类型，且不同的访问者可以对他们进行不同的访问操作。访问者模式的主要目的是将数据结构与数据操作相分离。

定义：提供一个作用于某对象结构中的个元素的操作表示，它使得可以再不改变各元素的类的前提下定义作用于这些元素的新操作。访问者模式是一种对象行为型模式

场景：使用PC结构demo来解释下访问者模式

示例：

var Keyboard = function(){
  this.accept = function(computerPartVisitor){
    computerPartVisitor.visit(this);
  }
}
 
var Monitor = function(){
  this.accept = function(computerPartVisitor){
    computerPartVisitor.visit(this);
  }
}
 
var Mouse = function(){
  this.accept = function(computerPartVisitor){
    computerPartVisitor.visit(this);
  }
}
 
var Computer = function(){
  var parts = [new Keyboard(), new Monitor(), new Mouse()];
 
  this.accept = function(computerPartVisitor){
    computerPartVisitor.visit(this);
    _acceptAll(computerPartVisitor);
  }
 
  var _acceptAll = function(computerPartVisitor){
    parts.map(function(item){
      item.accept(computerPartVisitor)
    });
  }
}
 
var ComputerPartDisplayVisitor = function(){
  this.visit = function(item){
    if(item.constructor == Keyboard){
      console.log("Displaying Keyboard.");
    }else if(item.constructor == Monitor){
      console.log("Displaying Monitor.");
    }else if(item.constructor == Mouse){
      console.log("Displaying Mouse.");
    }else if(item.constructor == Computer){
      console.log("Displaying Computer.");
    }else{
      console.log("Error");
    }
  }
}
 
var computer = new Computer();
computer.accept(new ComputerPartDisplayVisitor());
// Displaying Computer.
// Displaying Keyboard.
// Displaying Monitor.
// Displaying Mouse.

这个模式比较复杂，我们先介绍下组成：

ComputerPartDisplayVisitor称为访问者，它为对象结构中的每一个具体元素例如Keyboard，Mouse等声明一个访问操作。当访问Keyboard时就会输出Displaying Keyboard。
Keyboard，Monitor，Mouse称为元素，他们包含一个accept方法，用来触发传递进来的访问者
Computer称为对象结构，它是一个元素的集合。parts数组用于存放元素对象，以供不同访问者访问。_acceptAll方法用来遍历内部元素。
访问者通过accept访问元素内部，元素内部也可以通过参数调用访问者的visit方法。这种调用机制称为双重分派。

访问者模式总结：

优点：
* 增加新的访问操作便捷，只需要加一个新的访问者类。
* 将有关原色对象的访问行为集合到一个访问者对象中，类的职责更清晰。
* 让用户在不修改现有元素层次结构的情况下，定义作用于该层次结构的操作。

缺点：
* 增加新的元素类很困难，在访问者模式下，每增加一个新的元素,对应要增加访问者中的操作。
* 破坏封装。访问者模式要求访问者对象访问并调用每一个元素对象的操作，这意味着元素必须暴露一些内部操作和内部状态。

适用场景：
* 一个对象结构包含多个类型的对象，希望对这些对象实施一些依赖其具体类型的操作。
* 需要对一个对象结构中的对象进行横多不同的并且不相关的操作，而且需要避免让这些操作污染这些对象的类。
* 对象结构中对象对应的类很少改变，但经常需要再次对象结构上定义新的操作。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

javascript,设计模式,访问者模式

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“javascript设计模式 – 访问者模式原理与用法实例分析”

暂无评论...

javascript设计模式 – 访问者模式原理与用法实例分析

vue 使用 vue-pdf 实现pdf在线预览的示例代码

详解关于Vue单元测试的几个坑

评论“javascript设计模式 – 访问者模式原理与用法实例分析”

更新日志

友情链接