JavaScript职责链模式怎样理解?一文带你看懂
Admin 2021-09-08 群英技术资讯 606 次浏览
今天给大家分享的是关于JavaScript设计模式中的职责链模式,之前我们介绍了很多JavaScript设计模式,下文对职责链模式也有实例和详细的介绍,感兴趣的朋友就继续往下看吧。
职责链模式是设计模式中行为型的一种设计模式;
定义:使多个对象都有机会处理请求,从而避免请求的发送者与接收者之间的耦合关系,将这些处理请求的对象形成一个链,并沿着这个链传递请求,直到有一个对象处理它为止;
白话解释:作者坐标武汉,1000+万人口的新一线城市 ;以早高峰公交为例,早上早高峰的时候通常都是公交车前门拥堵,以至于没办法刷卡乘车;但是后门相对来说会空一些,这时我们选择后门上车,但是我们后门上车就刷不了卡;逃单?不存在的,这可不是我们作为讲文明、有素质的新一代青年应该做的;于是,我们往前面传递公交卡,请求前面的乘客帮忙传递至刷卡器处刷卡,但是我们是在后门,刷卡器是在前门,我们这传递的过程中会通过请求多位乘客帮忙传递公交卡,这个传递的过程就是一种职责链模式,每一位传递的乘客就是职责链中的节点对象;
假设有一个售卖手机的电商网站,经过分别缴纳500元定金和200元定价的两轮预定后(订单此时生成),现在已经到了正式购买的阶段。公司针对支付过定金的客户有一定的优惠政策。在正式购买时,已支付过500元定金的客户将获得100元商城优惠券,已支付过200元的客户将获得50元商城优惠券;而之前没有支付过定金的客户将没有任何优惠券,并且在库存有限的情况下,还不一定能买得到;
1.orderType:表示订单类型(定金用户或普通用户),code的值为1的时候是500元定金用户,为2的时候是200元定金用户,为3的时候是普通用户;
2.pay:表示用户是否已经支付定金,值为true或false。虽然用户下过500元的定金的订单,但如果他一直没有支付定金,现在只能以普通用户的身份进行购买;
3.stock:表示普通用户用于购买手机的库存数量,已经支付过500元定金或者200元定金的客户不受此限制;
var order = function( orderType, pay, stock ){ if ( orderType === 1 ){ // 500 元定金购买模式 if ( pay === true ){ // 已支付定金 console.log( '500 元定金预购, 得到100 优惠券' ); }else{ // 未支付定金,降级到普通购买模式 if ( stock > 0 ){ // 用于普通购买的手机还有库存 console.log( '普通购买, 无优惠券' ); }else{ console.log( '手机库存不足' ); } } } else if ( orderType === 2 ){ // 200 元定金购买模式 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( '手机库存不足' ); } } }; order( 1 , true, 500); // 500 元定金预购, 得到100 优惠券
上面的代码当然能实现需求功能,但是上述代码明显结构不清晰且order函数方法庞大,耦合程度很高;
我们使用职责链模式来实现上述功能,我们先把500元定金订单、200元定金订单、普通订单分为3个函数,接下来把orderType、pay、stock这3个参数传入;如果500元订单函数不符合处理条件,就将这个请求传递给200元订单函数,如果200元订单函数也不符合处理条件,则就将这个请求传递给普通订单函数;
var order500 = function( orderType, pay, stock ){ if ( orderType === 1 && pay === true ){ console.log( '500 元定金预购, 得到100 优惠券' ); }else{ order200( orderType, pay, stock ); // 将请求传递给200 元订单 } }; // 200 元订单 var order200 = function( orderType, pay, stock ){ if ( orderType === 2 && pay === true ){ console.log( '200 元定金预购, 得到50 优惠券' ); }else{ orderNormal( orderType, pay, stock ); // 将请求传递给普通订单 } }; // 普通购买订单 var orderNormal = function( orderType, pay, stock ){ if ( stock > 0 ){ console.log( '普通购买, 无优惠券' ); }else{ console.log( '手机库存不足' ); } }; // 测试结果: order500( 1 , true, 500); // 500 元定金预购, 得到100 优惠券 order500( 1, false, 500 ); // 普通购买, 无优惠券 order500( 2, true, 500 ); // 200 元定金预购, 得到500 优惠券 order500( 3, false, 500 ); // 普通购买, 无优惠券 order500( 3, false, 0 ); // 手机库存不足
可以看到经过修改之后的代码,结构比之前的要清晰很多,拆分了函数并且去掉了很多if-else分支判断;
即使如果,修改后的代码依然是违反开放/封闭原则的,因为如果我们后面需求变更,就必须修改这些函数的内部;这显然不是我们想要的;
我们先约定该函数不符合处理条件就返回nextSuccessor,如果符合处理条件就执行;
var order500 = function( orderType, pay, stock ){ if ( orderType === 1 && pay === true ){ console.log( '500 元定金预购,得到100 优惠券' ); }else{ return 'nextSuccessor'; // 我不知道下一个节点是谁,反正把请求往后面传递 } }; var order200 = function( orderType, pay, stock ){ if ( orderType === 2 && pay === true ){ console.log( '200 元定金预购,得到50 优惠券' ); }else{ return 'nextSuccessor'; // 我不知道下一个节点是谁,反正把请求往后面传递 } }; var orderNormal = function( orderType, pay, stock ){ if ( stock > 0 ){ console.log( '普通购买,无优惠券' ); }else{ console.log( '手机库存不足' ); } }; var Chain = function( fn ){ this.fn = fn; this.successor = null; }; //传递请求给下一个节点 Chain.prototype.setNextSuccessor = function( successor ){ return this.successor = successor; }; //传递请求给某个节点 Chain.prototype.passRequest = function(){ //接收实例后的方法并将参数作为数组形式保存 var ret = this.fn.apply( this, arguments ); console.log(ret); //ret等于nextSuccessor就是不符合处理条件还得往下执行 if ( ret === 'nextSuccessor' ){ //这里是逻辑短路返回,并集一假则假;如果this.successor存在,则返回后面的执行结果;
//如果this.successor不存在,则返回this.nextSuccessor的值即为undefined return this.successor && this.successor.passRequest.apply( this.successor, arguments ); } }; var chainOrder500 = new Chain( order500 ); var chainOrder200 = new Chain( order200 ); var chainOrderNormal = new Chain( orderNormal ); //沿职责链节点传递 chainOrder500.setNextSuccessor( chainOrder200 ); chainOrder200.setNextSuccessor( chainOrderNormal ); chainOrder500.passRequest( 1, true, 500 ); // 500 元定金预购,得到100 优惠券 chainOrder500.passRequest( 2, true, 500 ); // 200 元定金预购,得到50 优惠券 chainOrder500.passRequest( 3, true, 500 ); // 普通购买,无优惠券 chainOrder500.passRequest( 1, false, 0 ); // 手机库存不足
通过改良后,即使后面需求变更要出现定金300的订单,我们也可以轻松应对;
var order300=function(){ //具体实现的行为 }; chainOrder300=newChain(order300); chainOrder500.setNextSuccessor(chainOrder300); chainOrder300.setNextSuccessor(chainOrder200);
tips:
补充知识:逻辑短路;虽然这是JS基础的知识,但是难免会有遗忘,我在写这篇文章的时候就忘了;
并集一假得假:如果是并集(并且)关系则第一个数是假的或不存在的,直接返回第二个数的值;
var x = a && b && c 等价于 var x = a; if(a){ x = b; if(b){ x = c; } }
或集一真得真:如果是或集(或者)关系,则第一个数是真的直接返回第一个数,第一个数是假的直接返回第二个;
var x = a || b || c 等价于: var x; if(a){ x = a; } else if(b){ x = b; } else { x = c; }
记住上面加粗的两句话,基本就可以熟练运用逻辑短路了;
关于JavaScript设计模式之职责链模式就介绍到这,上述实例具有一定的借鉴价值,感兴趣的朋友可以参考学习,希望能对大家有帮助,想要了解更多avaScript设计模式,大家可以关注群英网络其它相关文章。
文本转载自脚本之家
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本文详细讲解了Node.js进程管理之Process模块,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
轮播图是现在很多网站平台都会应用的一种展现方式,通过定时或者鼠标点击就能够切换看到多张图片,很多商都会将轮播图作为产品展示,这样的效果是用户就能更容易获取商品信息。那么轮播图是如何实现的呢?下面就以基于JavaScript实现的简单轮播图为例,为大家简单介绍下。
这篇文章主要给大家分享JSONP原理及使用的内容,很多新手对于JSON可能不是很了解,对此下面小编就给大家来详细的介绍一下,具希望大家阅读完这篇文章能有所收获,下面我们一起来学习一下吧。
JavaScript中如何实现清除session?在实际的项目中,清除session的需求是常见的,这篇就给大家来分享一下如何实现当前页面并清除session,实现代码如下,感兴趣的朋友可以参考,接下来就跟随小编一起了解看看吧。
什么是 React 高阶组件?聊聊怎么使用React高阶组件创建一个面包屑导航,希望对大家有所帮助!
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008