JS设计模式——责任链模式

#使用场景如下：

假设我们负责一个售卖手机的电商网站，经过分别交纳 500 元定金和 200 元定金的两轮预定后（订单已在此时生成），现在已经到了正式购买的阶段。
公司针对支付过定金的用户有一定的优惠政策。在正式购买后，已经支付过 500 元定金的用户会收到 100 元的商城优惠券，200 元定金的用户可以收到 50 元的优惠券，而之前没有支付定金的用户只能进入普通购买模式，也就是没有优惠券，且在库存有限的情况下不一定保证能买到。
我们的订单页面是 PHP 吐出的模板，在页面加载之初，PHP 会传递给页面几个字段。
#orderType：表示订单类型（定金用户或者普通购买用户），code 的值为 1 的时候是 500 元定金用户，为 2 的时候是 200 元定金用户，为 3 的时候是普通购买用户。

#pay：表示用户是否已经支付定金，值为 true 或者 false, 虽然用户已经下过 500 元定金的订单，但如果他一直没有支付定金，现在只能降级进入普通购买模式。

# stock：
表示当前用于普通购买的手机库存数量，已经支付过 500 元或者 200元定金的用户不受此限制。

# 下面我们把这个流程写成代码：

** 初级代码**

初级菜鸟的写法/*** 1....初级的写法* @param orderType* @param pay* @param stock*/let order=function (orderType,pay,stock){if (orderType===1){if (pay===true){console.log('500元定金，得到100元优惠券');}else {     //未支付定金，降级到普通购买模式if (stock>0){   //用于普通购买的手机还有库存console.log('普通购买，没有优惠券');}else {console.log('手机库存不足');}}}else if(orderType===2){if(pay===true){console.log('200元定金预约，得到50优惠券');}else {if(stock>0){console.log('普通购买，没有优惠券');}else {console.log('手机库存不足');}}}else if(orderType===3){if (stock>0){console.log('普通购买，没有优惠券');}else {console.log('手机库存不足');}}};console.log("###################初级写法####################");order(1,true,500);

虽然我们得到了意料中的运行结果，但这远远算不上一段值得夸奖的代码。order 函数不仅巨大到难以阅读，而且需要经常进行修改。虽然目前项目能正常运行，但接下来的维护工作无疑是个梦魇。恐怕只有最“新手”的程序员才会写出这样的代码。

** 中级写法**

现在我们采用职责链模式重构这段代码，先把 500 元订单、200 元订单以及普通购买分成 3个函数。接下来把 orderType、pay、stock 这 3 个字段当作参数传递给 500 元订单函数，如果该函数不符合处理条件，则把这个请求传递给后面的 200 元订单函数，如果 200 元订单函数依然不能处理该请求，则继续传递请求给普通购买函数，代码如下：

稍好一点的写法分函数，形成简单责任链/***** 2,中级写法，使用责任链模式重构代码* 分为三个函数** @param orderType* @param pay* @param stock***///1，500元的订单let order500=function (orderType,pay,stock){if (orderType===1&&pay===true){console.log('500元定金，得到100元优惠券');}else {order200(orderType,pay,stock);//将请求转给200元订单}};//200元订单let order200=function (orderType,pay,stock){if(orderType===2&&pay===true){console.log('200元定金预约，得到50优惠券');}else {orderNormal(orderType,pay,stock);//将请求传给普通订单}};//普通购买订单let orderNormal=function (orderType,pay,stock){if (stock>0){console.log('普通购买，没有优惠券');}else {console.log('手机库存不足');}};console.log("###################中级责任链####################");order500(1,true,500);order500(1,false,500);order500(2,true,500);order500(3,false,500);order500(3,false,0);

可以看到，执行结果和前面那个巨大的 order 函数完全一样，但是代码的结构已经清晰了很多，我们把一个大函数拆分了 3 个小函数，去掉了许多嵌套的条件分支语句。目前已经有了不小的进步，但我们不会满足于此，虽然已经把大函数拆分成了互不影响的 3个小函数，但可以看到，请求在链条传递中的顺序非常僵硬，传递请求的代码被耦合在了业务函数之中。

这依然是违反开放封闭原则的，如果有天我们要增加 300 元预订或者去掉 200 元预订，意味着就必须改动这些业务函数内部。就像一根环环相扣打了死结的链条，如果要增加、拆除或者移动一个节点，就必须得先砸烂这根链条。

来改进上面的职责链模式，目标是让链中的各个节点可以灵活拆分和重组。首先需要改写一下分别表示 3 种购买模式的节点函数，我们约定，如果某个节点不能处理请求，则返回一个特定的字符串 'nextSuccessor’来表示该请求需要继续往后面传递：

高级一点的责任链——灵活可拆分的责任链节点
/*** 3.。。灵活可拆分的责任链节点** @param orderType* @param pay* @param stock***/let order_500=function (orderType,pay,stock){if (orderType===1&&pay===true){console.log('500元定金，得到100元优惠券');}else {return 'nextSuccessor';}};let order_200=function (orderType,pay,stock){if (orderType===2&&pay===true){console.log('200元定金预约，得到50优惠券');}else {return 'nextSuccessor';}};let order_Normal=function (orderType,pay,stock){if (stock>0){console.log('普通购买，没有优惠券');}else {console.log('手机库存不足');}}let Chain=function (fn){this.fn=fn;this.successor=null;};// 指定在链中的下一个节点Chain.prototype.setNextSuccessor=function (successor){return this.successor=successor;};//传递请求给某个节点Chain.prototype.passRequest=function (){let ret=this.fn.apply(this,arguments);if (ret==="nextSuccessor"){return this.successor&&this.successor.passRequest.apply(this.successor,arguments);}return ret;};//把3个订单函数分别包装成责任链的节点let chainOrder_500=new Chain(order_500);let chainOrder_200=new Chain(order_200);let chainOrder_Normal=new Chain(order_Normal);//指定节点在责任链中的顺序chainOrder_500.setNextSuccessor(chainOrder_200);chainOrder_200.setNextSuccessor(chainOrder_Normal);//把请求传递给下一个节点console.log("###################高级灵活可充分####################");chainOrder_500.passRequest(1,true,500);chainOrder_500.passRequest(2,true,500);chainOrder_500.passRequest(2,false,500);chainOrder_500.passRequest(3,true,500);chainOrder_500.passRequest(1,false,0);//扩展性很好，如果要添加300元的定金支付let order_300=function (){//具体实现console.log("这里是新增的300")};let chainOrder_300=new Chain(order_300);chainOrder_500.setNextSuccessor(chainOrder_300);chainOrder_200.setNextSuccessor(chainOrder_200);

我们让每个节点函数同步返回一个特定的值"nextSuccessor"，来表示是否把请求传递给下一个节点。而在现实开发中，我们经常会遇到一些异步的问题，比如我们要在节点函数中发起一个 ajax异步请求，异步请求返回的结果才能决定是否继续在职责链中 passRequest。这时候让节点函数同步返回"nextSuccessor"已经没有意义了，所以要给 Chain 类再增加一个原型方法 Chain.prototype.next，表示手动传递请求给职责链中的下一个节点：

异步执行责任链/*****4。。。 异步执行的责任链*/Chain.prototype.next=function (){return this.successor&&this.successor.passRequest(this.successor,arguments);}//异步责任链的例子console.log("###################异步责任链####################");let fn1=new Chain(function (){console.log(1);return 'nextSuccessor';});let fn2=new Chain(function (){console.log(2);let self=this;setTimeout(function (){self.next();},1000)});let fn3=new Chain(function (){console.log(3);});fn1.setNextSuccessor(fn2).setNextSuccessor(fn3);fn1.passRequest();

责任链的优缺点

职责链模式的最大优点就是解耦了请求发送者和 N 个接收者之间的复杂关系，由于不知道链中的哪个节点可以处理你发出的请求，所以你只需把请求传递给第一个节点即可，如图
用职责链模式改进后：

职责链模式使得程序中多了一些节点对象，可能在某一次的请求传递过程中，大部分节点并没有起到实质性的作用，它们的作用仅仅是让请求传递下去，从性能方面考虑，我们要避免过长的职责链带来的性能损耗。

用AOP实现责任链

在之前的职责链实现中，我们利用了一个 Chain 类来把普通函数包装成职责链的节点。其实利用 JavaScript 的函数式特性，有一种更加方便的方法来创建职责链。

在这里插入代码片/**** 5.。。用AOP实现责任链***/console.log("###################AOP实现责任链####################");Function.prototype.after=function (fn){let self=this;return function (){let ret=self.apply(this,arguments);if (ret==='nextSuccessor'){return fn.apply(this,arguments);}return ret;}};let order_aop=order_500.after(order_200).after(order_Normal());order_aop(1,true,500);order_aop(2,true,500);order_aop(1,false,500);

用 AOP 来实现职责链既简单又巧妙，但这种把函数叠在一起的方式，同时也叠加了函数的作用域，如果链条太长的话，也会对性能有较大的影响。

用职责链模式获取文件上传对象

在这里插入代码片/*** 用责任链模式获取文件上传对象** @returns {string|any}*/let getActiveUploadObj=function (){try{return new ActiveXObject("TXFNActiveX.FINUpload");//IE 上传课件}catch (e){return 'nextSuccessor';}};let getFlashUploadObj=function (){if (supportFlash()){let str='<object type="application/x-shockwave-flash"></object>>';return $(str).appendTo($('body'));}return 'nextSuccessor';};let getFormUploadObj=function (){return $('<form><><input type="file" name="file"></form>').appendTo($('body'));};let getUploadObj=getActiveUploadObj.after(getFlashUploadObj).after(getFormUploadObj);console.log(getUploadObj());

小结
在 JavaScript 开发中，职责链模式是最容易被忽视的模式之一。实际上只要运用得当，职责链模式可以很好地帮助我们管理代码，降低发起请求的对象和处理请求的对象之间的耦合性。职责链中的节点数量和顺序是可以自由变化的，我们可以在运行时决定链中包含哪些节点。

无论是作用域链、原型链，还是 DOM 节点中的事件冒泡，我们都能从中找到职责链模式的影子。职责链模式还可以和组合模式结合在一起，用来连接部件和父部件，或是提高组合对象的效率。学会使用职责链模式，相信在以后的代码编写中，将会对我们大有裨益。

加油

读书	明智	笃行
读书百遍其义自现	明明德，止于至善	业精于勤，荒于嬉；行成于思，毁于随

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，继续你的创作。
……^ _ ^ !!!

JS设计模式——责任链模式相关推荐

Java设计模式-责任链模式
Java设计模式-责任链模式,我想这是值得你了解一下下的啦. 会了就当复习丫,不会来一起来看看吧. 很喜欢一句话:"八小时内谋生活,八小时外谋发展". 如果你也喜欢,让我们一起坚持 ...
设计模式--责任链模式--Java实现
设计模式–责任链模式–Java实现责任链模式–链式数据结构–内存消耗–Java的awt事件一开始用责任链模式后来改为观察者模式–为什么呢?–现在的应用–dom事件–异常处理机制-过滤器链–等等学习 ...
理解各种设计模式原则及区别丨浅谈Nginx中核心设计模式-责任链模式丨C++后端开发丨Linux服务器开发丨web服务器
理解各种设计模式原则及区别丨浅谈Nginx中核心设计模式-责任链模式 1. 开闭.单一职责.里氏替换.接口隔离等设计原则 2. 随处可见的模板方法 3. nginx中核心设计模式责任链模式 4. 责 ...
java责任链模式审批请假_Java设计模式-责任链模式
Java设计模式-责任链模式 Java版本:jdk1.8 IDE:IDEA 一前言本文介绍责任链模式以及Java下的实现. 二概念 1.什么是责任链模式责任链模式(Chain of Respo ...
设计模式责任链模式
责任链模式顾名思义,责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计 ...
23种设计模式——责任链模式
一.责任链模式顾名思义,责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的 ...
一起学设计模式 - 责任链模式
责任链模式(ChainOfResponsibilityPattern)属于行为型模式的一种,将请求沿着一条链传递,直到该链上的某个对象处理它为止. 概述定义如下:一个请求有多个对象来处理,这些对象 ...
大话设计模式—责任链模式
顾名思义,责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链.这种模式给予请求的类型,对请求的发送者和接收者进行解耦.这种类型的设计模式属于行为 ...
php设计模式-责任链模式
最近重构代码发现责任链模式非常实用,所以简单总结了一下.总体来说,责任链模式更像是一种简化多种场景下调用处理的一种设计模式,特别适合if-else分支判断很多的场景.比如是根据不同会员等级给予不同的优 ...
深入理解设计模式-责任链模式（职责链模式）
文章目录一.定义二.使用场景三.代码样例 1.需求 2.设计一个所有处理器都要实现的接口 3.实现各种处理器 4.客户端 5. 输出四.要点与优缺点结尾一.定义避免请求发送者与接收者耦合 ...

JS设计模式——责任链模式

JS设计模式——责任链模式

加油

JS设计模式——责任链模式相关推荐

最新文章

热门文章