从前端视角看设计模式之行为型模式篇

上篇我们介绍了设计模式之结构型模式篇，接下来介绍设计模式之行为型模式篇

责任链模式

责任链模式允许将请求沿着一条链传递，直到有一个对象处理它为止。每个处理者都有机会处理该请求，或者将其传递给链中的下一个处理者，每个处理者只关心自己能处理的请求，而不关心请求的来源和链中的其他处理者

它的使用场景如下：

1）当有多个对象可以处理请求，且具体由哪个对象处理由运行时决定时

2）当需要向多个对象中的一个提交请求，而不想明确指定接收者时

3）在实际应用中，广泛应用于权限管理、审批流程等场景

责任链模式包含以下几个主要角色：

1）抽象处理者

负责定义处理请求的接口，通常包含一个指向下一个处理者的引用，若不能处理请求，则将请求传递给下一个处理者

2）具体处理者

继承自抽象处理者，实现具体的请求处理逻辑

3）客户端

向链上的处理者发出请求

通过以下这个审批系统来理解责任链模式，涉及多个审批角色，如经理、总监、CEO，每个角色都有不同的审批权限

1）定义请求类

包含请求的内容

// 定义请求类
class Request {constructor(amount, description) {this.amount = amountthis.description = description}
}

2）定义抽象处理者

声明一个方法来处理请求，并定义一个指向下一个处理者的引用

// 定义抽象处理者类
class Approver {constructor(name) {this.name = namethis.nextApprover = null // 下一位审批者}setNext(approver) {this.nextApprover = approver}// 处理请求的方法，具体逻辑由子类实现approve(request) {if (this.nextApprover) {this.nextApprover.approve(request)} else {console.log('没有审批者可以处理这个请求')}}
}

3）定义具体处理者

实现请求的处理逻辑，若无法处理则交给下一个处理者

// 定义具体处理者类：经理、总监、CEO
class Manager extends Approver {approve(request) {if (request.amount <= 1000) {console.log(`${this.name} 批准了 ${request.description}，金额: ${request.amount}`)} else if (this.nextApprover) {console.log(`${this.name} 无权批准该请求，转交给 ${this.nextApprover.name}`)this.nextApprover.approve(request)}}
}
class Director extends Approver {approve(request) {if (request.amount <= 5000) {console.log(`${this.name} 批准了 ${request.description}，金额: ${request.amount}`)} else if (this.nextApprover) {console.log(`${this.name} 无权批准该请求，转交给 ${this.nextApprover.name}`)this.nextApprover.approve(request)}}
} 
class CEO extends Approver {approve(request) {console.log(`${this.name} 批准了 ${request.description}，金额: ${request.amount}`)}
}

4）客户端

创建并发出请求

// 客户端代码
const manager = new Manager('经理')
const director = new Director('总监')
const ceo = new CEO('CEO')// 设定审批链：经理 -> 总监 -> CEO
manager.setNext(director)
director.setNext(ceo)// 发起请求
const request1 = new Request(500, '购买办公设备')
manager.approve(request1)const request2 = new Request(3000, '购买电脑')
manager.approve(request2)const request3 = new Request(10000, '购买企业级服务器')
manager.approve(request3)

执行代码，运行结果如下：

在这里插入图片描述

命令模式

命令模式将一个请求封装为一个对象，从而可以用不同的请求对客户进行参数化，对请求排队或记录请求日志，以及支持可撤销的操作

它的使用场景如下：

1）当需要对行为进行记录、撤销/重做或事务处理时

命令模式包含以下几个主要角色：

1）命令

命令接口，声明一个执行操作的方法

2）具体命令

实现命令接口，负责执行具体操作，通常包含对接收者的引用，通过调用接收者的方法来完成请求的处理

3）接收者

知道如何执行与请求相关的操作，实际执行命令的对象

4）调用者

发送命令的对象，它包含了一个命令对象并能触发命令的执行，调用者并不直接处理请求，而是通过将请求传递给命令对象来实现

5）客户端

创建具体命令对象并设置其接收者，将命令对象交给调用者执行

通过以下这个遥控器控制家电来理解命令模式，将每一个开关的操作封装成命令对象，并通过遥控器来调用这些命令

1）命令接口

定义一个命令接口，包含一个执行方法execute()

// 定义命令接口
class Command {execute() {throw new Error("execute() 必须被实现")}
}

2）具体命令

实现命令接口，具体实现每个命令的操作

// 具体命令 - 开灯命令
class LightOnCommand extends Command {constructor(light) {super()this.light = light}execute() {this.light.turnOn()}
}
// 具体命令 - 关灯命令
class LightOffCommand extends Command {constructor(light) {super()this.light = light}execute() {this.light.turnOff()}
}
// 具体命令 - 开风扇命令
class FanOnCommand extends Command {constructor(fan) {super()this.fan = fan}execute() {this.fan.turnOn()}
}
// 具体命令 - 关风扇命令
class FanOffCommand extends Command {constructor(fan) {super()this.fan = fan}execute() {this.fan.turnOff()}
}

3）接收者

具体的家电设备（灯和风扇），每个设备都有开和关的操作

// 接收者 - 灯类
class Light {turnOn() {console.log("灯已打开")}turnOff() {console.log("灯已关闭")}
}
// 接收者 - 风扇类
class Fan {turnOn() {console.log("风扇已打开")}turnOff() {console.log("风扇已关闭")}
}

4）调用者

遥控器，通过调用命令对象的execute()方法来执行命令

// 调用者 - 遥控器类
class RemoteControl {constructor() {this.command = null}setCommand(command) {this.command = command}pressButton() {this.command.execute()}
}

5）客户端

客户端创建命令对象，并设置对应的设备

// 客户端代码
const light = new Light()
const fan = new Fan()// 创建命令对象
const lightOn = new LightOnCommand(light)
const lightOff = new LightOffCommand(light)
const fanOn = new FanOnCommand(fan)
const fanOff = new FanOffCommand(fan)// 创建遥控器
const remote = new RemoteControl()// 按下按钮执行开关命令
remote.setCommand(lightOn)
remote.pressButton()  // 灯已打开remote.setCommand(fanOn)
remote.pressButton()  // 风扇已打开remote.setCommand(lightOff)
remote.pressButton()  // 灯已关闭remote.setCommand(fanOff)
remote.pressButton()  // 风扇已关闭

解释器模式

解释器模式用于给定语言的句法（语法规则）提供一个解释器，这个解释器使用该表示来解释语言中的句子

它的使用场景如下：

1）当某一特定类型的问题频繁出现，并且可以通过一种简单的语言来表达这些问题的实例时

2）应用于编程语言的解释器、数学表达式计算、规则引擎等

它的优缺点：

1）优点

适用于需要解释计算规则的场景，如小型语言解析、脚本语言等
可以通过扩展表达式类层次来增加新的语法规则，而不影响其他类

2）缺点

当文法非常复杂时，解释器模式会产生非常庞大的类层次结构，难以维护
性能较低，因为每次计算都需要遍历语法树

解释器模式包含以下几个主要角色：

1）抽象表达式

每个解释器的角色，通常是一个抽象类或接口，声明了解释方法

2）终结符表达式

实现抽象表达式接口的具体类，用于解释基本的语法规则

3）非终结符表达式

也是实现抽象表达式接口的具体类，用于处理复合的语法规则

4）上下文

包含解释过程中需要的全局信息，如环境数据

5）客户端

通过构建抽象表达式对象，并将表达式组合成语法树来使用解释器

通过以下这个数学表达式计算来理解解释器模式，通过解释器模式实现一个简单的计算器，解析并计算表达式

1）定义抽象表达式

每个表达式都要实现一个interpret方法

// 抽象表达式
class Expression {interpret(context) {throw new Error("必须实现 interpret 方法")}
}

2）实现终结符表达式

如数字和操作符

// 终结符表达式 - 数字
class NumberExpression extends Expression {constructor(value) {super()this.value = value}interpret(context) {return this.value}
}

3）实现非终结符表达式

如加法和减法的组合表达式

// 非终结符表达式 - 加法
class AddExpression extends Expression {constructor(left, right) {super()this.left = left  // 左操作数this.right = right // 右操作数}interpret(context) {return this.left.interpret(context) + this.right.interpret(context)}
}
// 非终结符表达式 - 减法
class SubtractExpression extends Expression {constructor(left, right) {super()this.left = leftthis.right = right}interpret(context) {return this.left.interpret(context) - this.right.interpret(context)}
}

4）客户端

构建表达式并调用解释器来计算结果

// 客户端代码
function evaluateExpression() {// 构建表达式树const expression = new AddExpression(new NumberExpression(5),new SubtractExpression(new NumberExpression(10), new NumberExpression(3)))// 执行计算const result = expression.interpret()console.log(`计算结果: ${result}`)  // 5 + (10 - 3) = 12
}// 执行计算
evaluateExpression()

迭代器模式

迭代器模式提供一种方法顺序访问一个集合对象中的各个元素，而又不暴露该集合对象的内部表示

它的使用场景如下：

1）需要顺序访问集合中的元素：例如，遍历列表、队列、栈等容器中的元素

2）不想暴露集合的内部实现时

3）需要支持多种不同方式遍历集合：可以为集合对象提供多种不同的迭代器，支持不同的遍历策略

迭代器模式包括以下几个主要角色：

1）迭代器

定义了访问元素的接口，允许遍历集合中的元素

2）具体迭代器

实现迭代器接口，提供了遍历集合元素的具体方式

3）聚合接口

定义了创建迭代器的接口，通常会有一个createIterator()方法，用来返回一个迭代器对象

4）具体聚合类

实现聚合接口，返回一个具体的迭代器，通常是集合对象

通过以下这个例子来理解迭代器模式，使用迭代器模式来遍历书架上的书

1）定义迭代器接口

定义了迭代器的基本接口方法hasNext()和next()

// 迭代器接口
class Iterator {hasNext() {throw new Error('必须实现 hasNext 方法')}next() {throw new Error('必须实现 next 方法')}
}

2）定义具体迭代器

实现了Iterator接口，提供了书架上书籍的遍历功能

hasNext()方法检查是否还有书籍，next() 方法返回当前书籍并将索引移到下一本书

// 具体迭代器
class BookIterator extends Iterator {constructor(bookShelf) {super()this.bookShelf = bookShelfthis.index = 0 // 从第一个元素开始}hasNext() {return this.index < this.bookShelf.books.length}next() {if (this.hasNext()) {return this.bookShelf.books[this.index++]} else {return null}}
}

3）定义聚合接口

定义了聚合接口，声明了创建迭代器的方法

// 聚合接口
class Aggregate {createIterator() {throw new Error('必须实现 createIterator 方法')}
}

4）定义具体聚合类

具体的聚合类，实现了Aggregate接口，提供了书籍的存储和管理，并实现了createIterator()来返回一个具体的迭代器对象

// 具体聚合类 - 书架
class BookShelf extends Aggregate {constructor() {super()this.books = [] // 用于存储书籍}addBook(book) {this.books.push(book)}createIterator() {return new BookIterator(this)}
}

5）客户端

创建了一个BookShelf实例，添加了一些书籍，使用BookIterator来遍历这些书籍

// 客户端代码
function clientCode() {// 创建一个书架实例并添加一些书籍const bookShelf = new BookShelf()bookShelf.addBook("《设计模式》")bookShelf.addBook("《JavaScript红宝书》")bookShelf.addBook("《前端开发实践》")// 创建迭代器并遍历书架上的书籍const iterator = bookShelf.createIterator()while (iterator.hasNext()) {console.log(iterator.next()) // 输出书籍名称}
}// 执行客户端代码
clientCode()

中介者模式

中介者模式通过定义一个中介者对象来封装一组对象之间的交互，这些对象之间不需要直接通信，而是通过中介者来协调它们的行为

它的使用场景如下：

1）多个对象之间需要协作：当系统中多个对象之间的交互比较复杂时

2）实现系统的解耦：特别适用于对象之间依赖关系较复杂的系统

中介者模式包含以下几个主要角色：

1）中介者

定义了一个接口，所有的通信都通过中介者进行，管理和协调各个同事对象之间的通信

2）具体中介者

实现了中介者接口，具体实现如何协调各个同事对象之间的交互

3）同事类

每个同事对象都知道中介者，并通过中介者来进行交互

4）具体同事类

继承同事类，定义了具体的行为，且通过中介者与其他同事类进行通信

通过以下这个聊天室系统来理解中介者模式，多个用户之间进行通信，使用中介者模式来管理用户之间的消息传递

1）定义中介者接口

定义了中介者接口，所有的通信都通过sendMessage()方法来完成

// 中介者接口
class Mediator {sendMessage(message, colleague) {throw new Error('sendMessage 方法必须实现')}
}

2）定义具体中介者

实现了Mediator接口，维护了一个用户列表，并负责转发消息给所有其他用户

// 具体中介者
class ChatRoomMediator extends Mediator {constructor() {super()this.users = []}addUser(user) {this.users.push(user)}sendMessage(message, colleague) {this.users.forEach(user => {// 除了发送消息的用户，其他用户都能接收到消息if (user !== colleague) {user.receiveMessage(message)}})}
}

3）定义同事类

每个用户对象通过中介者进行通信，它知道如何发送和接收消息，但不与其他用户直接交互

// 同事类
class User {constructor(name, mediator) {this.name = namethis.mediator = mediator}sendMessage(message) {this.mediator.sendMessage(message, this)}receiveMessage(message) {console.log(`${this.name} 收到消息: ${message}`)}
}

4）客户端代码

创建一个ChatRoomMediator，并在其中添加多个用户。每个用户发送消息时，通过中介者转发给其他用户

// 客户端代码
function clientCode() {// 创建一个聊天室中介者const chatRoomMediator = new ChatRoomMediator()// 创建一些用户const user1 = new User('Alice', chatRoomMediator)const user2 = new User('Bob', chatRoomMediator)const user3 = new User('Charlie', chatRoomMediator)// 将用户添加到聊天室中介者中chatRoomMediator.addUser(user1)chatRoomMediator.addUser(user2)chatRoomMediator.addUser(user3)// 用户之间发送消息user1.sendMessage('Hello, everyone!')user2.sendMessage('Hi, Alice!')user3.sendMessage('Good morning, all!')
}// 执行客户端代码
clientCode()

执行代码，运行结果如下：

在这里插入图片描述

备忘录模式

备忘录模式允许在不改变对象的内部结构的情况下，保存和恢复对象的状态

它的使用场景如下：

1）需要保存对象的某个状态：在特定情况下，系统中某些对象的状态可能需要保存，以便之后恢复，比如撤销操作

2）需要历史记录管理：当系统需要多次保存状态，并且支持恢复到某个历史状态时

备忘录模式包含以下几个主要角色：

1）发起人

负责创建备忘录对象，并通过备忘录对象存储自己的内部状态

2）备忘录

负责存储发起人的内部状态，该对象只能被发起人访问，防止外部类修改状态

3）管理者

负责管理备忘录对象，管理者不能修改备忘录的内容，只能将备忘录存储或恢复

通过以下这个文本管理器来理解备忘录模式，用户在编辑过程中可能需要撤销和恢复文本的内容，使用备忘录模式来保存文本的状态

1）定义发起人

保存文本内容并创建备忘录

// 发起人
class TextEditor {constructor() {this.text = ""}// 设置文本内容setText(text) {this.text = text}// 获取当前文本内容getText() {return this.text}// 创建一个备忘录对象，保存当前文本内容createMemento() {return new Memento(this.text)}// 恢复文本内容，从备忘录中读取restoreFromMemento(memento) {this.text = memento.getSavedText()}
}

2）定义备忘录

保存文本内容

// 备忘录类
class Memento {constructor(text) {this.text = text}// 获取保存的文本getSavedText() {return this.text}
}

3）定义管理者

负责保存和恢复备忘录

// 管理者类
class Caretaker {constructor() {this.mementos = []}// 保存备忘录saveMemento(memento) {this.mementos.push(memento)}// 恢复备忘录restoreMemento() {return this.mementos.pop()}
}

4）客户端

// 客户端代码
function clientCode() {const textEditor = new TextEditor()const caretaker = new Caretaker()// 用户输入文本textEditor.setText("Hello")console.log("当前文本：", textEditor.getText())// 保存当前文本状态caretaker.saveMemento(textEditor.createMemento())// 用户继续编辑textEditor.setText("Hello, World!")console.log("当前文本：", textEditor.getText())// 保存新的文本状态caretaker.saveMemento(textEditor.createMemento())// 用户继续编辑textEditor.setText("Hello, World! How are you?")console.log("当前文本：", textEditor.getText())// 恢复到之前的状态textEditor.restoreFromMemento(caretaker.restoreMemento())console.log("恢复到之前的状态：", textEditor.getText())// 再次恢复到更早的状态textEditor.restoreFromMemento(caretaker.restoreMemento())console.log("恢复到更早的状态：", textEditor.getText())
}// 执行客户端代码
clientCode()

执行代码，运行结果如下：

在这里插入图片描述

观察者模式

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，这个主题对象一旦发生变化，所有依赖于它的观察者都会自动收到通知并更新

它的使用场景如下：

1）事件驱动：当一个对象的状态变化需要通知多个对象时

2）实时系统：例如新闻订阅系统、天气预报系统等，需要将变化实时通知到所有相关的观察者

观察者模式包含以下几个主要角色：

1）主题

具有状态的对象，维护着一个观察者列表，并提供了添加、删除和通知观察者的方法

2）观察者

接收主题通知的对象，需要实现一个更新方法，当收到主题的通知时，调用该方法进行更新操作

3）具体主题

主题的具体实现类，维护着观察者列表，并在状态发生改变时通知观察者

4）具体观察者

观察者的具体实现类，实现了更新方法，定义了在收到主题通知时需要执行的具体操作

通过以下这个简单的天气预报系统来理解观察者模式，天气信息变化时，会通知所有注册的订阅者（观察者）来更新显示的信息

1）定义观察者接口

// 观察者接口
class Observer {update(weatherData) {throw new Error("update方法需要在子类中实现")}
}

2）定义主题类

负责管理观察者并通知它们

// 主题类
class WeatherStation {constructor() {this.observers = []  // 用来存储所有注册的观察者this.weatherData = null  // 存储天气数据}// 注册观察者addObserver(observer) {this.observers.push(observer)}// 注销观察者removeObserver(observer) {const index = this.observers.indexOf(observer)if (index !== -1) {this.observers.splice(index, 1)}}// 通知所有观察者notifyObservers() {for (let observer of this.observers) {observer.update(this.weatherData)}}// 更新天气数据，并通知观察者setWeatherData(data) {this.weatherData = datathis.notifyObservers()}
}

3）定义具体观察类

定义WeatherApp、WeatherWebsite两个具体的观察类，显示天气数据

// 具体的观察者类
class WeatherApp extends Observer {update(weatherData) {console.log(`WeatherApp: 当前天气是：${weatherData}`)}
}
class WeatherWebsite extends Observer {update(weatherData) {console.log(`WeatherWebsite: 当前天气是：${weatherData}`)}
}

4）客户端

// 客户端代码
function clientCode() {const weatherStation = new WeatherStation()// 创建观察者const app = new WeatherApp()const website = new WeatherWebsite()// 注册观察者weatherStation.addObserver(app)weatherStation.addObserver(website)// 发布新的天气数据console.log("设置天气为：晴天")weatherStation.setWeatherData("晴天")console.log("\n设置天气为: 雨天")weatherStation.setWeatherData("雨天")// 注销观察者weatherStation.removeObserver(website)console.log("\n设置天气为: 多云")weatherStation.setWeatherData("多云")
}
// 执行客户端代码
clientCode()

执行代码，运行结果如下：

在这里插入图片描述

状态模式

状态模式允许对象在内部状态改变时改变其行为，对象的行为取决于其当前的状态，该模式的关键是将对象的状态封装成独立的类，并让对象在内部根据状态来决定具体的行为， 可以避免使用大量的条件语句来实现状态切换

它的使用场景如下：

1）状态变化频繁：当一个对象的状态变化比较频繁时

2）状态依赖：当对象的行为取决于其状态时，状态模式可以避免使用大量的条件语句

3）行为变化：如果系统中一个对象的行为随着其状态变化而变化，可以使用状态模式让每个状态行为封装在不同的类中

状态模式包含以下几个主要角色：

1）上下文

负责维护当前的状态，并将客户端请求委托给当前状态对象

2）状态

定义了一个接口，用于封装与上下文相关的一个状态的行为

3）具体状态

实现状态接口的具体状态类，每个状态类封装了与该状态相关的行为

通过以下这个电梯控制系统来理解状态模式

1）定义状态接口

定义电梯的状态行为

// 抽象状态
class ElevatorState {handle() {throw new Error('handle方法必须在具体状态类中实现')}
}

2）定义具体状态类

电梯有正在运行、停止、故障三个状态

// 电梯正在运行状态
class RunningState extends ElevatorState {handle() {console.log('电梯正在运行...')}}
// 电梯停止状态
class StoppedState extends ElevatorState {handle() {console.log('电梯已停止...')}
}
// 电梯故障状态
class BrokenState extends ElevatorState {handle() {console.log('电梯出现故障，请维修...')}
}

3）定义电梯

负责维护当前状态

// 电梯类
class Elevator {constructor() {this.state = null}// 设置电梯状态setState(state) {this.state = state}// 请求电梯执行对应的状态行为request() {this.state.handle()}
}

4）客户端

function clientCode() {const elevator = new Elevator()// 电梯处于运行状态elevator.setState(new RunningState())elevator.request()  // 电梯正在运行...// 电梯停止elevator.setState(new StoppedState())elevator.request()  // 电梯已停止...// 电梯故障elevator.setState(new BrokenState())elevator.request()  // 电梯出现故障，请维修...
}// 执行客户端代码
clientCode()

空对象模式

空对象模式用一个空对象替代 null 或空值对象，从而避免了在代码中出现null值的判断

它的使用场景如下：

1）避免空值判断：需要多次对对象进行null检查时

2）提供默认行为：如果对象不存在，可以使用空对象来提供默认行为，避免出现 null 的异常情况

空对象模式包含以下几个主要角色：

1）抽象对象

定义了对象的接口，空对象和正常对象都继承该接口

2）具体对象

继承了抽象对象接口，并实现了其具体的行为

3）空对象

实现了抽象对象接口，但所有方法都不会做任何事情，或者是做一些空的实现

通过以下这个购物车系统来理解空对象模式，Item对象表示购物车中的商品，如果某个商品不存在，传统的做法是检查该商品是否为null，而使用空对象模式时，我们可以用一个空的Item类来代替null，避免空检查

1）定义 Item 接口

表示购物车的商品

// 抽象类
class Item {getPrice() {throw new Error('getPrice方法必须在子类中实现')}
}

2）定义具体商品类

表示购物车中的实际商品

// 具体商品类
class RealItem extends Item {constructor(name, price) {super()this.name = namethis.price = price}getPrice() {return this.price}getName() {return this.name}
}

3）定义空商品类

表示购物车中没有商品时的空对象

// 空商品类
class NullItem extends Item {getPrice() {return 0  // 空商品的价格为0}getName() {return '无商品'  // 空商品返回“无商品”}
}

4）定义购物车类

管理购物车中的商品

// 购物车类
class ShoppingCart {constructor() {this.items = []}// 添加商品到购物车addItem(item) {this.items.push(item)}// 获取购物车所有商品的总价格getTotalPrice() {return this.items.reduce((total, item) => total + item.getPrice(), 0)}// 获取购物车中所有商品的名称getItemsName() {return this.items.map(item => item.getName()).join(', ')}
}

5）客户端

function clientCode() {const cart = new ShoppingCart()// 创建一个真实的商品const item1 = new RealItem('苹果', 5)cart.addItem(item1)// 创建一个空商品，表示购物车中没有其他商品const item2 = new NullItem()cart.addItem(item2)console.log(`购物车商品: ${cart.getItemsName()}`)  // 购物车商品: 苹果, 无商品console.log(`购物车总价: ${cart.getTotalPrice()}元`)  // 购物车总价: 5元
}// 执行客户端代码
clientCode()

策略模式

策略模式定义了一系列算法或策略，并将每个算法封装在独立的类中，可以在运行时根据需要选择不同的算法，而不需要修改客户端代码

它的使用场景如下：

1）当一个系统中有许多类，它们之间的区别仅在于它们的行为时

策略模式包含以下几个主要角色：

1）环境类

持有一个策略对象，并可以在运行时改变所使用的策略

2）策略接口

声明一个公共接口，不同的策略类都实现这个接口

3）具体策略类

实现策略接口，定义具体的算法

通过以下这个购物折扣策略来理解策略模式，电商平台需要根据不同的策略计算订单的折扣，不同的折扣策略包括：满减折扣、打折折扣和无折扣

1）定义策略接口

声明折扣计算的方法

// 策略接口
class DiscountStrategy {calculate(price) {throw new Error('calculate方法必须在具体策略类中实现')}
}

2）定义具体的折扣策略

// 满减折扣策略
class FullReductionDiscount extends DiscountStrategy {calculate(price) {if (price > 100) {return price - 20  // 满100减20}return price}
}
// 打折折扣策略
class PercentageDiscount extends DiscountStrategy {constructor(discount) {super()this.discount = discount  // 折扣比例}calculate(price) {return price * (1 - this.discount)  // 按照折扣比例计算折扣后价格}
}
// 无折扣策略
class NoDiscount extends DiscountStrategy {calculate(price) {return price  // 无折扣，价格不变}
}

3）定义上下文类

定义购物车类，持有折扣策略

// 购物车类
class ShoppingCart {constructor() {this.items = []this.discountStrategy = new NoDiscount()  // 默认无折扣策略}// 添加商品到购物车addItem(item) {this.items.push(item)}// 设置折扣策略setDiscountStrategy(strategy) {this.discountStrategy = strategy}// 计算总价格calculateTotalPrice() {let total = this.items.reduce((sum, item) => sum + item.price, 0)return this.discountStrategy.calculate(total)  // 使用策略计算折扣后的总价}
}

4）客户端

function clientCode() {const cart = new ShoppingCart()// 添加商品到购物车cart.addItem({ name: '商品1', price: 50 })cart.addItem({ name: '商品2', price: 80 })// 设置满减折扣策略cart.setDiscountStrategy(new FullReductionDiscount())console.log(`总价（满减策略）: ${cart.calculateTotalPrice()}元`)  // 满100减20// 设置打折折扣策略cart.setDiscountStrategy(new PercentageDiscount(0.1))  // 10%折扣console.log(`总价（打折策略）: ${cart.calculateTotalPrice()}元`)  // 10%折扣// 设置无折扣策略cart.setDiscountStrategy(new NoDiscount());console.log(`总价（无折扣策略）: ${cart.calculateTotalPrice()}元`)  // 无折扣}// 执行客户端代码
clientCode()

模板模式

模板模式定义了一个算法的框架，将一些步骤延迟到子类中。通过模板方法，子类可以重定义算法的某些特定步骤而无需改变算法的结构

模板模式通常用于一些固定的算法步骤，其中某些步骤是可以被子类实现的，而有些步骤是固定不变的

它的使用场景如下：

1）当一个算法的整体结构是固定的，但某些步骤的实现可能会有所不同

2）当有多个子类共享相同的算法框架时，可以通过模板方法将共同的部分抽取到父类中

模板模式包含以下几个主要角色：

1）抽象类

定义了一个模板方法，它包含了一些固定的算法步骤，并且将某些步骤定义为抽象方法，交由子类实现

2）具体类

实现了抽象类中定义的抽象方法，从而完成具体的算法步骤

通过以下制作咖啡和茶来理解模板模式，制作这两种饮品的流程类似，但其中某些步骤不同

1）定义抽象类

定义制作饮品的模板方法，模板方法定义了制作饮品的步骤

// 抽象类
class Drink {// 模板方法make() {this.boilWater()this.brew()this.pourInCup()this.addCondiments()}// 固定的步骤boilWater() {console.log("烧开水")}pourInCup() {console.log("倒入杯中")}// 可变的步骤，由子类实现brew() {throw new Error("抽象方法brew()必须在子类中实现")}addCondiments() {throw new Error("抽象方法addCondiments()必须在子类中实现")}
}

2）定义具体类（咖啡和茶）

// 具体类：制作咖啡
class Coffee extends Drink {brew() {console.log("冲泡咖啡")}addCondiments() {console.log("加入糖和牛奶")}
}
// 具体类：制作茶
class Tea extends Drink {brew() {console.log("泡茶")}addCondiments() {console.log("加入柠檬")}
}

3）客户端

function clientCode() {const coffee = new Coffee()console.log("制作咖啡：")coffee.make()  // 按照模板步骤制作咖啡console.log("\n制作茶：")const tea = new Tea()tea.make()  // 按照模板步骤制作茶
}
clientCode()

执行代码，运行结果如下：

在这里插入图片描述

访问者模式

访问者模式允许在元素结构内部定义一个操作，并且将该操作应用于不同类型的元素，而不需要改变元素的类本身

它的使用场景如下：

1）当需要对一个对象结构中的对象执行多种不同的且不相关的操作时，尤其是这些操作需要避免"污染"对象类本身

访问者模式包含以下几个主要角色：

1）访问者

定义访问元素的接口

2）具体访问者

实现访问者接口，提供对每个具体元素类的访问和相应操作

3）元素

定义一个接受访问者的方法

4）具体元素

实现元素接口，提供一个accept方法，允许访问者访问并操作

5）对象结构

定义了如何组装具体元素，如一个组合类

通过以下这个员工薪资处理来理解访问者模式，计算不同员工的薪资，在不改变员工类的情况下，增加不同类型的薪资计算方法

1）定义访问者接口

定义了对不同员工的操作

// 访问者接口
class IVisitor {visitManager(manager) {throw new Error("必须实现 visitManager")}visitDeveloper(developer) {throw new Error("必须实现 visitDeveloper")}visitDesigner(designer) {throw new Error("必须实现 visitDesigner")}
}

2）定义元素接口和具体元素

// 员工接口：定义接受访问者的方法
class Employee {accept(visitor) {throw new Error("必须实现 accept 方法")}}
// 经理类：具体员工类型
class Manager extends Employee {constructor(name, salary) {super()this.name = namethis.salary = salary}accept(visitor) {visitor.visitManager(this)}
}
// 程序员类：具体员工类型
class Developer extends Employee {constructor(name, salary) {super()this.name = namethis.salary = salary}accept(visitor) {visitor.visitDeveloper(this)}
}
// 设计师类：具体员工类型
class Designer extends Employee {constructor(name, salary) {super()this.name = namethis.salary = salary}accept(visitor) {visitor.visitDesigner(this)}
}

3）定义具体访问者

// 具体访问者：薪资计算
class SalaryVisitor extends IVisitor {visitManager(manager) {console.log(`经理 ${manager.name} 的薪水是 ${manager.salary + 1000} 元`)}visitDeveloper(developer) {console.log(`程序员 ${developer.name} 的薪水是 ${developer.salary + 500} 元`)}visitDesigner(designer) {console.log(`设计师 ${designer.name} 的薪水是 ${designer.salary + 700} 元`)}
}

4）客户端

function clientCode() {// 创建不同的员工const manager = new Manager("John", 5000)const developer = new Developer("Alice", 4000)const designer = new Designer("Bob", 3000)// 创建薪资计算访问者const salaryVisitor = new SalaryVisitor()// 员工接受访问者，进行薪资计算manager.accept(salaryVisitor)developer.accept(salaryVisitor)designer.accept(salaryVisitor)
}
clientCode()

执行代码，运行结果如下：

在这里插入图片描述