JavaScript设计模式：职责链模式的原理与实战优化

作者：安全边界时间：2026-10-24 09:48:45浏览：360

本文深入解析JavaScript行为型设计模式中的职责链模式。通过电商手机预售订单场景，展示如何从复杂的if-else嵌套代码重构为清晰的职责链。文章进一步探讨如何通过返回nextSuccessor实现开放封闭原则，并补充逻辑短路知识，帮助开发者掌握解耦请求发送者与接收者的核心技巧。

概述

职责链模式属于行为型设计模式的一种。

其核心定义在于：让多个对象都有机会处理同一个请求，从而消除请求发送者与接收者之间的耦合。这些处理对象被连接成一条链，请求沿着这条链传递，直到有对象负责处理为止。

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

代码实现

假设某电商网站销售手机，经历500元定金和200元定金两轮预定后进入正式购买阶段。针对支付定金的客户有优惠政策：支付500元定金获100元优惠券，支付200元定金获50元优惠券。未支付定金的普通用户无优惠券，且在库存有限时可能无法购买。

参数定义

orderType表示订单类型：值为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元及普通订单分别封装为三个函数，并传入orderType、pay、stock三个参数。若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分支判断。

然而，修改后的代码仍违反开放/封闭原则。若后续需求变更（如新增300元定金订单），必须修改现有函数内部逻辑，这并非理想方案。

改良

约定：若函数不满足处理条件，则返回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设计模式的资料请关注本站其它相关文章！

作者最新文章

配置 Matter.js 睡眠机制以优化静止物体性能

2026-11-05 15:43:12

JavaScript console.log高级用法：用table、group和time优化调试输出

2026-11-05 08:04:56

JS变量中存储HTML代码时的特殊字符转义方法

2026-11-04 19:04:09

JS怎么安全转换带千分位或货币符号的字符串为数字

2026-11-04 11:54:14

推荐几款稳定的在线JS反混淆工具，支持Obfuscator.io解密

2026-11-04 08:16:21