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)

相关文章
|
3月前
|
存储 安全 JavaScript
云计算浪潮中的网络安全之舵探索Node.js中的异步编程模式
【8月更文挑战第27天】在数字化时代的风帆下,云计算如同一片广阔的海洋,承载着企业与个人的数据梦想。然而,这片海洋并非总是风平浪静。随着网络攻击的波涛汹涌,如何确保航行的安全成为了每一个船员必须面对的挑战。本文将探索云计算环境下的网络安全策略,从云服务的本质出发,深入信息安全的核心,揭示如何在云海中找到安全的灯塔。
|
13天前
|
前端开发 JavaScript UED
探索JavaScript中的异步编程模式
【10月更文挑战第21天】在数字时代的浪潮中,JavaScript作为一门动态的、解释型的编程语言,以其卓越的灵活性和强大的功能在Web开发领域扮演着举足轻重的角色。本篇文章旨在深入探讨JavaScript中的异步编程模式,揭示其背后的原理和实践方法。通过分析回调函数、Promise对象以及async/await语法糖等关键技术点,我们将一同揭开JavaScript异步编程的神秘面纱,领略其带来的非阻塞I/O操作的魅力。让我们跟随代码的步伐,开启一场关于时间、性能与用户体验的奇妙之旅。
|
29天前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模式
【10月更文挑战第4天】在JavaScript的世界中,异步编程是提升应用性能和用户体验的关键。本文将深入探讨Node.js中异步编程的几种模式,包括回调函数、Promises、async/await,并分享如何有效利用这些模式来构建高性能的后端服务。
|
1月前
|
JavaScript 前端开发 调度
探索Node.js中的异步编程模式
在Node.js的世界里,异步编程是核心。本文将带你深入了解异步编程的精髓,通过代码示例和实际案例分析,我们将一起掌握事件循环、回调函数、Promises以及async/await等关键概念。准备好迎接挑战,让你的Node.js应用飞起来!
|
10天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
18 0
|
1月前
|
JavaScript 前端开发 开发者
探索Node.js中的异步编程模式
【9月更文挑战第33天】在JavaScript的后端领域,Node.js凭借其非阻塞I/O和事件驱动的特性,成为高性能应用的首选平台。本文将深入浅出地探讨Node.js中异步编程的核心概念、Promise对象、Async/Await语法以及它们如何优化后端开发的效率和性能。
25 7
|
2月前
|
JavaScript 前端开发 开发者
探索Node.js中的异步编程模式
【9月更文挑战第15天】在Node.js的世界中,“一切皆异步”不仅是一句口号,更是其设计哲学的核心。本文将带你深入理解Node.js中异步编程的几种主要模式,包括经典的回调函数、强大的Promise对象、以及简洁的async/await结构。我们将通过实例代码来展示每种模式的使用方式和优缺点,帮助你更好地掌握Node.js异步编程的精髓。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启示和思考。让我们一起开启Node.js异步编程的探索之旅吧!
|
2月前
|
JavaScript 前端开发 中间件
深入浅出Node.js中间件模式
【9月更文挑战第13天】本文将带你领略Node.js中间件模式的魅力,从概念到实战,一步步揭示如何利用这一强大工具简化和增强你的Web应用。我们将通过实际代码示例,展示中间件如何在不修改原有代码的情况下,为请求处理流程添加功能层。无论你是前端还是后端开发者,这篇文章都将为你打开一扇通往更高效、更可维护代码的大门。
|
3月前
|
设计模式 JavaScript 前端开发
Vue.js组件设计模式:构建可复用组件库
在Vue.js中,构建可复用组件库是提升代码质量和维护性的核心策略。采用单文件组件(SFC),定义props及默认值,利用自定义事件和插槽进行灵活通信,结合Vuex或Pinia的状态管理,以及高阶组件技术,可以增强组件的功能性和灵活性。通过合理的抽象封装、考虑组件的可配置性和扩展性,并辅以详尽的文档和充分的测试,能够打造出既高效又可靠的组件库。此外,采用懒加载、按需导入技术优化性能,制定设计系统和风格指南确保一致性,配合版本控制、CI/CD流程和代码审查机制,最终形成一个高品质、易维护且具有良好社区支持的组件库。
65 7
|
3月前
|
设计模式 JavaScript 前端开发
Vue.js 组件设计模式:在前端热潮中找到归属感,打造可复用组件库,开启高效开发之旅!
【8月更文挑战第22天】Vue.js 以其高效构建单页应用著称,更可通过精良的组件设计打造可复用组件库。组件应职责单一、边界清晰,如一个显示文本并触发事件的按钮组件,通过 props 传递标签文本,利用插槽增强灵活性,允许父组件注入动态内容。结合 CSS 预处理器管理和封装独立模块,配以详尽文档,有效提升开发效率及代码可维护性。合理设计模式下,组件库既灵活又强大,持续实践可优化项目工作流。
49 1