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)

相关文章
|
7月前
|
设计模式 缓存 JavaScript
JavaScript 简单实现观察者模式和发布-订阅模式
JavaScript 简单实现观察者模式和发布-订阅模式
33 0
|
1天前
|
设计模式 JavaScript 前端开发
js设计模式-观察者模式与发布/订阅模式
观察者模式和发布/订阅模式是JavaScript中的两种设计模式,用于处理对象间的通信和事件处理。观察者模式中,一个主题对象状态改变会通知所有观察者。实现包括定义主题和观察者对象,以及在主题中添加、删除和通知观察者的功能。发布/订阅模式则引入事件管理器,允许发布者发布事件,订阅者通过订阅接收通知。
|
1天前
|
设计模式 JavaScript 算法
js设计模式-策略模式与代理模式的应用
策略模式和代理模式是JavaScript常用设计模式。策略模式通过封装一系列算法,使它们可互换,让算法独立于客户端,提供灵活的选择。例如,定义不同计算策略并用Context类执行。代理模式则为对象提供代理以控制访问,常用于延迟加载或权限控制。如创建RealSubject和Proxy类,Proxy在调用RealSubject方法前可执行额外操作。这两种模式在复杂业务逻辑中发挥重要作用,根据需求选择合适模式解决问题。
|
1天前
|
JavaScript 前端开发 IDE
【JavaScript与TypeScript技术专栏】JavaScript与TypeScript混合编程模式探讨
【4月更文挑战第30天】本文探讨了在前端开发中JavaScript与TypeScript的混合编程模式。TypeScript作为JavaScript的超集,提供静态类型检查等增强功能,但完全切换往往不现实。混合模式允许逐步迁移,保持项目稳定性,同时利用TypeScript的优点。通过文件扩展名约定、类型声明文件和逐步迁移策略,团队可以有效结合两者。团队协作与沟通在此模式下至关重要,确保代码质量与项目维护性。
|
1天前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
1天前
|
JavaScript 前端开发 索引
JavaScript中的正则表达式:使用与模式匹配
【4月更文挑战第22天】本文介绍了JavaScript中的正则表达式及其模式匹配,包括字面量和构造函数定义方式,以及`test()`、`match()`、`search()`和`replace()`等匹配方法。正则表达式由元字符(如`.`、`*`、`[]`)和标志(如`g`、`i`)组成,用于定义搜索模式。文中还分享了正则使用的技巧,如模式分解、非捕获分组和注释。掌握正则表达式能提升文本处理的效率和代码质量。
|
1天前
|
前端开发 JavaScript
实用的JavaScript小技巧
这些JavaScript小技巧可以帮助你更加高效地编写代码,提高代码质量和可读性。
9 1
|
1天前
|
前端开发 JavaScript
写出干净的 JavaScript 5 个小技巧
写出干净的 JavaScript 5 个小技巧
|
1天前
|
存储 JavaScript 前端开发
js的一些小技巧
js的一些小技巧
|
1天前
|
存储 前端开发 JavaScript
几个一看就会的实用JavaScript优雅小技巧
几个一看就会的实用JavaScript优雅小技巧