您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

JavaScript职责链模式(Chain of Responsibility...)

时间:2019-08-21 10:49:31  来源:  作者:
JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

职责链模式的定义是使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。职责链模式的名字非常形象,一系列可能会处理请求的对象被连接成一条链,请求在这些对象之间依次传递,直到遇到一个可以处理它的对象,把这些对象称为链中的节点。

基本流程

职责连是由多个不同的对象组成的,有发送者跟接收者,分别负责信息的发送跟接收,其中,链中第一个对象是 职责连是由多个不同的对象组成的,发送者是发送请求的对象,接收者接收请求并且对其进行处理或传递的对象。基本流程如下:

  1. 发送者知道链中的第一个接收者,它向这个接收者发送该请求。
  2. 每一个接收者都对请求进行分析,然后要么处理它,要么它往下传递。
  3. 每一个接收者知道其他的对象只有一个,即它在链中的下家(successor)。
  4. 如果没有任何接收者处理请求,那么请求会从链中离开。

职责链模式是个链式结构,请求在链中的节点之间依次传递,直到有一个对象能处理该请求为止。如果没有任何对象处理该请求的话,那么请求就会从链中离开。

实战

职责链模式的例子在现实中并不难找到,以下就是两个常见的跟职责链模式有关的场景

如果早高峰能顺利挤上公交车的话,那么估计这一天都会过得很开心。因为公交车上人实在太多了,经常上车后却找不到售票员在哪,所以只好把两块钱硬币往前面递。除非运气够好,站在前面的第一个人就是售票员,否则,硬币通常要在N个人手上传递,才能最终到达售票员的手里

中学时代的期末考试,如果平时不太老实,考试时就会被安排在第一个位置。遇到不会答的题目,就把题目编号写在小纸条上往后传递,坐在后面的同学如果也不会答,他就会把这张小纸条继续递给他后面的人

从这两个例子中,很容易找到职责链模式的最大优点:请求发送者只需要知道链中的第一个节点,从而弱化了发送者和一组接收者之间的强联系。如果不使用职责链模式,那么在公交车上,就得先搞清楚谁是售票员,才能把硬币递给他。同样,在期末考试中,也许就要先了解同学中有哪些可以解答这道题

假设负责一个售卖手机电商网站,经过分别交纳500元定金和200元定金的两轮预定后(订单已在此时生成),现在已经到了正式购买的阶段。公司针对支付过定金的用户有一定的优惠政策。在正式购买后,已经支付过500元定金的用户会收到100元的商城优惠券,200元定金的用户可以收到50元的优惠券,而之前没有支付定金的用户只能进入普通购买模式,也就是没有优惠券,且在库存有限的情况下不一定保证能买到

订单页面是php吐出的模板,在页面加载之初,PHP会传递给页面几个字段

1、orderType:表示订单类型(定金用户或者普通购买用户),code的值为1的时候是500元定金用户,为2的时候是200元定金用户,为3的时候是普通购买用户

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

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

下面把这个流程写成代码:

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

虽然得到了意料中的运行结果,但这远远算不上一段值得夸奖的代码。order函数不仅巨大到难以阅读,而且需要经常进行修改。虽然目前项目能正常运行,但接下来的维护工作无疑是个梦魇

职责链模式重构

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

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

可以看到,执行结果和前面那个巨大的order函数完全一样,但是代码的结构已经清晰了很多,把一个大函数拆分了3个小函数,去掉了许多嵌套的条件分支语句

虽然已经把大函数拆分成了互不影响的3个小函数,但可以看到,请求在链条传递中的顺序非常僵硬,传递请求的代码被耦合在了业务函数之中

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

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

灵活可拆分的职责链节点

下面采用一种更灵活的方式,来改进上面的职责链模式,目标是让链中的各个节点可以灵活拆分和重组

首先需要改写一下分别表示3种购买模式的节点函数,约定如果某个节点不能处理请求,则返回一个特定的字符串'nextSuccessor'来表示该请求需要继续往后面传递:

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

接下来需要把函数包装进职责链节点,定义一个构造函数Chain,在new Chain的时候传递的参数即为需要被包装的函数,同时它还拥有一个实例属性this.successor,表示在链中的下一个节点。此外Chain的prototype中还有两个函数,它们的作用如下所示:

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

现在把3个订单函数分别包装成职责链的节点:

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

通过改进,可以自由灵活地增加、移除和修改链中的节点顺序,假如某天网站运营人员又想出了支持300元定金购买,那就在该链中增加一个节点即可

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

异步的职责链

上面的职责链模式中,让每个节点函数同步返回一个特定的值"nextSuccessor",来表示是否把请求传递给下一个节点。而在现实开发中,经常会遇到一些异步的问题,比如要在节点函数中发起一个ajax异步请求,异步请求返回的结果才能决定是否继续在职责链中passRequet

这时候让节点函数同步返回"nextSuccessor"已经没有意义了,所以要给Chain类再增加一个原型方法Chain.prototype.next,表示手动传递请求给职责链中的下一个节点

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

下面是一个异步职责链的例子

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

现在得到了一个特殊的链条,请求在链中的节点里传递,但节点有权利决定什么时候把请求交给下一个节点。可以想象,异步的职责链加上命令模式,可以很方便地创建一个异步ajax队列库

优缺点

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

在手机商城的例子中,本来要被迫维护一个充斥着条件分支语句的巨大的函数,在例子里的购买过程中只打印了一条log语句。其实在现实开发中,这里要做更多事情,比如根据订单种类弹出不同的浮层提示、渲染不同的UI节点、组合不同的参数发送给不同的cgi等。用了职责链模式之后,每种订单都有各自的处理函数而互不影响

其次,使用了职责链模式之后,链中的节点对象可以灵活地拆分重组。增加或者删除一个节点,或者改变节点在链中的位置都是轻而易举的事情

职责链模式还有一个优点,那就是可以手动指定起始节点,请求并不是非得从链中的第一个节点开始传递。比如在公交车的例子中,如果明确在前面的第一个人不是售票员,那当然可以越过他把公交卡递给他前面的人,这样可以减少请求在链中的传递次数,更快地找到合适的请求接受者。这在普通的条件分支语句下是做不到的,没有办法让请求越过某一个if判断

拿代码来证明这一点,假设某一天网站中支付过定金的订单已经全部结束购买流程,在接下来的时间里只需要处理普通购买订单,所以可以直接把请求交给普通购买订单节点:

orderNormal.passRequest(1,false,500); //普通购买,无优惠券

如果运用得当,职责链模式可以很好地帮助我们组织代码,但这种模式也并非没有弊端,首先不能保证某个请求一定会被链中的节点处理。比如在期末考试的例子中,小纸条上的题目也许没有任何一个同学知道如何解答,此时的请求就得不到答复,而是径直从链尾离开,或者抛出一个错误异常。在这种情况下,可以在链尾增加一个保底的接受者节点来处理这种即将离开链尾的请求

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

AOP

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

下面改写一下Function.prototype.after函数,使得第一个函数返回'nextSuccessor'时,将请求继续传递给下一个函数,无论是返回字符串'nextSuccessor'或者false都只是一个约定,当然在这里也可以让函数返回false表示传递请求,选择'nextSuccessor'字符串是因为它看起来更能表达我们的目的,代码如下

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

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

文件上传

迭代器模式中,有一个获取文件上传对象的例子:当时创建了一个迭代器来迭代获取合适的文件上传对象,其实用职责链模式可以更简单,完全不用创建这个多余的迭代器,完整代码如下

JavaScript设计模式之职责链模式(Chain of Responsibility...)

 

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

无论是作用域链、原型链,还是DOM节点中的事件冒泡,都能从中找到职责链模式的影子。职责链模式还可以和组合模式结合在一起,用来连接部件和父部件,或是提高组合对象的效率

总结

优点

  1. 解耦了请求发送者和度个接收者之间的复杂关系,不需要知道链中哪个节点能处理你的请求,只需要把请求传递到第一个节点即可。
  2. 链中的节点对象可以灵活地拆分重组,增加或删除一个节点,或者改变节点的位置都是很简单的事情。
  3. 我们还可以手动指定节点的起始位置,并不是说非得要从其实节点开始传递的.

缺点

职责链模式中多了一点节点对象,可能在某一次请求过程中,大部分节点没有起到实质性作用,他们的作用只是让请求传递下去,从性能方面考虑,避免过长的职责链提高性能。



Tags:JavaScript 职责链模式   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
职责链模式的定义是使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。职责...【详细内容】
2019-08-21  Tags: JavaScript 职责链模式  点击:(289)  评论:(0)  加入收藏
▌简易百科推荐
1、通过条件判断给变量赋值布尔值的正确姿势// badif (a === 'a') { b = true} else { b = false}// goodb = a === 'a'2、在if中判断数组长度不为零...【详细内容】
2021-12-24  Mason程    Tags:JavaScript   点击:(6)  评论:(0)  加入收藏
给新手朋友分享我收藏的前端必备javascript已经写好的封装好的方法函数,直接可用。方法函数总计:41个;以下给大家介绍有35个,需要整体文档的朋友私信我,1、输入一个值,将其返回数...【详细内容】
2021-12-15  未来讲IT    Tags:JavaScript   点击:(20)  评论:(0)  加入收藏
1. 检测一个对象是不是纯对象,检测数据类型// 检测数据类型的方法封装(function () { var getProto = Object.getPrototypeOf; // 获取实列的原型对象。 var class2type =...【详细内容】
2021-12-08  前端明明    Tags:js   点击:(23)  评论:(0)  加入收藏
作者:一川来源:前端万有引力 1 写在前面Javascript中的apply、call、bind方法是前端代码开发中相当重要的概念,并且与this的指向密切相关。本篇文章我们将深入探讨这个关键词的...【详细内容】
2021-12-06  Nodejs开发    Tags:Javascript   点击:(19)  评论:(0)  加入收藏
概述DOM全称Document Object Model,即文档对象模型。是HTML和XML文档的编程接口,DOM将文档(HTML或XML)描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和...【详细内容】
2021-11-16  海人为记    Tags:DOM模型   点击:(35)  评论:(0)  加入收藏
入口函数 /*js加载完成事件*/ window.onload=function(){ console.log("页面和资源完全加载完毕"); } /*jQuery的ready函数*/ $(document).ready(function(){ co...【详细内容】
2021-11-12  codercyh的开发日记    Tags:jQuery   点击:(36)  评论:(0)  加入收藏
一、判断是否IE浏览器(支持判断IE11与edge)function IEVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isIE = userAgent.indexOf("comp...【详细内容】
2021-11-02  V面包V    Tags:Javascript   点击:(40)  评论:(0)  加入收藏
Null、Undefined、空检查普通写法: if (username1 !== null || username1 !== undefined || username1 !== '') { let username = username1; }优化后...【详细内容】
2021-10-28  前端掘金    Tags:JavaScript   点击:(51)  评论:(0)  加入收藏
今天我们将尝试下花 1 分钟的时间简单地了解下什么是 JS 代理对象(proxies)?我们可以这样理解,JS 代理就相当于在对象的外层加了一层拦截,在拦截方法里我们可以自定义一些个性化...【详细内容】
2021-10-18  前端达人    Tags:JS   点击:(51)  评论:(0)  加入收藏
带有多个条件的 if 语句把多个值放在一个数组中,然后调用数组的 includes 方法。// bad if (x === "abc" || x === "def" || x === "ghi" || x === "jkl") { //logic } // be...【详细内容】
2021-09-27  羲和时代    Tags:JS   点击:(58)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条