文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript设计模式之职责链模式的示例分析

2023-06-14 19:57

关注

小编给大家分享一下JavaScript设计模式之职责链模式的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

java基本数据类型有哪些

Java的基本数据类型分为:1、整数类型,用来表示整数的数据类型。2、浮点类型,用来表示小数的数据类型。3、字符类型,字符类型的关键字是“char”。4、布尔类型,是表示逻辑值的基本数据类型。

概述

职责链模式是设计模式中行为型的一种设计模式;

定义:使多个对象都有机会处理请求,从而避免请求的发送者与接收者之间的耦合关系,将这些处理请求的对象形成一个链,并沿着这个链传递请求,直到有一个对象处理它为止;

白话解释:作者坐标武汉,1000+万人口的新一线城市 ;以早高峰公交为例,早上早高峰的时候通常都是公交车前门拥堵,以至于没办法刷卡乘车;但是后门相对来说会空一些,这时我们选择后门上车,但是我们后门上车就刷不了卡;逃单?不存在的,这可不是我们作为讲文明、有素质的新一代青年应该做的;于是,我们往前面传递公交卡,请求前面的乘客帮忙传递至刷卡器处刷卡,但是我们是在后门,刷卡器是在前门,我们这传递的过程中会通过请求多位乘客帮忙传递公交卡,这个传递的过程就是一种职责链模式,每一位传递的乘客就是职责链中的节点对象;

代码实现

假设有一个售卖手机的电商网站,经过分别缴纳500元定金和200元定价的两轮预定后(订单此时生成),现在已经到了正式购买的阶段。公司针对支付过定金的客户有一定的优惠政策。在正式购买时,已支付过500元定金的客户将获得100元商城优惠券,已支付过200元的客户将获得50元商城优惠券;而之前没有支付过定金的客户将没有任何优惠券,并且在库存有限的情况下,还不一定能买得到;

参数定义

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

pay:表示用户是否已经支付定金,值为true或false。虽然用户下过500元的定金的订单,但如果他一直没有支付定金,现在只能以普通用户的身份进行购买;

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设计模式之职责链模式的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯