前端 TypeScript 中巧用策略模式

2023-11-16 03:17:37

前言

策略模式是面向对象设计中的经典设计模式之一，它提供了一种在不同场景中动态切换算法或策略的机制。本文将以一个前端 TypeScript 中的模拟鸭子应用为例，阐述策略模式的原理和应用，帮助开发者理解如何在实际项目中运用策略模式提升代码可维护性和灵活性。

模拟鸭子应用

假设我们有一个模拟鸭子应用，其中出现各种鸭子，它们一边游泳戏水，一边呱呱叫。所有鸭子的区别在于外观，比如有白色、黑色、黄色等。

为了设计这个应用，我们需要一个父类来定义鸭子的共性，比如游泳和呱呱叫的行为。同时，我们还需要子类来表示不同种类的鸭子，比如白鸭、黑鸭、黄鸭等，它们的外观不同，但游泳和呱呱叫的行为是一致的。

策略模式的应用

在模拟鸭子应用中，我们可以将鸭子的叫声行为抽象成一个策略接口，该接口定义了鸭子叫声的方法。我们还可以定义多个实现该接口的具体策略类，比如白鸭叫声策略、黑鸭叫声策略、黄鸭叫声策略等。

通过将鸭子的叫声行为抽象成策略，我们可以动态地切换不同的叫声策略，从而实现不同种类的鸭子发出不同的叫声。

代码示例

// 鸭子父类
abstract class Duck {
  abstract quack(): void;
  abstract swim(): void;
}

// 白鸭子
class WhiteDuck extends Duck {
  quack(): void {
    console.log('嘎嘎嘎');
  }

  swim(): void {
    console.log('扑通扑通');
  }
}

// 黑鸭子
class BlackDuck extends Duck {
  quack(): void {
    console.log('呱呱呱');
  }

  swim(): void {
    console.log('扑通扑通');
  }
}

// 黄鸭子
class YellowDuck extends Duck {
  quack(): void {
    console.log('嘎嘎嘎');
  }

  swim(): void {
    console.log('扑通扑通');
  }
}

// 策略接口
interface QuackStrategy {
  quack(): void;
}

// 白鸭子叫声策略
class WhiteDuckQuackStrategy implements QuackStrategy {
  quack(): void {
    console.log('嘎嘎嘎');
  }
}

// 黑鸭子叫声策略
class BlackDuckQuackStrategy implements QuackStrategy {
  quack(): void {
    console.log('呱呱呱');
  }
}

// 黄鸭子叫声策略
class YellowDuckQuackStrategy implements QuackStrategy {
  quack(): void {
    console.log('嘎嘎嘎');
  }
}

// 测试代码
const whiteDuck = new WhiteDuck();
whiteDuck.quack(); // 输出：嘎嘎嘎
whiteDuck.swim(); // 输出：扑通扑通

const blackDuck = new BlackDuck();
blackDuck.quack(); // 输出：呱呱呱
blackDuck.swim(); // 输出：扑通扑通

const yellowDuck = new YellowDuck();
yellowDuck.quack(); // 输出：嘎嘎嘎
yellowDuck.swim(); // 输出：扑通扑通