前端开发设计模式——策略模式

前端拾光者

已于 2024-09-29 09:49:27 修改

阅读量459

点赞数 12

文章标签：设计模式策略模式前端 javascript

于 2024-09-29 09:41:52 首次发布

本文链接：https://blog.csdn.net/jxnd123456/article/details/142626921

版权

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

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