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

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

---

它的使用场景如下：

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()