JavaScript之职责链模式

一、概述

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

貌似和数据结构中的链表一样。

但,不要搞混了,职责链可不等于链表哦,因为职责链可以在任何一个节点开始往下查找,而链表,则必须从头结点开始往下查找。

比如,DOM事件机制中的冒泡事件就属于职责链,而捕获事件则属于链表。

二、利用职责链模拟冒泡

假设我们有三个对象:li、ul、div,三者关系图如下:

比如,当我们触发li对象时,如果li没有阻止冒泡,那么将会传递给ul对象,到了ul,如果没有阻止冒泡,则会传递给div对象(假设这里div为根节点)。同理,ul、div。

看到这儿,很清楚适合用职责链模式,编写这样的需求。

但,怎么使用JavaScript实现职责链模式呢?

如下,我们可以通过原型链的方式构建基本架构:

function CreateDOM(obj){
    this.next = obj || null;
};
CreateDOM.prototype = {
    handle: function(){
        if(this.next){
            this.next.handle();
        }
    }
};

每当我们利用CreateDOM构造函数,创建一个对象时,就将与之关联的对象传递进去(嗯,这样很链表)。

然后,当我们触发某个对象,执行handle方法时,就可以沿着这条链,走下去了。

但,需注意,当某个对象的handle属性覆盖了原型链中的handle时,怎么继续往下传呢?

利用CreateDOM.prototype.handle.call(this);就好了。

So,实现li、ul和div代码如下:

var li = null,
    ul = null,
    div = null;
div = new CreateDOM();
div.handle = function(stopBubble){
    console.log(‘DIV‘);
    if(stopBubble){
        return;
    }else{
        CreateDOM.prototype.handle.call(this);
    }
};
ul = new CreateDOM(div);
ul.handle = function(stopBubble){
    console.log(‘UL‘);
    if(stopBubble){
        return;
    }else{
        CreateDOM.prototype.handle.call(this);
    }
};
li = new CreateDOM(ul);
li.handle = function(stopBubble){
    console.log(‘LI‘);
    if(stopBubble){
        return;
    }else{
        CreateDOM.prototype.handle.call(this);
    }
};

over~~

时间: 2024-08-26 04:35:19

JavaScript之职责链模式的相关文章

JavaScript实现职责链模式

什么是职责链模式 职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止.举个例子:当你从公交车后门上车之后,你不可能直接把硬币放到收款箱里面, 因为你不知道它在哪,那你就只能把硬币给你前面一个人,让他帮你传到前面一个人手上,这样一直传递到站在收款箱旁边人的手上,由他把硬币放到收款箱里面. 职责链模式思想 请求发送者只需要知道链中的第一个节点,从而弱化了发送者和一组接收者之间的强联系. J

javascript设计模式——职责链模式

前面的话 职责链模式的定义是使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止.职责链模式的名字非常形象,一系列可能会处理请求的对象被连接成一条链,请求在这些对象之间依次传递,直到遇到一个可以处理它的对象,把这些对象称为链中的节点.本文将详细介绍职责链模式 电商订单 职责链模式的例子在现实中并不难找到,以下就是两个常见的跟职责链模式有关的场景 如果早高峰能顺利挤上公交车的话,那么估计这一天都会过得很开心.

【学习笔记javascript设计模式与开发实践(职责链模式)----13】 http://blog.csdn.net/pigpigpig4587/article/details/50442406#t0

第13章 职责链模式 职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到一个对象处理它为止. 职责链模式的名字非常形象,一系列可能会处理请求的对象被连接成一条链,请求在这些对象之间依次传递,直到遇到一个可以处理它的对象,我们把这些对象称为链中的节点, 13.1 现实中的职责链模式 职责链模式的例子在现实中并不难找到,以下就是两个常见的跟职责链模式有关的场景. o  如果早高峰能顺利挤上公交车的话,那么估计这

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

介绍 职责链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系.将这个对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理他为止. 也就是说,请求以后,从第一个对象开始,链中收到请求的对象要么亲自处理它,要么转发给链中的下一个候选者.提交请求的对象并不明确知道哪一个对象将会处理它——也就是该请求有一个隐式的接受者(implicit receiver).根据运行时刻,任一候选者都可以响应相应的请求,候选者的数目是任意

js原生设计模式——13桥接模式(相同业务逻辑抽象化处理的职责链模式)

桥接模式之多元化类之间的实例化调用实例 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>桥接模式之多元化类之间的实例化调用</title>    <script type="text/javascript">    //多维类的声明和调用(有点像类职责链模式)   

设计模式解密(20)- 职责链模式

1.简介 定义:避免请求发送者与接收者耦合在一起,让多个对象都有可能接收请求,将这些对象连接成一条链,并且沿着这条链传递请求,直到有对象处理它为止. 主要解决:职责链上的处理者负责处理请求,客户只需要将请求发送到职责链上即可,无须关心请求的处理细节和请求的传递,所以职责链将请求的发送者和请求的处理者解耦了. 本质:分离职责,动态组合. 分离职责:分离职责是前提,只有先把复杂功能分开,拆分成很多的步骤和小的功能处理,然后才能合理规划和定义职责类. 动态组合:动态组合是精华,因为要实现请求对象和处理

设计模式(行为型)之职责链模式(Chain of Responsibility Pattern)

PS一句:最终还是选择CSDN来整理发表这几年的知识点,该文章平行迁移到CSDN.因为CSDN也支持MarkDown语法了,牛逼啊! [工匠若水 http://blog.csdn.net/yanbober] 阅读前一篇<设计模式(行为型)之状态模式(State Pattern)>http://blog.csdn.net/yanbober/article/details/45502665 概述 职责链可以是一条直线.一个环或者一个树形结构,最常见的职责链是直线型,即沿着一条单向的链来传递请求.链

java设计模式之职责链模式

[学习难度:★★★☆☆,使用频率:★★☆☆☆] "一对二","过","过"--这声音熟悉吗?你会想到什么?对!纸牌.在类似"斗地主"这样的纸牌游戏中,某人出牌给他的下家,下家看看手中的牌,如果要不起上家的牌则将出牌请求再转发给他的下家,其下家再进行判断.一个循环下来,如果其他人都要不起该牌,则最初的出牌者可以打出新的牌.在这个过程中,牌作为一个请求沿着一条链在传递,每一位纸牌的玩家都可以处理该请求.在设计模式中,我们也有一种专

[设计模式] javascript 之 责任链模式

责任链模式:定义 责任链接模式又称职责链模式,是一种对象的行为模式:它是一种链式结构,每个节点都有可能两种操作,要么处理该请求停止该请求操作,要么把请求转发到下一个节点,让下一个节点来处理请求:该模式定义了一些可能的处理请求的节点对象,请求的起点跟顺序都可能不一样,处理的节点根据请求的不一样而不同:请求者不必知道数据处理完成是由谁来操作的,内部是一个黑箱的操作过程,这是它的一个核心内容: 责任链模式:角色 抽象处理者角色:定义处理方法,以配置是否具有下个节点(Handler)对象; 具体处理者角