JavaScript程序设计模式小技巧——策略模式,快看快用!!!(上)

简介: JavaScript程序设计模式小技巧——策略模式,快看快用!!!(上)

JavaScript程序设计模式小技巧——策略模式,快看快用!!!


何为策略模式?

  • 比如在业务逻辑或程序设计中比如要实现某个功能,有多种方案可供我们选择。比如要压缩一个文件,我们既可以选择 ZIP 算法,也可以选择 GZIP 算法。
  • 这些算法灵活多样,可随意切换,而这种解决方案就是我们所要学习的策略模式。

定义或概念

  • 策略模式:定义一系列的算法,将他们一个个封装,并使他们可相互替换。

策略模式的最佳实践

例子1:奖金计算

  • 题目:在很多公司的年终奖都是按照员工的工资基数和年底绩效情况来发放的,例如,绩效为 S 的人年终奖有 4 倍工资,A 的人年终奖有 3 倍,B 的人年终奖有 2 倍。要求我们写出一个程序来更快的计算员工的年终奖。(编写一个名为 calcBonus 方法来计算每个员工的奖金数额)
  • 可能有些人一上来直接就在一个方法中进行很多 if...else 或 switch...case 判断, 然后通过这个方法进行计算。我们可以来试着写一下:
/**
 *
 * @param {*} level 绩效等级
 * @param {*} salary 工资基数
 * @returns 年终奖金额
 */
var calcBonus = function (level, salary) {
  if (level === 'S') {
    return salary * 4;
  } else if (level === 'A') {
    return salary * 3;
  } else if (level === 'B') {
    return salary * 2;
  }
};
calcBonus('A', 20000); // 60000
calcBonus('B', 8000); // 16000
  • 我想在我们每个人初学代码时肯定都写出过这样的代码。其实这段代码有显而易见的缺点:
  1. 1. calcBonus 函数逻辑太多
  2. 2. calcBonus 函数缺乏弹性,比如如果我们需要增加一个等级 C,那就必须要去修改 calcBonus 函数。这就违反了开放-封闭原则
  3. 3. 复用性差。如果后续还要重用这个程序去计算奖金,我们只有去 C,V。
  • 此时,可能会想对 calcBonus 函数进行封装,如我们使用组合函数的形式,如下:
var totalS = function (salary) {
  return salary * 4;
};
var totalA = function (salary) {
  return salary * 3;
};
var totalB = function (salary) {
  return salary * 2;
};
var calcBonus = function (level, salary) {
  if (level === "S") {
    return totalS(salary);
  } else if (level === "A") {
    return totalA(salary);
  } else if (level === "B") {
    return totalB(salary);
  }
};
calcBonus('A', 20000); // 60000
calcBonus('B', 8000); // 16000
  • 这样,我们将程序进行了进一步改善,但改善微乎其微,依旧没有解决最重要的问题,calcBonus 函数还是有可能会很庞大,并且也没有弹性。
  • 那我们再将它进行一次改造,使用策略模式:将其定义为一系列的算法,将他们每一个封装起来,将不变的部分和变化的部分隔开。
  • 在这段程序中,算法的使用方式是不变的,都是根据某个算法获取最后的奖金金额。而在每个算法的内部实现却是不同的,每一个等级对应着不同的计算规则
  • 在策略模式程序中:最少由两部分组成,一部分是一组策略类,在策略类中封装了具体的算法,并负责具体的计算过程。一部分是环境类 context,接受用户的请求,并将请求委托给某一个策略类。
  • 如下:
var strategies = {
  S: function (salary) {
    return salary * 4;
  },
  A: function (salary) {
    return salary * 3;
  },
  B: function (salary) {
    return salary * 2;
  },
};
var calcBonus = function (level, salary) {
  return strategies[level](salary);
}
calcBonus('A', 20000); // 60000
calcBonus('B', 8000); // 16000
  • 其实,策略模式的实现并不复杂,关键是如何从策略模式的实现背后,找到封装变化,委托和多态性这些思想的价值

例子2:表单验证

  • 题目:在 Web 开发中,表单校验是一个常见的话题,要求使用策略模式来完成表单验证。
  • 比如:
  1. 1. 用户名不能为空
  2. 2. 密码长度不能少于 6 位
  3. 3. 手机号码必须符合正确格式
  • 让我们来实现一下吧:
function submit() {
  let { username, password, tel } = infoForm;
  if (username === "") {
    Toast("用户名不能为空");
    return false;
  }
  if (password.length < 6) {
    Toast("密码不能少于 6 位");
    return false;
  }
  if (!/(^1[3|5|8][0-9]{9}$)/.test(tel)) {
    Toast("手机号码格式不正确");
    return false;
  }
  // .....
}
  • 这是我们常见的实现方式,它的缺点跟计算奖金一例类似:
  1. 1. submit 函数庞大,包含了很多 if...else 语句
  2. 2. submit 函数缺乏弹性,如果对其新加一些新的校验规则,如果我们把密码长度从 6 改到 8.那我们就必须要改动 submit 函数,否则无法实现该校验。这也是违反开放-封闭原则。
  3. 3. 复用差,如果说我们程序中还有另一个表达需要验证,也是进行类似的校验,那我们可能会进行 C, V 操作。
  • 使用策略模式来进行重构
let infoForm = {
  username: "我是某某某",
  password: 'zxcvbnm',
  tel: 16826384655,
};
var strategies = {
  isEmpty: function (val, msg) {
    if (!val) return msg;
  },
  minLength: function (val, length, msg) {
    if (val.length < length) return msg;
  },
  isTel: function (val, msg) {
    if (!/(^1[3|5|8][0-9]{9}$)/.test(val)) return msg;
  },
};
var validFn = function () {
  var validator = new Validator();
  let { username, password, tel } = infoForm;
  validator.add(username, "isEmpty", "用户名不能为空");
  validator.add(password, "minLength:6", "密码不能少于 6 位");
  validator.add(tel, "isTel", "手机号码格式不正确");
  var msg = validator.start();
  return msg;
};
class Validator {
  constructor() {
    this.cache = [];
  }
  add(attr, rule, msg) {
    var ruleArr = rule.split(":");
    this.cache.push(function () {
      var strategy = ruleArr.shift();
      ruleArr.unshift(attr);
      ruleArr.push(msg);
      return strategies[strategy].apply(attr, ruleArr);
    });
  }
  start() {
    for (let i = 0; i < this.cache.length; i++) {
      var msg = this.cache[i]();
      if (msg) return msg;
    }
  }
}
function submit() {
  let msg = validFn();
  if (msg) {
    Toast(msg);
    return false;
  }
  console.log('verify success');
  // .....
}
submit();
目录
相关文章
|
机器学习/深度学习 人工智能 自然语言处理
一文尽览 | 开放世界目标检测的近期工作及简析!(基于Captioning/CLIP/伪标签/Prompt)(上)
人类通过自然监督,即探索视觉世界和倾听他人描述情况,学会了毫不费力地识别和定位物体。我们人类对视觉模式的终身学习,并将其与口语词汇联系起来,从而形成了丰富的视觉和语义词汇,不仅可以用于检测物体,还可以用于其他任务,如描述物体和推理其属性和可见性。人类的这种学习模式为我们实现开放世界的目标检测提供了一个可以学习的角度。
一文尽览 | 开放世界目标检测的近期工作及简析!(基于Captioning/CLIP/伪标签/Prompt)(上)
|
移动开发 监控 安全
2024护网工具分享
2024护网工具分享
186 6
|
存储 SQL 数据库
SQL 语言:存储过程和触发器
SQL 语言:存储过程和触发器
264 6
|
PHP 开发者
深入理解PHP7的返回类型声明
【5月更文挑战第27天】 在PHP7中,引入了一项新的语言特性——返回类型声明。这一功能允许开发者在函数定义时明确指定函数应返回的数据类型,从而提升代码的可读性和健壮性。本文将深入探讨返回类型声明的概念、用法以及其对现有PHP项目的影响,旨在为PHP开发者提供一份详细的技术解析和实践指南。
|
10月前
|
SQL 数据库连接 API
在Python中,异常处理机制被广泛应用于各种场景
在Python中,异常处理机制被广泛应用于各种场景
121 4
|
11月前
|
网络协议 安全 JavaScript
Web实时通信的学习之旅:WebSocket入门指南及示例演示
Web实时通信的学习之旅:WebSocket入门指南及示例演示
1771 0
|
传感器 物联网 区块链
未来已来:新兴技术趋势与应用全景剖析
【8月更文挑战第31天】 在数字化浪潮的推动下,新兴技术如区块链、物联网和虚拟现实正逐渐融入我们的生活,改变着我们的工作方式和生活习惯。本文将深入探讨这些技术的发展趋势和应用场景,通过代码示例,揭示它们如何塑造我们的未来。
|
Java
Java实现一个打飞机的小游戏【附源码】
Java实现一个打飞机的小游戏【附源码】
131 0
|
算法 数据挖掘 开发工具
以阿里云OpenSearch为例谈向量检索技术选型
本文从向量检索应用场景、常见的向量检索方法、向量检索性能优化、功能性能对比介绍了向量检索的业务应用场景和技术选型方式。
3974 3
|
Java Maven Spring
springboot配置不同环境读取不同文件
以下是本人暂时了解的知识,写出来用于笔记同时方便大家使用。如有问题之处,欢迎朋友指正。
271 0
springboot配置不同环境读取不同文件