湖中剑的前端周刊专栏 - #11：前端开发宝典

2024-02-20 03:50:09

在前端开发中，我们经常会遇到需要根据不同的条件执行不同的操作的情况。例如，根据用户的权限展示不同的页面元素，或者根据不同的数据类型采用不同的渲染方式。为了解决这类问题，我们可以使用策略模式。策略模式是一种行为型设计模式，它允许我们在运行时选择不同的算法或策略来执行操作，而无需修改原有的代码结构。

策略模式的核心思想是将算法或策略封装成独立的对象，并使其可以相互替换。 这样，我们就可以根据不同的情况选择不同的策略对象来执行操作，从而实现代码的灵活性和可扩展性。

策略模式的结构

策略模式通常包含以下几个角色：

策略接口 (Strategy)： 定义了所有具体策略的公共接口。
具体策略 (ConcreteStrategy)： 实现了策略接口，并封装了具体的算法或策略。
上下文 (Context)： 维护一个对策略对象的引用，并根据需要调用策略对象的方法。

策略模式的实现

假设我们要开发一个电商平台，根据用户的会员等级计算不同的折扣。我们可以使用策略模式来实现这个功能。

首先，我们定义一个策略接口 DiscountStrategy：

interface DiscountStrategy {
  calculateDiscount(price: number): number;
}

然后，我们定义几个具体策略类来实现 DiscountStrategy 接口，例如：

// 普通会员策略
class NormalDiscountStrategy implements DiscountStrategy {
  calculateDiscount(price: number): number {
    return price * 0.9; // 9折
  }
}

// VIP会员策略
class VipDiscountStrategy implements DiscountStrategy {
  calculateDiscount(price: number): number {
    return price * 0.8; // 8折
  }
}

// SVIP会员策略
class SvipDiscountStrategy implements DiscountStrategy {
  calculateDiscount(price: number): number {
    return price * 0.7; // 7折
  }
}

接下来，我们定义一个上下文类 Order，它维护一个对 DiscountStrategy 对象的引用，并根据用户的会员等级选择不同的策略对象：

class Order {
  private discountStrategy: DiscountStrategy;

  constructor(userType: string) {
    if (userType === 'normal') {
      this.discountStrategy = new NormalDiscountStrategy();
    } else if (userType === 'vip') {
      this.discountStrategy = new VipDiscountStrategy();
    } else if (userType === 'svip') {
      this.discountStrategy = new SvipDiscountStrategy();
    } else {
      throw new Error('Invalid user type.');
    }
  }

  calculateTotalPrice(price: number): number {
    return this.discountStrategy.calculateDiscount(price);
  }
}

最后，我们可以使用 Order 类来计算不同用户的订单总价：

const normalOrder = new Order('normal');
const normalTotalPrice = normalOrder.calculateTotalPrice(100); // 90

const vipOrder = new Order('vip');
const vipTotalPrice = vipOrder.calculateTotalPrice(100); // 80

const svipOrder = new Order('svip');
const svipTotalPrice = svipOrder.calculateTotalPrice(100); // 70