本文已参与「新人创作礼」活动，一起开启掘金创作之路。
关键词：Command ChainOfResponsibility
责任链模式在我们平时开发过程中随处可见，比如作用域链、原型链、事件冒泡等。
什么是原型链
__proto__？
为什么这么设计？
JS 为了实现面向对象编程的一种设计，基于原型链可以让 JS 对象拥有封装继承多态等面向对象的特性。
什么是事件冒泡？
事件冒泡：交互事件发生后，从最小元素 div 开始传播，传到顶层 document。
为什么这么设计？
最小元素上可能没有绑定 onclick 事件，所以得层层传递，传到绑定了事件函数的元素上。
换句话说：事件源本身（可能）没有处理事件的能力。
解决什么问题
上述两个例子简单介绍了下职责链模式的经典用例，类比到日常其实就像我们上学的时候上课传纸条、玩击鼓传花，纸条 谁是赵日天？，从第一排传下去，如果不是就不会应答，继续往后传递。
先来看两段珍贵无比的代码，走进职责链模式的内心世界：
业务逻辑集合递减
需求：
- 已生成订单，定金 500，商城优惠券 100元
- 已生成订单，定金 200，商城优惠券 50 元
- 正常购买，是否有库存，原价购买
- 下了单没付钱的一律按照原价购买
改造前：
/** * orderType: 1 -> 500定金 2 -> 200定金 3 -> 普通购买 * isPaid -> 是否已支付定金 * stock -> 库存 */ function getOrder(orderType, isPaid, stock) { // 500元定金购买模式 if (orderType === 1) { // 已支付定金 if (isPaid === true) { console.log('500元定金预购，得到100优惠券'); } else { // 未支付定金，降级到普通购买模式 // 用于普通购买的手机还有库存 if (stock > 0) { console.log('普通购买，无优惠券'); } else { console.log('库存不足'); } } return } // 200元定金购买模式 if (orderType === 2) { if (pay === true) { console.log('200元定金预购, 得到50优惠券'); } else { if (stock > 0) { console.log('普通购买, 无优惠券'); } else { console.log('库存不足'); } } return } if (orderType === 3) { if (stock > 0) { console.log('普通购买, 无优惠券'); } else { console.log('库存不足'); } } } getOrder(1, true, 500); // 500元定金预购，得到100优惠券
问题：代码冗余，大量重复的业务逻辑，难以维护。用职责链模式对代码进行改造。
改造后：
// 定义职责链上的各个节点 const orderFor500 = (orderType, isPaid, stock) => { if (orderType === 1 && isPaid) { console.log('500元定金预购 得到100优惠券') } else { return 'nextTick' } } const orderFor200 = (orderType, isPaid, stock) => { if (orderType === 2 && isPaid) { console.log('200元定金预购 得到500优惠券') } else { return 'nextTick' } } const orderForNormal = (orderType, isPaid, stock) => { if (stock > 0) { console.log('普通购买, 无优惠券') } else { console.log('库存不足') } } // 定义职责链 class Chain { constructor(fn) { this.fn = fn this.nextTick = null } setNextTick(nextTick) { return this.nextTick = nextTick } permit() { const res = this.fn.apply(this, arguments); if (res === 'nextTick') { return this.nextTick && this.nextTick.permit.apply(this.nextTick, arguments) } return res } }
测试代码：
// 声明节点 const chainOrder500 = new Chain(orderFor500); const chainOrder200 = new Chain(orderFor200); const chainOrderNormal = new Chain(orderForNormal); // 指定顺序 chainOrder500.setNextTick(chainOrder200) chainOrder200.setNextTick(chainOrderNormal) // 测试 chainOrder500.permit(1, true, 500) chainOrder500.permit(2, true, 500) chainOrder500.permit(3, true, 500) chainOrder500.permit(1, false, 0) // 500元定金预购 得到100优惠券 // 200元定金预购 得到500优惠券 // 普通购买, 无优惠券 // 库存不足
这样的写法也便于以后拓展，比如运营同学说：350 - 75
const orderFor350 = (orderType, isPaid, stock) => { // code } const chainOrder350 = new Chain(orderFor350); chainOrder500.setNextTick(chainOrder350) chainOrder350.setNextTick(chainOrder200)
改造职责链使其能够异步
在节点函数中发起异步请求，异步请求返回的结果决定是否继续在职责链中 permit。
这时候让节点函数同步返回 nextTick 就没有意义了，所以 Chain 类需要增加方法 $next，手动传递请求给职责链中的下一个节点。
// 定义职责链 class Chain { constructor(fn) { this.fn = fn this.nextTick = null } $next() { return this.nextTick && this.nextTick.permit.apply(this.nextTick, arguments); } setNextTick(nextTick) { return this.nextTick = nextTick } permit() { const res = this.fn.apply(this, arguments); if (res === 'nextTick') { return this.nextTick && this.nextTick.permit.apply(this.nextTick, arguments) } return res } } // 定义节点 const node1 = new Chain(function () { showResult('node-1') return 'nextTick' }) const node2 = new Chain(function () { showResult('node-2') const _this = this; const timer = setTimeout(() => { _this.$next() clearTimeout(timer) }, 1000) }) const node3 = new Chain(function () { showResult('node-3') }) // 测试代码 node1.setNextTick(node2).setNextTick(node3) node1.permit()
请求在链中的节点里传递，节点则确定什么时候把请求交给下一个节点。
定义
在 GoF 给出的定义: 在职责链模式中，多个处理器依次处理同一个请求。一个请求先经过 A 处理器处理，然后再把请求传递给 B 处理器，B 处理器处理完后再传递给 C 处理器，以此类推，形成一个链条。链条上的每个处理器各自承担各自的处理职责，所以叫作职责链模式。
应用场景
主要应用于解耦发起请求的对象和处理请求的对象，更好的帮助我们管理代码。针对不同场景处理请求。就比如优惠券，发帖的审核等。
参考资料：
