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

简介: JavaScript程序设计模式小技巧——策略模式,快看快用!!!(下)
  • 使用策略模式重构后,我们后续仅需配置的方式来完成。
  • 扩展题目:那如果想给用户名还想再添加一个规则,那如何完成呢?
  • 添加规则方式如下:
validator.add(username, [
  {
    strategy: "isEmpty",
    msg: "用户名不能为空"
  },
  {
    strategy: 'minLength:6',
    msg: '密码不能少于 6 位'
  }
]);
  • 实现:
let infoForm = {
  username: "阿斯顿发生的",
  password: "ss1sdf",
  tel: 15829485647,
};
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, [
    {
      strategy: "isEmpty",
      msg: "用户名不能为空",
    },
    {
      strategy: "minLength:6",
      msg: "密码不能少于 6 位",
    },
  ]);
  validator.add(password, [
    {
      strategy: "minLength:6",
      msg: "密码不能少于 6 位",
    },
  ]);
  validator.add(tel, [
    {
      strategy: "isTel",
      msg: "手机号码格式不正确",
    },
  ]);
  var msg = validator.start();
  return msg;
};
class Validator {
  constructor() {
    this.cache = [];
  }
  add(attr, rules) {
    for (let i = 0; i < rules.length; i++) {
      var rule = rules[i];
      var ruleArr = rule.strategy.split(":");
      var msg = rule.msg;
      var cacheItem = this.createCacheItem(ruleArr, attr, msg);
      this.cache.push(cacheItem);
    }
  }
  start() {
    for (let i = 0; i < this.cache.length; i++) {
      var msg = this.cache[i]();
      if (msg) return msg;
    }
  }
  createCacheItem(ruleArr, attr, msg) {
    return function () {
      var strategy = ruleArr.shift();
      ruleArr.unshift(attr);
      ruleArr.push(msg);
      return strategies[strategy].apply(attr, ruleArr);
    };
  }
}
function submit() {
  let msg = validFn();
  if (msg) {
    Toast(msg);
    return false;
  }
  console.log("verify success");
  // .....
}
submit();

策略模式的优缺点

  • 优点:
  1. 1. 利用组合,委托,多态等技术有效避免了多重条件语句
  2. 2. 提供了对开封-封闭原则的完美支持
  3. 3. 复用性较强,避免许多重复的 C,V 工作
  • 缺点:
  1. 1. 客户端要先了解所有的策略类,才能选择合适的策略类。

策略模式的角色

  1. 1. Context(环境类):持有一个 Strategy 类的引用,用一个 ConcreteStrategy 对象来配置
  2. 2. Strategy(环境策略类):定义了所有支持的算法的公共接口,通常是以一个接口或抽象来实现。Context 使用这个接口来调用其 ConcreteStrategy 定义的算法。
  3. 3. ConcreteStrategy(具体策略类):以 Strategy 接口实现某种算法
  • 比如以上的例子算法:

策略模式的应用场景

  1. 1. 想使用对象中各种不同算法变体来在运行时切换算法时
  2. 2. 拥有很多在执行某些行为时有着不同的规则时

Tip: 文章部分内容参考于曾探大佬的《JavaScript 设计模式与开发实践》。文章仅做个人学习总结和知识汇总。


特殊字符描述

问题标注 Q:(question)答案标注 R:(result)注意事项标准:A:(attention matters)详情描述标注:D:(detail info)总结标注:S:(summary)分析标注:Ana:(analysis)提示标注:T:(tips)

目录
相关文章
|
JavaScript 前端开发 API
尚硅谷Vue3 笔记总结及代码-1
尚硅谷Vue3 笔记总结及代码-1
486 0
|
SQL Java API
实时计算 Flink版操作报错之遇到org.codehaus.commons.compiler.CompileException 是什么导致的
在使用实时计算Flink版过程中,可能会遇到各种错误,了解这些错误的原因及解决方法对于高效排错至关重要。针对具体问题,查看Flink的日志是关键,它们通常会提供更详细的错误信息和堆栈跟踪,有助于定位问题。此外,Flink社区文档和官方论坛也是寻求帮助的好去处。以下是一些常见的操作报错及其可能的原因与解决策略。
|
编译器 C++ 索引
C++虚拟成员-虚函数
C++虚拟成员-虚函数
|
安全 Java C++
CAS自旋锁到底是什么?为什么能实现线程安全?
本文是博主对多线程学习总结记录,希望对大家有所帮助。
1450 0
CAS自旋锁到底是什么?为什么能实现线程安全?
|
缓存 网络协议 算法
从0开始回顾计算机网络---系列三
传输层 1、TCP首部格式? 源端口: 占16比特,写入源端口号,用来标识发送该TCP报文段的应用进程。 目的端口: 占16比特,写入目的端口号,用来标识接收该TCP报文段的应用进程。 序号: 占32比特,取值范围[0,2^32-1],序号增加到最后一个后,下一个序号就又回到0。指出本TCP报文段数据载荷的第一个字节的序号。 确认号: 占32比特,取值范围[0,2^32-1],确认号增加到最后一个后,下一个确认号就又回到0。指出期望收到对方下一个TCP报文段的数据载荷的第一个字节的序号,同时也是对之前收到的所有数据的确认。若确认号=n,则表明到序号n-1为止的所有数据都已正确接收,期望接收序
|
存储 机器学习/深度学习 人工智能
计算机的历史发展及原理
计算机的历史发展及原理
592 0
|
数据安全/隐私保护
BUGKU CTF (reverse篇)
bugku ctf练习平台
571 0
BUGKU CTF (reverse篇)
|
设计模式 存储 算法
23个小案例带你吃透23种设计模式(二)
23个小案例带你吃透23种设计模式
343 0
23个小案例带你吃透23种设计模式(二)
|
计算机视觉
目标检测无痛涨点新方法 | DRKD蒸馏让ResNet18拥有ResNet50的精度(二)
目标检测无痛涨点新方法 | DRKD蒸馏让ResNet18拥有ResNet50的精度(二)
274 0
|
前端开发
Pinia+Router学习笔记(十五)
本节记录Vue-Router中关于路由滚动行为的相关内容
115 0