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


Posted in Javascript onApril 26, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
window.open不被拦截的实现代码
Aug 22 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
jQuery解析XML与传统JavaScript方法的差别实例分析
Mar 05 Javascript
JS使用eval解析JSON的注意事项分析
Nov 14 Javascript
JS制作图形验证码实现代码
Oct 19 Javascript
vue.js element-ui tree树形控件改iview的方法
Mar 29 Javascript
如何获取TypeScript的声明文件.d.ts
May 01 Javascript
微信小程序自定义tab实现多层tab嵌套功能
Jun 15 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
使用ThinkJs搭建微信中控服务的实现方法
Aug 08 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
详解关于Vue单元测试的几个坑
Apr 26 #Javascript
es6函数之箭头函数用法实例详解
Apr 25 #Javascript
es6数组之扩展运算符操作实例分析
Apr 25 #Javascript
es6函数之尾调用优化实例分析
Apr 25 #Javascript
es6函数之尾递归用法实例分析
Apr 25 #Javascript
javascript 易错知识点实例小结
Apr 25 #Javascript
javascript执行上下文、变量对象实例分析
Apr 25 #Javascript
You might like
PHP文件缓存类示例分享
2015/01/30 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
php in_array() 检查数组中是否存在某个值详解
2016/11/23 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
2011/08/15 Javascript
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
PHP+jQuery+Ajax实现多图片上传效果
2015/03/14 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
莱鸟介绍window.print()方法
2016/01/06 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
jQuery上传多张图片带进度条样式(DEMO)
2017/03/02 Javascript
Vue2.0用户权限控制解决方案的示例
2018/02/10 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
2018/05/06 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
2018/11/10 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
python函数的5种参数详解
2017/02/24 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
python按照多个条件排序的方法
2019/02/08 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
浅谈如何使用python抓取网页中的动态数据实现
2020/08/17 Python
用pushplus+python监控亚马逊到货动态推送微信
2021/01/29 Python
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
摄影展策划方案
2014/06/02 职场文书
毕业生找工作求职信
2014/08/05 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript