脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → JavaScript设计模式之职责链模式

深入理解JavaScript系列（38）：设计模式之职责链模式详解

 更新时间：2015年03月04日 09:11:57   投稿：junjie  
这篇文章主要介绍了深入理解JavaScript系列（38）：设计模式之职责链模式详解,职责链模式（Chain of responsibility）是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,需要的朋友可以参考下

介绍

职责链模式（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中的数据类型之旅

    Javascript中的数据类型之旅

    JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据。
    2015-10-10
  • 总结javascript三元运算符知识点

    总结javascript三元运算符知识点

    这是一篇关于javascript三元运算符的相关基础知识点内容，大家可以学习一下巩固基础知识。
    2018-09-09
  • 简易js代码实现计算器操作

    简易js代码实现计算器操作

    正在学习javascript的朋友们，可以把这个小练习做一做，加强自己编写代码的能力
    2013-04-04
  • javascript中有趣的反柯里化深入分析

    javascript中有趣的反柯里化深入分析

    国内对前端的研究在某些方面也不逊色于国外,反科里化的话题来自javascript之父Brendan Eich去年的一段twitter,需要深入理解的朋友可以参考本文
    2012-12-12
  • 带你了解session和cookie作用原理区别和用法

    带你了解session和cookie作用原理区别和用法

    这篇文章主要介绍了session和cookie作用原理,区别和用法,以及使用过程中的优缺点，通过列举区别和原理，使读者更能理解两者之间的关系,需要的朋友可以参考下
    2017-08-08
  • 微信小程序开发之入门实例教程篇

    微信小程序开发之入门实例教程篇

    2016年推出微信小程序，时至今日，历经几个版本的更新，已形成了相对实用和稳定的服务平台。本文简单的介绍了微信小程序的入门用法，今后会继续关注和实践。需要的朋友可以参考学习，下面来一起看看吧。
    2017-03-03
  • 关于textarea提交的内容无法换行的解决办法

    关于textarea提交的内容无法换行的解决办法

    本篇文章小编为大家介绍，关于textarea提交的内容无法换行的解决办法，有需要的朋友可以参考一下
    2013-04-04
  • 详解JavaScript中undefined与null的区别

    详解JavaScript中undefined与null的区别

    大多数计算机语言，有且仅有一个表示"无"的值，比如，C语言的NULL，Java语言的null，Python语言的none，Ruby语言的nil
    2014-03-03
  • js前端面试题及答案整理（一）

    js前端面试题及答案整理（一）

    各公司秋招很快就开始了，最近在准备面试的东西，干脆将发现的各类面试题整理一下共享出来，大部分面试题是没有标准答案的，我给出的答案也是仅供参考，如果有更好的解答欢迎在评论区留言
    2016-08-08
  • javascript学习笔记（五）原型和原型链详解

    javascript学习笔记（五）原型和原型链详解

    许多人对JavaScript的原型及原型链仍感到困惑，网上的文章又大多长篇大论，令读者不明觉厉。我将用最简洁明了的文字介绍JavaScript的原型及原型链。
    2014-10-10

最新评论