前端开发设计模式——策略模式，零基础入门到精通，收藏这篇就够了

原创于 2025-12-19 09:27:28 发布 · 389 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#设计模式 #策略模式 #linux

计算机同时被 3 个专栏收录

1905 篇文章

订阅专栏

程序员

1904 篇文章

订阅专栏

前端

79 篇文章

订阅专栏

一、策略模式的定义和特点

1.定义：

2.特点：

二、策略模式的实现方式

1.定义策略接口：

2.创建具体策略类：

3.定义上下文类：

三、策略模式的应用场景

1.表单验证场景：

2.动画效果切换场景：

3.数据处理和格式化场景：

四、策略模式的优点

1.可维护性：

2.可扩展性：

3.灵活性：

五、策略模式的缺点

1.增加代码复杂度：

2.性能开销：

六、策略模式的注意事项

1.策略命名规范：

2.策略的选择逻辑：

3.策略的可测试性：

一、策略模式的定义和特点

1.定义：

    策略模式是一种行为设计模式，它定义了一系列的算法，并将每个算法封装起来，使它们可以相互替换。在前端开发中，策略模式允许根据不同的情况动态地选择和应用不同的算法或行为，而无需修改使用这些算法的主体代码。

2.特点：

    **算法封装：**将不同的算法封装在独立的策略类中，每个策略类实现特定的行为逻辑。

    **可替换性：**不同的策略可以在运行时相互替换，使得系统更加灵活。

    **解耦性：**策略模式将算法的实现与使用算法的主体代码解耦，提高了代码的可维护性和可扩展性。

二、策略模式的实现方式

1.定义策略接口：

    首先，定义一个策略接口，该接口声明了所有具体策略类必须实现的方法。例如：

   interface Strategy {
     execute(): void;
   }

2.创建具体策略类：

    实现具体的策略类，每个策略类实现策略接口中的方法，并提供特定的算法实现。例如：

   class ConcreteStrategyA implements Strategy {
     execute() {
       console.log('Executing strategy A.');
     }
   }

   class ConcreteStrategyB implements Strategy {
     execute() {
       console.log('Executing strategy B.');
     }
   }

3.定义上下文类：

    上下文类持有一个策略对象的引用，并通过该引用调用策略对象的方法。上下文类可以在运行时设置不同的策略对象。例如：

   class Context {
     private strategy: Strategy;

     constructor(strategy: Strategy) {
       this.strategy = strategy;
     }

     setStrategy(strategy: Strategy) {
       this.strategy = strategy;
     }

     executeStrategy() {
       this.strategy.execute();
     }
   }

三、策略模式的应用场景

1.表单验证场景：

    根据不同的表单字段类型和需求，可以使用不同的验证策略。例如，对于电子邮件字段，可以使用一个验证电子邮件格式的策略；对于密码字段，可以使用一个验证密码强度的策略.

    **示例：**

            （1）定义策略接口：

interface ValidationStrategy {
  validate(value): boolean;
}

            （2）创建具体策略类：

                    邮箱验证策略：

   class EmailValidationStrategy implements ValidationStrategy {
     validate(value) {
       const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
       return emailRegex.test(value);
     }
   }

                    密码长度验证策略：

   class PasswordLengthValidationStrategy implements ValidationStrategy {
     validate(value) {
       return value.length >= 8;
     }
   }

            （3）定义上下文类（表单组件）：

class FormComponent {
  private validationStrategy: ValidationStrategy;

  constructor(strategy: ValidationStrategy) {
    this.validationStrategy = strategy;
  }

  setValidationStrategy(strategy: ValidationStrategy) {
    this.validationStrategy = strategy;
  }

  validateInput(value) {
    return this.validationStrategy.validate(value);
  }
}

            （4）使用示例：

// 使用邮箱验证策略
const emailFormComponent = new FormComponent(new EmailValidationStrategy());
const isEmailValid = emailFormComponent.validateInput('test@example.com');
console.log('Email is valid:', isEmailValid);

// 切换为密码长度验证策略
emailFormComponent.setValidationStrategy(new PasswordLengthValidationStrategy());
const isPasswordValid = emailFormComponent.validateInput('12345678');
console.log('Password is valid:', isPasswordValid);

2.动画效果切换场景：

    在前端动画中，可以根据不同的场景和用户交互选择不同的动画效果策略。例如，在页面加载时可以使用一种淡入效果，在用户点击按钮时可以使用一种弹出效果。

    **示例：**

            （1）定义策略接口：

interface AnimationStrategy {
  animate(element): void;
}

            （2）创建具体策略类：

                    淡入动画策略：

   class FadeInAnimationStrategy implements AnimationStrategy {
     animate(element) {
       element.style.opacity = '0';
       let opacity = 0;
       const interval = setInterval(() => {
         opacity += 0.1;
         element.style.opacity = opacity.toString();
         if (opacity >= 1) {
           clearInterval(interval);
         }
       }, 100);
     }
   }

                     弹出动画策略：

   class PopupAnimationStrategy implements AnimationStrategy {
     animate(element) {
       element.style.transform = 'scale(0)';
       let scale = 0;
       const interval = setInterval(() => {
         scale += 0.1;
         element.style.transform = `scale(${scale})`;
         if (scale >= 1) {
           clearInterval(interval);
         }
       }, 100);
     }
   }

            （3）定义上下文类（动画控制器）：

class AnimationController {
  private animationStrategy: AnimationStrategy;

  constructor(strategy: AnimationStrategy) {
    this.animationStrategy = strategy;
  }

  setAnimationStrategy(strategy: AnimationStrategy) {
    this.animationStrategy = strategy;
  }

  startAnimation(element) {
    this.animationStrategy.animate(element);
  }
}

             （4）使用示例：

// 使用淡入动画策略
const fadeInController = new AnimationController(new FadeInAnimationStrategy());
const elementToAnimate = document.createElement('div');
document.body.appendChild(elementToAnimate);
fadeInController.startAnimation(elementToAnimate);

// 切换为弹出动画策略
fadeInController.setAnimationStrategy(new PopupAnimationStrategy());
const anotherElementToAnimate = document.createElement('div');
document.body.appendChild(anotherElementToAnimate);
fadeInController.startAnimation(anotherElementToAnimate);

3.数据处理和格式化场景：

    对于不同类型的数据，可以使用不同的数据处理和格式化策略。例如，对于日期数据，可以使用不同的日期格式化策略；对于数字数据，可以使用不同的数字格式化策略。

    这个就不举例了......

四、策略模式的优点

1.可维护性：

    将不同的算法封装在独立的策略类中，使得代码更加清晰、易于维护。当需要修改某个算法时，只需修改相应的策略类，而不会影响其他部分的代码。

2.可扩展性：

    可以方便地添加新的策略类，实现新的算法或行为，而无需修改现有的代码。这使得系统具有良好的可扩展性。

3.灵活性：

    策略模式允许在运行时根据不同的情况选择不同的策略，使得系统更加灵活。可以根据用户的输入、系统状态或其他条件动态地切换策略。

五、策略模式的缺点

1.增加代码复杂度：

    引入策略模式会增加代码的复杂度，特别是当有多个策略类时。需要更多的类和接口，以及更多的代码来管理策略的选择和切换。

2.性能开销：

    在运行时动态地选择策略可能会带来一定的性能开销。特别是当策略的选择和切换比较频繁时，可能会影响系统的性能。

六、策略模式的注意事项

1.策略命名规范：

    为了提高代码的可读性和可维护性，应该为策略类和方法使用清晰、有意义的命名规范。这样可以更容易地理解每个策略的作用和用途。

2.策略的选择逻辑：

    在上下文类中，应该有明确的逻辑来选择合适的策略。可以根据用户的输入、系统状态或其他条件来选择策略。同时，应该考虑策略的优先级和适用性，以确保选择的策略是最合适的。

3.策略的可测试性：

    由于策略模式将算法的实现与使用算法的主体代码解耦，因此策略类通常比较容易进行单元测试。可以为每个策略类编写独立的测试用例，确保它们的行为符合预期。同时，也应该测试上下文类对策略的选择和切换逻辑。

    对于前端开发设计模式中的策略模式就分享到这，如果对设计模式中的其他模式有兴趣的话，可以点开主页看看相关文章。码字不易，点个赞再走吧