JavaScript职责链模式与开发实践（中）

前言

作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。

本章通过讲解职责链模式，希望能够让你对设计模式更一步的学习。

本章学习内容👇

• 开发一个实际的职责链模式

实际开发中的职责链模式

假设我们是负责一个售卖商品的电商。

我们推出了一个新的商品，用户可以通过在线上预约的方式预约商品。其中对会员和非会员的用户我们有不同的处理方案。

针对会员用户：

• 普通会员我们采取商品打95折的方案
• 高级会员我们采取商品打91折的方案

针对普通用户：

• 普通用户需99折购买
• 当库存不足时，优先满足会员用户

我们定义几个供系统使用的字段：

• userType：表示用户的类型。值为0则表示普通用户，为1时表示会员用户。
• seniorMember:表示是否为高级会员。值为布尔值。
• stock:表示当前可以供给普通用户的库存。
• price：表示当前商品的价格。

下面我们把处理预约订单的流程写成代码：

let order = function (userType, seniorMember, stock, price) {
    if (userType === 1) {
        if (seniorMember) {
            return price * 0.91
        } else {
            return price * 0.95
        }
    } else {
        if (stock > 0) {
            return price * 0.99
        } else {
            return false
        }
    }
}
​
console.log(order(1, false, 1, 100)); 

控制台输出

95

虽然我们得到了意料之中的结果，但这并不是我们所期望的职责链模式。

接下来， 我们通过职责链模式来改写下这段代码。

• 我们将普通用户作为第一个链节点处理
• 将会员用户作为第二个链节点处理
• 将高级会员作为第三个链节点处理

​
function orderNormal(userType, seniorMember, stock, price) {
    if (userType === 0) {
        if (stock > 0) {
            return price * 0.99
        } else {
            return false
        }
    } else {
        return orderMember(seniorMember, price)
    }
}
​
function orderMember(seniorMember, price) {
    if (seniorMember) {
       return orderSeniorMember(price)
    } else {
        return price * 0.95
    }
}
​
function orderSeniorMember(price) {
    return price * 0.91
}
​
console.log(orderNormal(1, false, 1, 100));

控制台输出

95

我们将以上三种条件，拆分为了三个函数。现在由于函数体不是很大可能你会觉得有点多事，但是当每个函数体增加代码或者新增条件时，原有的结构（非职责链模式）的代码就会难以维护。

尾声

在下一章中，我们将实现通过构造函数实现一个更加灵活可拆分的职责链模式