当前位置：首页 > news >正文

typescript中的策略模式

news 2025/8/12 4:00:43

typescript中的策略模式

当我们需要以整洁、易于维护和易于调试的方式构建应用程序时，使用设计模式是一种非常好的方式。

在本文中，我们的目标是阐明如何将策略模式无缝地集成到我们的应用程序中。如果我们熟悉依赖性注入，可能会发现策略模式的操作原理与其有些相似，尽管它有自己独特的用例。

到本文结束时，我们应该能够掌握了策略模式背后的基本概念。

让我们通过建立一个定义来深入研究策略模式究竟是什么?

策略模式

策略模式是一种设计模式，它使我们能够在运行时切换算法或策略，而不改变使用它们的代码。从本质上讲，它涉及定义一系列算法，封装每个算法，并使它们可以互换。这带来了灵活性，通过将行为( 算法 / 策略 )与使用它的上下文( 类 )分离，实现了更整洁、解耦的代码。

一个现实的例子

想象一下我们正在旅行，需要导航到不同的地方。我们的手机就像一个使用策略模式的应用程序。导航应用程序是工具箱，不同的交通方式，如驾驶、步行或骑自行车，就是策略。根据我们的需要，可以很容易地在这些模式之间切换，而不改变导航应用程序本身。同样，这种策略模式可以让我们的代码轻松地在不同的算法或行为之间切换。

代码示例

现在，让我们用 typescript 实现一个付款系统。想象一下，我们正在建立一个在线商店，它支持微信、支付宝等不同的支付方式。使用这种策略模式，我们可以很容易地在这些支付方法之间转换。这种策略模式非常适合这种情况。

首先，定义一个表示支付策略的接口：

interface PaymentStrategy {processPayment(amount: number): void;
}

现在，实现具体的策略：

class WeiXinStrategy implements PaymentStrategy {processPayment(amount: number): void {console.log(`Paid ${amount} using WeiXin.`);}
}class ZhiFuBaoStrategy implements PaymentStrategy {processPayment(amount: number): void {console.log(`Paid ${amount} using ZhiFuBao.`);}
}class CreditCardStrategy implements PaymentStrategy {processPayment(amount: number): void {console.log(`Paid ${amount} using CreditCard.`);}
}

创建一个上下文类，在线存储，以使用这些支付策略:

class OnlineStore {private paymentStrategy: PaymentStrategy;constructor(paymentStrategy: PaymentStrategy) {this.paymentStrategy = paymentStrategy;}checkout(amount: number): void {this.paymentStrategy.processPayment(amount);}
}

最后，让我们看看使用不同方法付款的策略模式：

const weixin = new WeiXinStrategy();
const storeWithPayPal = new OnlineStore(paypal);
storeWithPayPal.checkout(100); // "Paid 100 using WeiXin."const creditCard = new CreditCardStrategy();
const storeWithCreditCard = new OnlineStore(creditCard);
storeWithCreditCard.checkout(200); // Outputs: "Paid 200 using CreditCard."const zhifubao = new ZhiFuBaoStrategy();
const storeWithBitcoin = new OnlineStore(bitcoin);
storeWithBitcoin.checkout(300); // Outputs: "Paid 300 using ZhiFuBao."

就像改变导航模式一样，在这里我们可以轻松地交换支付选项，而不需要修改在线存储类本身。

使付款系统形象化

在我们结束之前，让我们用绘图来想象支付的例子。

在下面的插图中,我们将观察右侧的 Payment 接口。这一接口发挥了至关重要的作用，要求 processPayment方法由不同的支付策略选项实施。在我们的例子中的 weixin 、zhifubao、creditcard 是实现这一接口的具体策略，因此每个都需要定义 processPayment 方法的工作原理。

在这里插入图片描述