JavaScript设计模式_策略模式实战-js教程-PHP中文网

JavaScript设计模式_策略模式实战

狼影

发布： 2025-11-23 23:50:02

原创

364人浏览过

策略模式通过封装算法并使其可互换，实现算法与客户端解耦。以表单验证为例，定义包含isNonEmpty、minLength、isMobile等校验规则的策略对象，Validator类通过add方法注册规则并缓存执行函数，validate遍历调用返回首个错误信息，从而分离校验逻辑与业务代码，提升可维护性与复用性。

javascript设计模式_策略模式实战

策略模式的核心思想是：定义一系列算法，把它们一个个封装起来，并且使它们可以互相替换。这种模式让算法的变化独立于使用它的客户端。在JavaScript中，策略模式特别适合用于表单验证、计算折扣、动态切换行为等场景。

策略模式的基本结构

策略模式通常包含三个部分：

环境类（Context）：持有一个策略对象的引用，负责调用具体的策略方法。
策略类（Strategy）：定义所有支持的算法的公共接口。
具体策略类（Concrete Strategy）：实现具体的算法。

在JavaScript中，由于函数是一等公民，我们可以直接用对象来组织策略，不需要复杂的类结构。

表单验证中的策略模式应用

一个常见的实际应用场景是用户注册表单的输入验证。比如需要验证用户名不能为空、密码长度不能少于6位、手机号必须符合格式等。

立即学习“Java免费学习笔记（深入）”；

不用策略模式时，代码往往是一堆if-else判断，难以维护。使用策略模式后，可以让每种校验规则独立出来，易于扩展和复用。

Shoping购物网源码

该系统采用多层模式开发，这个网站主要展示女装的经营，更易于网站的扩展和后期的维护，同时也根据常用的SQL注入手段做出相应的防御以提高网站的安全性，本网站实现了购物车,产品订单管理，产品展示，等等，后台实现了动态权限的管理，客户管理，订单管理以及商品管理等等，前台页面设计精致，后台便于操作等。实现了无限子类的添加，实现了动态权限的管理，支持一下一个人做的辛苦

查看详情

// 定义策略对象
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;
  }
};
<p>// 验证类
class Validator {
constructor() {
this.cache = []; // 保存验证规则
}</p><p>add(value, rule, errorMsg) {
const [strategyName, ...params] = rule.split(':');
params.unshift(value);
params.push(errorMsg);</p><pre class='brush:php;toolbar:false;'>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位 }