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 相关文章推荐
基于jquery的设置页面文本框 只能输入数字的实现代码
Apr 19 Javascript
js使用数组判断提交数据是否存在相同数据
Nov 27 Javascript
javascript初学者常用技巧
Sep 02 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
Bootstrap编写导航栏和登陆框
May 30 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
JS作用域深度解析
Dec 29 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
Nov 06 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
基于JavaScript判断两个对象内容是否相等
Jan 10 Javascript
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
详解关于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
最省空间的计数器
2006/10/09 PHP
使用php伪造referer的方法 利用referer防止图片盗链
2014/01/20 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
Laravel 集成微信用户登录和绑定的实现
2019/12/27 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
些很实用且必用的小脚本代码
2006/06/26 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
使用JS取得焦点(focus)元素代码
2014/03/22 Javascript
学习JavaScript正则表达式
2015/11/13 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
详解AngularJS controller调用factory
2017/05/19 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
python通过openpyxl生成Excel文件的方法
2015/05/12 Python
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
详解python的数字类型变量与其方法
2016/11/20 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
Ajax和javascript的区别
2013/07/20 面试题
一份婚庆公司创业计划书
2014/01/11 职场文书
服务员岗位职责
2014/01/29 职场文书
工程项目经理任命书
2014/06/05 职场文书
力学专业求职信
2014/07/23 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
中学生打架检讨书
2014/10/13 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
入伍通知书
2015/04/23 职场文书
安全生产感想
2015/08/07 职场文书