策略模式在前端开发的应用：让代码更加优雅

原创首发于微信公众号：mp.weixin.qq.com/s/bMBKHPSqb…

今天我们要聊聊一个让你的前端代码变得更加优雅的设计模式——策略模式。如果你还没有关注我们的公众号，那就赶快点击上面的 "关注" 卡片，让我们一起在编程的世界里嗨翻天！

一、策略模式概述

策略模式，听起来就像是我们正在打一场战役，要用不同的策略来击败敌人。其实在编程世界里，我们也是在与各种问题“战斗”，而策略模式就是我们的一种“武器”。它可以帮助我们将一些操作抽象出来，形成一组独立的策略，然后在运行时动态地选择一种策略来执行操作。

但这并不是说，我们需要为每一个问题都创建一种策略。相反，策略模式强调的是在不同的环境和需求下，选择最适合的策略。就像在战斗中，我们不会盲目地选择武器，而是根据敌人的特性和当前的环境，选择最合适的战略。这就是策略模式的魅力所在。

二、前端开发中的策略模式

那么，在前端开发中，我们如何使用策略模式呢？有很多问题都可以通过策略模式来解决，比如优化 if/else 代码块、处理不同的浏览器兼容性问题，或者进行表单验证等。

其实，你可能已经在使用策略模式，但并没有意识到。比如，你可能曾经创建过一组函数，这些函数都接受相同的参数，但执行不同的操作。然后在运行时，你根据某些条件来选择并执行其中的一个函数。这其实就是策略模式的一种形式。在前端开发中，我们常常需要处理各种不确定性，比如用户的输入、浏览器的类型和版本、甚至是网络的状态。策略模式让我们可以更优雅地处理这些不确定性，使得我们的代码更易于理解和维护。

三、策略模式的前端应用示例

下面的示例都是我精心挑选出的，希望它们能让你对策略模式有更深刻的理解。

使用策略模式优化 if/else 代码块

让我们设想一个场景：你正在为网站创建一个主题切换功能，它根据用户选择的主题设置不同的样式。如果使用传统的 if/else 语句来实现，可能会是这样的：

function setTheme(theme: string) {
  if (theme === 'dark') {
    // 设置暗色主题
  } else if (theme === 'light') {
    // 设置亮色主题
  } else if (theme === 'colorful') {
    // 设置彩色主题
  } else {
    // 默认主题
  }
}

这看起来可能还不错，但是如果我们有很多主题选项，这个函数将会变得异常庞大且难以维护。而且，每次增加新的主题，我们都需要修改这个函数。这就是策略模式大显身手的时候了。让我们看看如何使用策略模式来优化它：

interface IThemeStrategy {
  set: () => void;
}

const themeStrategies: Record<string, IThemeStrategy> = {
  dark: {
    set: () => {
      // 设置暗色主题
    },
  },
  light: {
    set: () => {
      // 设置亮色主题
    },
  },
  colorful: {
    set: () => {
      // 设置彩色主题
    },
  },
};

function setTheme(theme: keyof typeof themeStrategies) {
  const strategy = themeStrategies[theme] || themeStrategies.dark; // 默认主题为暗色
  strategy.set();
}

这样就优雅多了吧。我们定义了一组主题策略，并在 setTheme 函数中动态地选择策略。而且，添加新的主题只需要在策略对象中添加新的策略，无需修改 setTheme 函数。

用策略模式处理不同的浏览器兼容性问题

假设我们要实现一个在不同浏览器中都能正常工作的事件监听函数，我们可以创建一个策略对象来处理不同的浏览器：

interface IStrategy {
  addListener: (el: Element, type: string, fn: Function) => void;
}

const strategies: Record<string, IStrategy> = {
  IE: {
    addListener: (el, type, fn) => {
      el.attachEvent(`on${type}`, fn);
    },
  },
  standard: {
    addListener: (el, type, fn) => {
      el.addEventListener(type, fn);
    },
  },
};

function addListener(el: Element, type: string, fn: Function) {
  const strategy = window.attachEvent ? strategies.IE : strategies.standard;
  strategy.addListener(el, type, fn);
}

在这个例子中，我们定义了两种策略：IE 策略和标准策略。根据当前环境中是否存在 attachEvent 方法，我们选择使用不同的策略。这样我们的addListener函数就可以在任何浏览器环境中运行了。

使用策略模式进行表单验证

假设我们有一个表单，其中有一些字段需要满足特定的验证规则。我们可以创建一个策略对象来存储这些验证规则：

interface IValidatorStrategy {
  [key: string]: (value: string) => string | null;
}

const validatorStrategies: IValidatorStrategy = {
  isNotEmpty: (value) => (value ? null : '此字段不能为空'),
  minLength: (value) => (value.length >= 6 ? null : '输入的长度不能小于6'),
};

function validate(strategy: keyof IValidatorStrategy, value: string) {
  return validatorStrategies[strategy](value);
}

在这个例子中，我们有两种策略：isNotEmpty和minLength。当我们需要验证一个字段时，只需选择合适的策略并调用**validate**函数即可。

四、使用策略模式的最佳实践

像其他设计模式一样，策略模式并不是“万金油”，它并非适用于每个场景。

策略模式的优势在于它可以让你的代码更加模块化，更容易扩展和维护。然而，如果我们需要处理的策略数量很大，或者策略间的差异很小时，使用策略模式可能会让代码变得过于复杂。

因此，使用策略模式的时候，你需要考虑清楚是否真的需要它。如果你的代码中包含了大量的 if/else 或 switch 语句，并且这些语句都在处理相同类型的操作，那么策略模式可能就是你的救星。但如果你只是在处理一两种简单的情况，那么策略模式可能就没有那么必要了。

希望今天的分享能让你对策略模式有更深的理解和更好的应用。如果你对策略模式有了更深的理解，那就赶快试试在你的代码中用起来吧！记得分享你的使用心得和体验，如有任何问题或建议，欢迎在下方留言区留言哦。