Паттерн "Стратегия"

Паттерн "Стратегия" (Strategy Pattern) — это поведенческий паттерн проектирования, который определяет семейство алгоритмов, инкапсулирует каждый из них и делает их взаимозаменяемыми. Паттерн позволяет выбрать алгоритм во время выполнения программы.

В контексте Angular и TypeScript, этот паттерн можно использовать для выбора различных стратегий обработки данных, отображения, валидации и других аспектов поведения приложения.

Представим, что у нас есть форма, в которой могут быть разные стратегии валидации, такие как базовая валидация и расширенная валидация.

Шаг 1: Определение интерфейса стратегии

// validation-strategy.ts
export interface ValidationStrategy {
  validate(value: string): boolean;
}

Шаг 2: Реализация конкретных стратегий

// basic-validation-strategy.ts
import { ValidationStrategy } from './validation-strategy';

export class BasicValidationStrategy implements ValidationStrategy {
  validate(value: string): boolean {
    // Базовая валидация: строка не должна быть пустой
    return value.trim().length > 0;
  }
}

// advanced-validation-strategy.ts
import { ValidationStrategy } from './validation-strategy';

export class AdvancedValidationStrategy implements ValidationStrategy {
  validate(value: string): boolean {
    // Расширенная валидация: строка не должна быть пустой и должна содержать хотя бы одну цифру
    return value.trim().length > 0 && /\d/.test(value);
  }
}

Шаг 3: Контекст, использующий стратегию

// validation-context.ts
import { ValidationStrategy } from './validation-strategy';

export class ValidationContext {
  private strategy: ValidationStrategy;

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

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

  validate(value: string): boolean {
    return this.strategy.validate(value);
  }
}

Шаг 4: Использование в Angular компоненте

// app.component.ts
import { Component } from '@angular/core';
import { ValidationContext } from './validation-context';
import { BasicValidationStrategy } from './basic-validation-strategy';
import { AdvancedValidationStrategy } from './advanced-validation-strategy';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <input [(ngModel)]="inputValue" placeholder="Enter value" />
      <button (click)="validate()">Validate</button>
      <p>{{ validationMessage }}</p>
      <button (click)="setBasicValidation()">Basic Validation</button>
      <button (click)="setAdvancedValidation()">Advanced Validation</button>
    </div>
  `,
})
export class AppComponent {
  inputValue: string = '';
  validationMessage: string = '';
  private validationContext: ValidationContext;

  constructor() {
    // По умолчанию использовать базовую стратегию валидации
    this.validationContext = new ValidationContext(new BasicValidationStrategy());
  }

  validate() {
    const isValid = this.validationContext.validate(this.inputValue);
    this.validationMessage = isValid ? 'Valid!' : 'Invalid!';
  }

  setBasicValidation() {
    this.validationContext.setStrategy(new BasicValidationStrategy());
  }

  setAdvancedValidation() {
    this.validationContext.setStrategy(new AdvancedValidationStrategy());
  }
}

Объяснение

1. ValidationStrategy: Интерфейс, который определяет метод validate.
2. BasicValidationStrategy и AdvancedValidationStrategy: Конкретные стратегии, реализующие интерфейс ValidationStrategy.
3. ValidationContext: Контекст, который использует стратегию для валидации. Он содержит метод setStrategy для установки текущей стратегии и метод validate для выполнения валидации.
4. AppComponent: Angular компонент, который позволяет пользователю выбирать между базовой и расширенной стратегией валидации и отображает результат валидации.

Этот пример демонстрирует, как можно использовать паттерн "Стратегия" в Angular и TypeScript для создания гибких и легко изменяемых решений.