深入理解JavaScript系列（38）：设计模式之职责链模式详解
前端之家收集整理的这篇文章主要介绍了
深入理解JavaScript系列（38）：设计模式之职责链模式详解，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_4040@介绍
@H
4040@职责链模式（Chain of responsibility）是使多个对象都有机会处理请求，从而避免请求的发送者和接受者之间的耦合关系。将这个对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理他为止。
@H4040@也就是说，请求以后，从第一个对象开始，链中收到请求的对象要么亲自处理它，要么转发给链中的下一个候选者。提交请求的对象并不明确知道哪一个对象将会处理它——也就是该请求有一个隐式的接受者（implicit receiver）。根据运行时刻，任一候选者都可以响应相应的请求，候选者的数目是任意的，你可以在运行时刻决定哪些候选者参与到链中。
@H4040@正文
@H404_0@对于JavaScript实现，我们可以利用其原型特性来实现职责链模式。
<div class="codetitle">
<a style="CURSOR: pointer" data="35326" class="copybut" id="copybut35326" onclick="doCopy('code35326')"> 代码如下: <div class="codebody" id="code35326">
var NO
TOPIC = -1;
var Topic;
@H4040@function Handler(s,t) {
this.successor = s || null;
this.topic = t || 0;
}
@H404_0@Handler.prototype = {
handle: function () {
if (this.successor) {
this.successor.handle()
}
},
has: function () {
return this.topic != NO_TOPIC;
}
};
Handler只是接受2个参数，第一个是继任者（用于将处理请求传下去），第二个是传递层级（可以用于控制在某个层级下是否执行某个操作，也可以不用），Handler原型暴露了一个handle
@H_
404_0@ var dialog = new Handler(app,1);
@H_
404_0@ var button = new Handler(dialog,2);
@H_
404_0@ button.handle();
@H_
404_0@ var button = new Handler(dialog,2);
@H_
404_0@ button.handle();
该句话的意思说，
调用原型的handle
方法，来继续
调用其继任者（也就是successor ）的handle
方法，以下
代码表现为：button/dialog/app三个对象定义的handle都会执行。
@H_
404_0@var dialog = new Handler(app,1);
dialog.handle = function () {
console.log('dialog before ...')
// 这里做具体的处理操作
Handler.prototype.handle.call(this); //继续往上走
console.log('dialog after ...')
};
@H_
404_0@var button = new Handler(dialog,2);
button.handle = function () {
console.log('button before ...')
// 这里做具体的处理操作
Handler.prototype.handle.call(this);
console.log('button after ...')
};
@H_
404_0@button.handle();
@H_
404_0@通过
代码的运行结果我们可以看出，如果想先自身处理，然后再
调用继任者处理的话，就在末尾执行Handler.prototype.handle.call(this);
代码，如果想先处理继任者的
代码，就在开头执行Handler.prototype.handle.call(this);
代码。
@H_
404_0@
总结
@H_
404_0@职责链模式经常和组合模式一起使用，这样一个构件的父构件可以作为其继任者。
@H_
404_0@同时，DOM里的事件冒泡机制也和此好像有点类似，比如点击一个按钮以后，如果不阻止冒泡，其click事件将一直向父元素冒泡，利用这个机制也可以处理很多相关的问题，比如本系列设计模式享元模式里的《例1：事件集中管理》的示例
代码。
