js设计模式（12）---职责链模式

0.前言

老实讲，看设计模式真得很痛苦，一则阅读过的代码太少；二则从来或者从没意识到使用过这些东西。所以我采用了看书（《js设计模式》）和阅读博客（大叔、alloyteam、聂微东）相结合的办法，勉勉强强写了这么多随笔，当然写随便不是为了炫耀，而是对知识进行总结，以便加深理解。

1.职责链模式是什么？

有一个请求，多个对象都可以处理该请求，但是到底哪个对象要处理该请求在开发期是不确定的，也就是说请求的发送者和接受者是一种动态的关系。所以需要将这些对象链成一条链，并沿着这条链传递该请求，链上的对象要么处理该请求，要么传递给下一个对象。从而避免了请求的发送者和接受者之间的耦合关系。

职责链模式经常和组合模式一起使用，这样一个构件的父构件可以作为其继任者。DOM里面的事件冒泡机制也和此有类似的地方。

2.流程

2.1、发送者知道链中的第一个接受者，它向这个接受者发送请求；

2.2、链中的接受者对该请求进行分析，然后要么处理它要么传给下一个对象；

2.3、每个接受者知道的其他对象只有一个，即它在链中的下家；

2.4、如果没有任何接受者处理请求，那么请求将从链中离开，不同的实现对此也有不同的反应，一般会抛出一个错误。

3.代码说明

本人水平有限，就直接把大叔的代码拿过来，再次体现拿来主义吧。

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;
    }
};

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();

//输出结果
button before ...
dialog before ...
app handle
dialog after ...
button after ...

4.个人理解

1.使用条件：有一个请求，多个对象都可以对其处理，但是到底是哪个对象要处理，在开发期是不确定的；

2.如何使用：把这些对象链到一条链上，链上的对象要么处理该请求，要么将其传递给下一个对象；

3.DOM中的事件冒泡就跟此类似。