广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript设计模式之职责链模式
  • 236
分享到

JavaScript设计模式之职责链模式

2024-04-02 19:04:59 236人浏览 独家记忆
摘要

目录概述代码实现参数定义实现职责链模式实现改良概述 职责链模式是设计模式中行为型的一种设计模式; 定义:使多个对象都有机会处理请求,从而避免请求的发送者与接收者之间的耦合关系,将这些

概述

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

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

白话解释:作者坐标武汉,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设计模式之职责链模式的详细内容,更多关于JavaScript设计模式的资料请关注编程网其它相关文章!

--结束END--

本文标题: JavaScript设计模式之职责链模式

本文链接: https://www.lsjlt.com/news/124560.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript设计模式之职责链模式
    目录概述代码实现参数定义实现职责链模式实现改良概述 职责链模式是设计模式中行为型的一种设计模式; 定义:使多个对象都有机会处理请求,从而避免请求的发送者与接收者之间的耦合关系,将这些...
    99+
    2022-11-12
  • JavaScript设计模式之职责链模式详解
    目录职责链模式1. 现实中的职责链模式2. 实际开发中的职责链模式3. 用职责链模式重构代码4. 灵活可拆分的职责链节点5. 异步的职责链6. 职责链模式的优缺点7. 用 AOP 实...
    99+
    2022-11-13
    JavaScript 设计模式 JavaScript 职责链模式
  • Java设计模式之职责链模式详解
    目录前言一、职责链模式的定义与特点二、职责链模式的结构三、职责链模式案例前言 本文简单介绍了设计模式的一种——职责链模式  一、职责链模式的定义与特点 定义: 为了避免请求发送者与多...
    99+
    2022-11-12
  • JavaScript设计模式之职责链模式的示例分析
    小编给大家分享一下JavaScript设计模式之职责链模式的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!java基本数据类型有哪些Java的基本数据类型...
    99+
    2023-06-14
  • 深入了解Java设计模式之职责链模式
    目录定义解决的问题核心要点类图代码实现抽象父类执行者-三个客户端拓展应用场景定义 使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系,将这个对象连成一条链,并沿着...
    99+
    2022-11-13
  • 深入理解Java设计模式之职责链模式
    目录一、什么是职责链模式二、职责链模式的结构四、职责链模式的使用场景五、职责链模式的实现一、什么是职责链模式二、职责链模式的结构四、职责链模式的使用场景五、职责链模式的实现六、总结六...
    99+
    2022-11-12
  • .Net行为型设计模式之职责链模式(ChainofResponsibility)
    目录一、动机(Motivate)二、意图(Intent)三、结构图(Structure)四、模式的组成五、职责链模式的代码实现六、职责链模式的实现要点:1、职责链模式的主要优点有:2...
    99+
    2022-11-13
  • Java设计模式之责任链模式
    本文通过图书馆管理系统中,用户名校验、密码校验、需要增加问题,每次都要增加if判断语句,将其改用责任链模式进行链式调用,为了让代码更加的优雅,我们使用之前学过的建造者模式就代码进行改...
    99+
    2022-11-13
  • 如何理解Java设计模式的职责链模式
    本篇内容介绍了“如何理解Java设计模式的职责链模式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!一、什么是职责链模式客户端发出一个请求,链...
    99+
    2023-06-25
  • PHP如何实现职责链设计模式
    这篇文章主要介绍“PHP如何实现职责链设计模式”,在日常操作中,相信很多人在PHP如何实现职责链设计模式问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”PHP如何实现职责链设计模式”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-05
  • Java设计模式之责任链模式详解
    一、前言 各个部门协同合作完成一个任务,每个部门都有各自的职责,一个部门完成后,变回转交给下一个部门,直到所有部门都处理了,这个任务才完成。 将请求与处理解耦。 处理者只需要关注自己...
    99+
    2022-11-12
  • Java实现设计模式之责任链模式
    目录1.什么是责任链模式2.如何实现3.代码实现4.总结1.什么是责任链模式 当一个请求可能需要多个对象中的某个进行处理时,将这些对象连成一条链,并沿者这条链传递该请求,知道有一个对...
    99+
    2022-11-13
  • Java 设计模式之责任链模式及异步责任链详解
    目录一、定义二、普通责任链模式三、异步责任链模式一、定义 责任链模式(Chain of Responsibility Pattern):避免将一个请求的发送者与接受者耦合在一起,让多...
    99+
    2022-11-12
  • JavaScript设计模式之责任链模式的的示例分析
    这篇文章主要介绍了JavaScript设计模式之责任链模式的的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。本文实例讲述了JavaS...
    99+
    2022-10-19
  • Java设计模式之java责任链模式详解
    目录概述结构总结在本讲,我们来学习一下行为型模式里面的第四个设计模式,即责任链模式。 概述 在学习责任链模式之前,我们先来看一下下面这段描述。 在现实生活中,常常会出现这样的事例:一...
    99+
    2022-11-12
  • 每天一个设计模式之责任链模式
    作者按:《每天一个设计模式》旨在初步领会设计模式的精髓,目前采用javascript和python两种语言实现。诚然,每种设计模式都有多种实现方式,但此小册只记录最直截了当的实现方式 :) 0. 项目地址 责任链模式·代码 《每天一个设...
    99+
    2023-01-31
    模式 责任
  • 详解Java实现设计模式之责任链模式
    目录一、模拟业务需求二、小步小跑的迭代开发三、系统对数据的校验要求四、新建一个抽象类五、子类的实现六、构建责任链和调用七、可维护性八、总结8.1、责任链模式8.2、责任链模式适用的场...
    99+
    2022-11-12
  • java设计模式(实战)-责任链模式
    目录一:模式说明二:项目实战三:源代码一:模式说明 模式定义:使多个对象都有机会处理请求,从而避免了请求的发送者和接受者之间的耦合关系。将这些对象连成一条链,并沿着这条链传递该请求,...
    99+
    2022-11-12
  • javascript职责链模式的代码怎么写
    这篇“javascript职责链模式的代码怎么写”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“javascript职责链模式...
    99+
    2023-06-27
  • C#设计模式实现之生成器模式和责任链模式
    目录生成器设计类图: 实现代码:优点:用途与缺点:责任链设计类图:实现代码:优点:用途和缺点:总结生成器 生成器模式:封装一个产品的构造过程,并允许按步骤构造。 现又一个...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作