JS设计模式之访问者模式定义与用法分析


Posted in Javascript onFebruary 05, 2018

本文实例讲述了JS设计模式之访问者模式定义与用法。分享给大家供大家参考,具体如下:

在访问者模式中,主要包括下面几个角色

1、抽象访问者:抽象类或者接口,声明访问者可以访问哪些元素,具体到程序中就是visit方法中的参数定义哪些对象是可以被访问的。
2、访问者:实现抽象访问者所声明的方法,它影响到访问者访问到一个类后该干什么,要做什么事情。
3、抽象元素类:接口或者抽象类,声明接受哪一类访问者访问,程序上是通过accept方法中的参数来定义的。抽象元素一般有两类方法,一部分是本身的业务逻辑,另外就是允许接收哪类访问者来访问。
4、元素类:实现抽象元素类所声明的accept方法,通常都是visitor.visit(this),基本上已经形成一种定式了。
5、结构对象:一个元素的容器,一般包含一个容纳多个不同类、不同接口的容器,如List、Set、Map等,在项目中一般很少抽象出这个角色。

实现代码:

// 访问者
function Visitor() {
 this.visit = function( concreteElement ) {
 concreteElement.doSomething();
 }
}
// 元素类
function ConceteElement() {
 this.doSomething = function() {
 console.log("这是一个具体元素");
 }
 this.accept = function( visitor ) {
 visitor.visit(this);
 }
}
// Client
var ele = new ConceteElement();
var v = new Visitor();
ele.accept( v );

访问者模式的优点

1、符合单一职责原则:凡是适用访问者模式的场景中,元素类中需要封装在访问者中的操作必定是与元素类本身关系不大且是易变的操作,使用访问者模式一方面符合单一职责原则,另一方面,因为被封装的操作通常来说都是易变的,所以当发生变化时,就可以在不改变元素类本身的前提下,实现对变化部分的扩展。

2、扩展性良好:元素类可以通过接受不同的访问者来实现对不同操作的扩展。

访问者模式的适用场景

1、假如一个对象中存在着一些与本对象不相干(或者关系较弱)的操作,为了避免这些操作污染这个对象,则可以使用访问者模式来把这些操作封装到访问者中去。

2、假如一组对象中,存在着相似的操作,为了避免出现大量重复的代码,也可以将这些重复的操作封装到访问者中去。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
javascript小数四舍五入多种方法实现
Dec 23 Javascript
JavaScript位移运算符(无符号) >>> 三个大于号 的使用方法详解
Mar 31 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
javascript self对象使用详解
Oct 18 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 #Javascript
vue2.0 datepicker使用方法
Feb 04 #Javascript
js数组常用最重要的方法
Feb 04 #Javascript
jQuery Dom元素操作技巧
Feb 04 #jQuery
Vue的事件响应式进度条组件实例详解
Feb 04 #Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 #Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 #Javascript
You might like
jquery固定底网站底部菜单效果
2013/08/13 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jquery实现简单的轮换出现效果实例
2015/07/23 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
Bootstrap 组件之按钮(二)
2016/05/11 Javascript
通过学习bootstrop导航条学会修改bootstrop颜色基调
2017/06/11 Javascript
关于定制FileField中的上传文件名称问题
2017/08/22 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
2018/09/25 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
微信小程序页面间传值与页面取值操作实例分析
2019/04/30 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
2020/12/03 Vue.js
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python使用7z解压apk包的方法
2015/04/18 Python
python numpy函数中的linspace创建等差数列详解
2017/10/13 Python
python re模块的高级用法详解
2018/06/06 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python 图片去噪的方法示例
2019/07/09 Python
使用Python合成图片的实现代码(图片添加个性化文本,图片上叠加其他图片)
2020/04/30 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
2019史上最全Database工程师题库
2015/12/06 面试题
应届生会计电算化求职信
2013/10/03 职场文书
节约用水演讲稿
2014/05/21 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
迎新生标语大全
2014/10/06 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js