前端
面试题
前端
面试题

一如何在前端应用中应用策略模式来优化多条件分支语句?

策略模式是一种行为设计模式，它定义了一系列算法，并将每一个算法封装起来，使它们可以互相替换，让算法的变化独立于使用算法的客户。在前端应用中，策略模式特别适用于优化那些包含大量条件分支逻辑的代码，比如根据不同的条件执行不同的处理逻辑。下面是如何在前端应用中应用策略模式来优化多条件分支语句的步骤：

1.1 示例

Vue中使用策略模式
我们以一个表单验证的例子来看看如何使用策略模式优化if else:

methods: {
  validateForm() {
    if(this.type === 'register') {
      // do register validation
    } else if(this.type === 'login') {
      // do login validation 
    } else if(this.type === 'forget') {
      // do forget validation
    }
  }
}

这些校验规则可以抽取成策略对象:

const strategies = {
  register: function() {
    // do register validation
  },

  login: function() {
   // do login validation
  },

  forget: function() {
    // do forget validation 
  }
}

然后在validateForm中使用策略对象:

methods: {
  validateForm() {
    const strategy = strategies[this.type]
    strategy() 
  }
}

这样就替换掉了冗长的if else链。

1.2 优点

  • 去除复杂的if else逻辑
// 策略对象
const strategies = {
  A() { //... }, 
  B() { //... }
}

methods: {
  // 直接使用策略对象,避免条件判断
  // 如不使用则存在大量if else判断
  doSomething() {
    strategies[this.type]()
  } 
}
  • 扩展性好,新增策略容易
  • 不同策略可以独立变化,不影响客户端
  • 遵循开闭原则（新增策略时无需修改原代码）
// 新增策略
strategies.C = () => {
  // 新策略C实现
}

// 客户端代码不需要修改,开闭原则
doSomething() {
  strategies[this.type]() 
}

1.3 策略模式的应用场景

不同的缓存策略 可以定义内存缓存、本地存储缓存、请求缓存等不同策略,根据需要动态切换。

多种排序算法 封装冒泡排序、快速排序、归并排序等算法为策略,客户端代码不变就可以切换不同的排序方式。

不同的网络请求方案 封装 Ajax 请求、Fetch API、WebSocket 等为策略对象,实现可拔插的网络请求方式。

不同的日志记录方式 文件日志、控制台日志、远程日志等可以抽象成策略来互换。

不同的加密/解密算法 对称加密、非对称加密、哈希算法等可以封装成策略对象。

不同的支付方式 微信支付、支付宝、银联等支付可以抽象成策略类。

平台适配层 抽取不同平台的适配策略,如 iOS 策略、Android 策略、Web 策略等。

国际化 封装中英文策略等,运行时动态加载所需的语言包。