携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情
前言
作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。
本章通过讲解职责链模式，希望能够让你对设计模式更一步的学习。
本章学习内容👇
- 开发一个实际的
职责链模式
实际开发中的职责链模式
假设我们是负责一个售卖商品的电商。
我们推出了一个新的商品，用户可以通过在线上预约的方式预约商品。其中对会员和非会员的用户我们有不同的处理方案。
针对会员用户：
- 普通会员我们采取商品打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
我们将以上三种条件，拆分为了三个函数。现在由于函数体不是很大可能你会觉得有点多事，但是当每个函数体增加代码或者新增条件时，原有的结构（非职责链模式）的代码就会难以维护。
尾声
在下一章中，我们将实现通过构造函数实现一个更加灵活可拆分的职责链模式
