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 相关文章推荐
Dojo之路:如何利用Dojo实现Drag and Drop效果
Apr 10 Javascript
jQuery 性能优化指南(3)
May 21 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
得到form下的所有的input的js代码
Nov 07 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
Jan 22 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
canvas实现弧形可拖动进度条效果
May 11 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
JavaScript显式数据类型转换详解
Mar 18 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 mysql事务问题实例分析
2016/01/18 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
angularJS 中$attrs方法使用指南
2015/02/09 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[18:16]sakonoko 2017年卡尔集锦
2018/02/06 DOTA
Python基于DES算法加密解密实例
2015/06/03 Python
python+selenium开发环境搭建图文教程
2017/08/11 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
基于python生成器封装的协程类
2019/03/20 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
SQL面试题
2013/04/30 面试题
用友笔试题目
2016/10/25 面试题
linux面试题参考答案(6)
2014/08/29 面试题
村优秀党员事迹材料
2014/01/15 职场文书
村级个人对照检查材料
2014/08/22 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
感谢信格式范文
2015/01/22 职场文书
合同补充协议书
2016/03/24 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL
python中super()函数的理解与基本使用
2021/08/30 Python
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫