专栏首页Vue中文社区用了这个设计模式,我优化了50%表单校验代码

用了这个设计模式,我优化了50%表单校验代码

背景

假设我们正在编写一个注册页面,在点击注册按钮之时,有如下几条校验逻辑:

  • 用户名不能为空
  • 密码长度不能少于6位
  • 手机号码必须符合格式

常规写法:

const form = document.getElementById('registerForm');

form.onsubmit = function () {
  if (form.userName.value === '') {
    alert('用户名不能为空');
    return false;
  }

  if (form.password.value.length < 6) {
    alert('密码长度不能少于6位');
    return false;
  }

  if (!/^1[3|5|8][0-9]{9}$/.test(form.phoneNumber.value)) {
    alert('手机号码格式不正确');
    return false;
  }

  ...
}
复制代码

这是一种很常见的代码编写方式,但它有许多缺点:

  • onsubmit 函数比较庞大,包含了很多 if-else 语句,这些语句需要覆盖所有的校验规则。
  • onsubmit 函数缺乏弹性,如果增加了一种新的校验规则,或者想把密码的长度从6改成8,我们都必须深入 obsubmit 函数的内部实现,这是违反开放-封闭原则的。
  • 算法的复用性差,如果在项目中增加了另外一个表单,这个表单也需要进行一些类似的校验,我们很可能将这些校验逻辑复制得漫天遍野。

如何避免上述缺陷,更优雅地实现表单校验呢?

策略模式介绍

💡 策略模式是一种行为设计模式, 它能让你定义一系列算法, 把它们一个个封装起来, 并使它们可以相互替换。

真实世界类比

此图源自 refactoringguru.cn/design-patt…

假如你需要前往机场。你可以选择骑自行车、乘坐大巴或搭出租车。这三种出行策略就是广义上的“算法”,它们都能让你从家里出发到机场。你无需深入它们的内部实现细节,如怎么开大巴、公路系统如何确保你家到机场有通路等。你只需要了解这些策略的各自特点:所需要花费的时间与金钱,你就可以根据预算和时间等因素来选择其中一种策略。

更广义的“算法”

在实际开发中,我们通常会把算法的含义扩散开来,使策略模式也可以用来封装一系列的“业务规则”。只要这些业务规则指向的目标一致,并且可以被替换使用,我们就可以用策略模式来封装它们。

策略模式的组成

一个策略模式至少由两部分组成。

第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程。

第二个部分是环境类 Context,Context 接受客户的请求,随后把请求委托给某一个策略类。

利用策略模式改写

定义规则(策略),封装表单校验逻辑:

const strategies = {
  isNonEmpty: function (value, errMsg) {
    if (value === '') {
      return errMsg;
    }
  },
  minLenth: function (value, length, errMsg) {
    if (value.length < length) {
      return errMsg;
    }
  },
  isMobile: function (value, errMsg) {
    if (!/^1[3|5|8][0-9]{9}$/.test(value)) {
      return errMsg;
    }
  }
}
复制代码

定义环境类 Context,进行表单校验,调用策略:

form.onsubmit = function () {
 const validator = new Validator();
 validator.add(form.userName, 'isNonEmpty', '用户名不能为空');
 validator.add(form.password, 'minLength:6', '密码长度不能少于6位');
 validator.add(form.phoneNumber, 'isMobile', '手机号码格式不正确');
 const errMsg = validator.start();
 if (errMsg) {
  alert(errMsg);
  return false;
 }
}
复制代码

Validator 类代码如下:

class Validator {
 constructor() {
  this.cache = [];
 }

 add(dom, rule, errMsg) {
  const arr = rule.split(':');
  this.cache.push(() => {
   const strategy = arr.shift();
   arr.unshift(dom.value);
   arr.push(errMsg);
   return strategies[strategy].apply(dom, arr);
  })
 }

 start() {
  for (let i = 0; i < this.cache.length; i++) {
   const msg = this.cache[i]();
   if (msg) return msg;
  }
 }
}
复制代码

使用策略模式重构代码之后,我们消除了原程序中大片的条件分支语句。我们仅仅通过“配置”的方式就可以完成一个表单校验,这些校验规则也能在程序中任何地方复用,还能作为插件的形式,方便地移植到其他项目中。

策略模式优缺点

优点:

  1. 可以有效地避免多重条件选择语句。
  2. 开放-封闭原则完美支持,将算法封装在独立的 strategy 中,使得它们易于切换,易于理解,易于扩展。
  3. 可以使算法复用在系统的其他地方,避免许多重复的复制粘贴工作。

缺点:

  1. 使用策略模式会在程序中增加许多策略类或策略对象
  2. 要使用策略模式,必须了解所有的 strategy,了解它们的不同点,我们才能选择一个合适的 strategy。这是违反最少知识原则的。

策略模式适合应用场景

💡 当你想使用对象中各种不同的算法变体, 并希望能在运行时切换算法时, 可使用策略模式。

策略模式让你能够将对象关联至可以不同方式执行特定子任务的不同子对象, 从而以间接方式在运行时更改对象行为。

💡 当你有许多仅在执行某些行为时略有不同的相似类时, 可使用策略模式。

策略模式让你能将不同行为抽取到一个独立类层次结构中, 并将原始类组合成同一个, 从而减少重复代码。

💡 如果算法在上下文的逻辑中不是特别重要, 使用该模式能将类的业务逻辑与其算法实现细节隔离开来。

策略模式让你能将各种算法的代码、 内部数据和依赖关系与其他代码隔离开来。不同客户端可通过一个简单接口执行算法, 并能在运行时进行切换。

💡 当类中使用了复杂条件运算符以在同一算法的不同变体中切换时, 可使用该模式。

策略模式将所有继承自同样接口的算法抽取到独立类中, 因此不再需要条件语句。原始对象并不实现所有算法的变体, 而是将执行工作委派给其中的一个独立算法对象。

总结

在上述例子中,使用策略模式虽然使得程序中多了许多策略对象和执行策略的代码。但这些代码可以在应用中任意位置的表单复用,使得整个程序代码量大幅减少,且易维护。下次面对多表单校验的需求时,别再傻傻写一堆 if-else 逻辑啦,快试试策略模式!

引用资料

  • 深入设计模式——策略模式
  • 《JavaScript 设计模式与开发实践》——曾探
文章分享自微信公众号:
Vue中文社区

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

原始发表时间:2022-03-23
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 大道至简-GO语言最佳实践

    2007年,受够了C++煎熬的Google首席软件工程师Rob Pike纠集Robert Griesemer和Ken Thompson两位牛人,决定创造一种新语...

    嘉为蓝鲸
  • React form 表单组件的解决方案

    一直以来,表单对于前端来说都是一个不得不面对的坑。而对于设计一个表单组件来说,主要需要考虑以下三点:

    IMWeb前端团队
  • JavaScript设计模式之策略模式

    为达到一个目的做事情的方法有很多种,比如做工资表,需要计算码农,美工,需求三个人的工资。这时候如果是一个靠谱的人事,一定会有这样一个表:

    一粒小麦
  • 框架源码中用来提高扩展性的设计模式

    我们写的代码都是为了一定的需求服务的,但是这些需求并不是一成不变的,当需求变更了,如果我们代码的扩展性很好,我们可能只需要简单的添加或者删除模块就行了,如果扩展...

    蒋鹏飞
  • Python编写数据库连接工具

    前段时间写过一个数据库暴力破解的工具,使用了一个28G的大字典,最后还是以失败告终。当然这个也是自己写着娱乐的。并没有发布出来。通过测试来看,破解数据库密码还是...

    申霖
  • 探索两种优雅的表单验证

    用户1203875
  • 3分钟短文:十年窖藏,Laravel告诉你表单验证的“正确姿势”

    上一章我讲到了使用FormBuilder让后端开发者快速构建前端表单页面,而为了示例,

    程序员小助手
  • SSM的简介

    Springmvc的优点 (1)Spring MVC中提供一个DispatcherServlet, 无需额外开发。 (2)springMVC中使用基于xml...

    全栈程序员站长
  • JeecgBoot 3.2.0 版本发布,基于代码生成器的企业级低代码平台

    JEECG
  • ❤️使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)❤️

    你可以观看现场演示以了解它是如何工作的。如果你想使用 HTML 和 CSS 代码创建玻璃态登录表单,请按照以下教程进行操作。

    海拥
  • 一文让你知道为什么学了PHP的都要转学Go语言[通俗易懂]

    很多人将GO语言称为21世纪的C语言,因为GO不仅拥有C的简洁和性能,而且还很好的提供了21世纪互联网环境下服务端开发的各种实用特性,让开发者在语言级别就可以方...

    全栈程序员站长
  • 案例 | 卡马吉他:用麦客,更科学地经营!

    大家好,我是来自卡马吉他的权东源。卡马吉他是一家执着于音色和工艺的吉他制造商,以“生命不息,折腾不止”的态度去做超棒的吉他。作为一家传统制造企业,我们努力改变去...

    麦客CRM
  • 大道至简—GO语言最佳实践

    被称为GO语言之父的Rob Pike说,你是否同意GO语言,取决于你是认可少就是多,还是少就是少。

    腾讯技术工程官方号
  • 低代码平台,JeecgBoot v3.0版本发布—新里程牌开始,迎接VUE3版本到来

    JEECG
  • 新生代农民工需要懂的策略设计模式

    代码里写了约 30 个 if else 逻辑,从程序语义以及程序效率理论上是会有一定的影响,最主要的是可能会被其他“新生代农民工”嘲笑

    小东同学
  • 最熟悉的陌生人 rc-form

    我们也许会经常使用例如 Ant Design、Element UI、Vant 等第三方组件库来快速在项目中完成页面的布局效果和简单的交互功能。

    政采云前端团队

扫码关注腾讯云开发者

领取腾讯云代金券