js策略模式表单

策略模式（Strategy Pattern）是一种行为设计模式，它允许你定义一系列算法，并将每个算法封装起来，使它们可以互换。策略模式让算法独立于使用它的客户端而变化。

基础概念

策略接口：定义了一个算法族的公共接口。
具体策略类：实现了策略接口中的算法。
上下文类：使用一个策略对象来配置，维护对策略对象的引用，可以在运行时切换不同的策略。

优势

可替换性：策略模式提供了管理相关算法族的办法，算法可以独立于客户端变化。
避免使用多重条件判断：通过使用策略模式，可以避免在代码中使用大量的if-else或switch-case语句。
提高代码的可读性和可维护性：每个策略都是独立的类，代码更加清晰，易于理解和维护。

类型

策略模式通常分为两类：

静态策略模式：在编译时就确定了使用的策略。
动态策略模式：在运行时动态选择和切换策略。

应用场景

表单验证：不同的表单字段可能需要不同的验证策略。
支付方式：不同的支付方式（如信用卡、支付宝、微信支付）可以作为不同的策略。
排序算法：不同的排序算法（如快速排序、归并排序）可以作为不同的策略。

示例代码：JS策略模式表单验证

策略接口

class ValidationStrategy {
  validate(value) {
    throw new Error('validate method must be implemented');
  }
}

具体策略类

class RequiredValidation extends ValidationStrategy {
  validate(value) {
    return value ? true : 'This field is required';
  }
}

class EmailValidation extends ValidationStrategy {
  validate(value) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(value) ? true : 'Invalid email format';
  }
}

class MinLengthValidation extends ValidationStrategy {
  constructor(minLength) {
    super();
    this.minLength = minLength;
  }

  validate(value) {
    return value.length >= this.minLength ? true : `Minimum length is ${this.minLength}`;
  }
}

上下文类

class Validator {
  constructor() {
    this.strategy = null;
  }

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

  validate(value) {
    if (!this.strategy) {
      throw new Error('No validation strategy set');
    }
    return this.strategy.validate(value);
  }
}

使用示例

const validator = new Validator();

// 验证必填字段
validator.setStrategy(new RequiredValidation());
console.log(validator.validate('')); // 输出: This field is required
console.log(validator.validate('some value')); // 输出: true

// 验证邮箱格式
validator.setStrategy(new EmailValidation());
console.log(validator.validate('test@example.com')); // 输出: true
console.log(validator.validate('invalid-email')); // 输出: Invalid email format

// 验证最小长度
validator.setStrategy(new MinLengthValidation(5));
console.log(validator.validate('abc')); // 输出: Minimum length is 5
console.log(validator.validate('abcdef')); // 输出: true