策略模式通过封装算法并使其可互换，实现算法与客户端解耦。以表单验证为例，定义包含isNonEmpty、minLength、isMobile等校验规则的策略对象，Validator类通过add方法注册规则并缓存执行函数，validate遍历调用返回首个错误信息，从而分离校验逻辑与业务代码，提升可维护性与复用性。
策略模式的核心思想是：定义一系列算法，把它们一个个封装起来，并且使它们可以互相替换。这种模式让算法的变化独立于使用它的客户端。在JavaScript中，策略模式特别适合用于表单验证、计算折扣、动态切换行为等场景。
策略模式的基本结构
策略模式通常包含三个部分：
- 环境类（Context）：持有一个策略对象的引用，负责调用具体的策略方法。
- 策略类（Strategy）：定义所有支持的算法的公共接口。
- 具体策略类（Concrete Strategy）：实现具体的算法。
在JavaScript中，由于函数是一等公民，我们可以直接用对象来组织策略，不需要复杂的类结构。
表单验证中的策略模式应用
一个常见的实际应用场景是用户注册表单的输入验证。比如需要验证用户名不能为空、密码长度不能少于6位、手机号必须符合格式等。
不用策略模式时，代码往往是一堆if-else判断，难以维护。使用策略模式后，可以让每种校验规则独立出来，易于扩展和复用。
// 定义策略对象
const strategies = {
isNonEmpty: (value, errorMsg) => {
if (value === '') return errorMsg;
return null;
},
minLength: (value, length, errorMsg) => {
if (value.length < length) return errorMsg;
return null;
},
isMobile: (value, errorMsg) => {
const mobileReg = /^1[34578]\d{9}$/;
if (!mobileReg.test(value)) return errorMsg;
return null;
}
};
// 验证类
class Validator {
constructor() {
this.cache = []; // 保存验证规则
}
add(value, rule, errorMsg) {
const [strategyName, ...params] = rule.split(':');
params.unshift(value);
params.push(errorMsg);
this.cache.push(() => strategies[strategyName](...params));
}
validate() {
for (let fn of this.cache) {
const errorMsg = fn();
if (errorMsg) return errorMsg;
}
return null;
}
}
// 使用示例
const validator = new Validator();
const userName = 'admin';
const password = '123';
const phone = '13800138000';
validator.add(userName, 'isNonEmpty', '用户名不能为空');
validator.add(password, 'minLength:6', '密码不能少于6位');
validator.add(phone, 'isMobile', '手机号格式不正确');
const errorMsg = validator.validate();
if (errorMsg) {
console.log(errorMsg); // 输出：密码不能少于6位
}
优势与适用场景
使用策略模式的好处很明显：
- 解耦验证规则和业务逻辑：新增或修改规则不影响主流程。
- 可复用性强：同一个策略可以在多个表单中使用。
- 易于测试：每个策略函数都可以单独测试。
除了表单验证，策略模式还适用于：
根据用户等级计算不同折扣的促销系统- 不同支付方式的处理逻辑
- 图表渲染方式的动态切换
根据用户等级计算不同折扣的促销系统基本上就这些。策略模式看似简单，但在实际项目中能有效提升代码的可维护性和扩展性，特别是在规则多变的业务场景下。关键是把变化的算法封装成独立的策略，通过配置的方式灵活调用。不复杂但容易忽略。
