深入理解JavaScript系列(38):设计模式之职责链模式详解


Posted in Javascript onMarch 04, 2015

介绍

职责链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理他为止。

也就是说,请求以后,从第一个对象开始,链中收到请求的对象要么亲自处理它,要么转发给链中的下一个候选者。提交请求的对象并不明确知道哪一个对象将会处理它——也就是该请求有一个隐式的接受者(implicit receiver)。根据运行时刻,任一候选者都可以响应相应的请求,候选者的数目是任意的,你可以在运行时刻决定哪些候选者参与到链中。

正文

对于JavaScript实现,我们可以利用其原型特性来实现职责链模式。

var NO_TOPIC = -1;

var Topic;
function Handler(s, t) {

    this.successor = s || null;

    this.topic = t || 0;

}
Handler.prototype = {

    handle: function () {

        if (this.successor) {

            this.successor.handle()

        }

    },

    has: function () {

        return this.topic != NO_TOPIC;

    }

};

Handler只是接受2个参数,第一个是继任者(用于将处理请求传下去),第二个是传递层级(可以用于控制在某个层级下是否执行某个操作,也可以不用),Handler原型暴露了一个handle方法,这是实现该模式的重点,先来看看如何使用上述代码。
var app = new Handler({

        handle: function () {

            console.log('app handle');

        }

    }, 3);
    var dialog = new Handler(app, 1);
    var button = new Handler(dialog, 2);
    button.handle();

改代码通过原型特性,调用代码从button.handle()->dialog.handle()->app.handle()->参数里的handle(),前三个都是调用原型的handle,最后才查找到传入的参数里的handle,然后输出结果,也就是说其实只有最后一层才处理。

那如何做到调用的时候,只让dialog的这个对象进行处理呢?其实可以定义dialog实例对象的handle方法就可以了,但需要在new button的之前来做,代码如下:

var app = new Handler({

        handle: function () {

            console.log('app handle');

        }

    }, 3);
    var dialog = new Handler(app, 1);

    dialog.handle = function () {

        console.log('dialog before ...')

        // 这里做具体的处理操作

        console.log('dialog after ...')

    };
    var button = new Handler(dialog, 2);
    button.handle();

该代码的执行结果即时dialog.handle里的处理结果,而不再是给app传入的参数里定义的handle的执行操作。

那能不能做到自身处理完以后,然后在让继任者继续处理呢?答案是肯定的,但是在调用的handle以后,需要利用原型的特性调用如下代码:

Handler.prototype.handle.call(this);

该句话的意思说,调用原型的handle方法,来继续调用其继任者(也就是successor )的handle方法,以下代码表现为:button/dialog/app三个对象定义的handle都会执行。
var app = new Handler({

    handle: function () {

        console.log('app handle');

    }

}, 3);
var dialog = new Handler(app, 1);

dialog.handle = function () {

    console.log('dialog before ...')

    // 这里做具体的处理操作

    Handler.prototype.handle.call(this); //继续往上走

    console.log('dialog after ...')

};
var button = new Handler(dialog, 2);

button.handle = function () {

    console.log('button before ...')

    // 这里做具体的处理操作

    Handler.prototype.handle.call(this);

    console.log('button after ...')

};
button.handle();

通过代码的运行结果我们可以看出,如果想先自身处理,然后再调用继任者处理的话,就在末尾执行Handler.prototype.handle.call(this);代码,如果想先处理继任者的代码,就在开头执行Handler.prototype.handle.call(this);代码。

总结

职责链模式经常和组合模式一起使用,这样一个构件的父构件可以作为其继任者。

同时,DOM里的事件冒泡机制也和此好像有点类似,比如点击一个按钮以后,如果不阻止冒泡,其click事件将一直向父元素冒泡,利用这个机制也可以处理很多相关的问题,比如本系列设计模式享元模式里的《例1:事件集中管理》的示例代码。

Javascript 相关文章推荐
JS焦点图切换,上下翻转
May 12 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
图解JavaScript中的this关键字
May 28 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
微信小程序request请求后台接口php的实例详解
Sep 20 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 #Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 #Javascript
jQuery插件开发的五种形态小结
Mar 04 #Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 #Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 #Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 #Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 #Javascript
You might like
老机欣赏|中国60年代精品收音机
2021/03/02 无线电
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
PHP数学运算函数大汇总(经典值得收藏)
2016/04/01 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
2017/01/19 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
python如何在终端里面显示一张图片
2016/08/17 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
使用Python & Flask 实现RESTful Web API的实例
2017/09/19 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
Python中使用Counter进行字典创建以及key数量统计的方法
2018/07/06 Python
python之拟合的实现
2019/07/19 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
利于python脚本编写可视化nmap和masscan的方法
2020/12/29 Python
python爬虫scrapy基于CrawlSpider类的全站数据爬取示例解析
2021/02/20 Python
Android面试宝典
2013/08/06 面试题
网吧收银员岗位职责
2013/12/14 职场文书
铣床操作工岗位职责
2014/06/13 职场文书
中国梦团日活动总结
2014/07/07 职场文书
出国签证在职证明范本
2014/11/24 职场文书
公司感谢信范文
2015/01/22 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
Python 发送SMTP邮件的简单教程
2021/06/24 Python
Windows下载并安装MySQL8.0.x 版本的完整教程
2022/04/10 MySQL