hello 大家好，我是 superZidan，这篇文章想跟大家聊聊 从浅入深学习中介者模式，如果大家遇到任何问题，欢迎联系我
什么是Mediator/Middleware模式？
Mediator/Middleware模式是一种行为型设计模式，旨在通过引入一个中介者或中间件来协调多个组件之间的通信。这种模式将复杂的交互逻辑从组件中分离出来，使得每个组件只需关注自身的功能，而不需要与其他组件直接通信。中介者/中间件作为一个独立的实体，负责处理组件之间的通信和协调，从而简化了组件之间的交互逻辑。
Mediator/Middleware模式的用途
Mediator/Middleware模式在许多场景中都能发挥作用。以下是一些常见的用途：
解耦组件之间的通信
当多个组件之间存在复杂的通信关系时，直接的组件之间的交互会变得混乱而难以维护。通过引入一个中介者/中间件，组件之间的通信将变得解耦，每个组件只需通过中介者来进行通信，而无需直接依赖其他组件。集中管理交互逻辑
中介者/中间件作为一个独立的实体，负责处理组件之间的交互逻辑。这样一来，交互逻辑集中在中介者/中间件中，使得整个系统的设计和维护更加简单和清晰。实现可重用性和可扩展性
通过将通用的交互逻辑抽象到中介者/中间件中，可以使这些逻辑得到复用。当需要添加新的组件时，只需将其注册到中介者/中间件中，而无需修改现有组件的代码。
使用JavaScript实现Mediator/Middleware模式
接下来，我们将使用JavaScript来实现一个简单的Mediator/Middleware模式。我们将通过一个购物车示例来说明其用法。
步骤1：创建中介者/中间件
首先，我们创建一个名为ShoppingCartMediator的中介者/中间件，它负责管理购物车组件之间的通信和交互逻辑。
class ShoppingCartMediator {
constructor() {
this.items = [];
}
addItem(item) {
this.items.push(item);
this.updateTotal();
}
removeItem(item) {
const index = this.items.indexOf(item);
if (index !== -1) {
this.items.splice(index, 1);
this.updateTotal();
}
}
updateTotal() {
const total = this.items.reduce((sum, item) => sum + item.price, 0);
console.log(`Total: ${
total}`);
}
}
步骤2：创建购物车组件
我们创建两个购物车组件，分别是Product和CartButton。Product组件用于展示商品信息，并在点击加入购物车时通知中介者。CartButton组件用于显示购物车中的商品数量，并在点击时打开购物车。
class Product {
constructor(name, price, mediator) {
this.name = name;
this.price = price;
this.mediator = mediator;
}
addToCart() {
this.mediator.addItem(this);
}
}
class CartButton {
constructor(mediator) {
this.mediator = mediator;
this.count = 0;
}
updateCount(count) {
this.count = count;
console.log(`Cart count: ${
this.count}`);
}
click() {
// 打开购物车
}
}
步骤3：使用中介者/中间件
现在，我们将使用中介者/中间件来协调购物车组件之间的通信。我们创建一个中介者实例，并将其传递给购物车组件。
const mediator = new ShoppingCartMediator();
const product1 = new Product('Product 1', 10, mediator);
const product2 = new Product('Product 2', 20, mediator);
const cartButton = new CartButton(mediator);
product1.addToCart();
product2.addToCart();
输出：
Total: 10
Total: 30
在上述示例中，当Product组件调用addToCart方法时，它会通知中介者将该商品添加到购物车，并触发更新购物车总价的操作。
结论
Mediator/Middleware模式是一种有助于解耦组件之间通信的设计模式。它通过引入一个中介者/中间件，集中处理组件之间的交互逻辑，提高了系统的可维护性和可扩展性。使用JavaScript实现Mediator/Middleware模式可以简化组件之间的通信，并使系统的设计更加清晰。通过掌握这个模式，你可以更好地组织和管理复杂的交互逻辑，提高代码的可读性和可维护性。
本文介绍了Mediator/Middleware模式的定义、用途以及如何使用JavaScript实现它。希望这篇文章能对初学者理解和应用该模式有所帮助。要深入了解该模式，还可以进一步研究相关的实际应用和高级用法。
