js前端设计模式优化50%表单校验代码示例


Posted in Javascript onJune 21, 2022

表单校验

背景

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

  • 用户名不能为空
  • 密码长度不能少于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 函数的内部实现,这是违反开放-封闭原则的。
  • 算法的复用性差,如果在项目中增加了另外一个表单,这个表单也需要进行一些类似的校验,我们很可能将这些校验逻辑复制得漫天遍野。

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

策略模式介绍

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

真实世界类比

js前端设计模式优化50%表单校验代码示例

此图源自 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;
		}
	}
}

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

策略模式优缺点

优点:

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

缺点:

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

策略模式适合应用场景

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

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

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

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

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

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

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

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

总结

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

更多关于js前端设计模式优化表单校验的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js 巧妙去除数组中的重复项
Jan 25 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
Sep 12 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
浅谈js函数的多种定义方法与区别
Nov 29 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
微前端qiankun改造日渐庞大的项目教程
Jun 21 #Javascript
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 #Javascript
js前端图片加载异常兜底方案
Jun 21 #Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 #Javascript
js前端面试常见浏览器缓存强缓存及协商缓存实例
Jun 21 #Javascript
JavaScript前端面试组合函数
Jun 21 #Javascript
Vue2项目中对百度地图的封装使用详解
You might like
写一个用户在线显示的程序
2006/10/09 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
windows的文件系统机制引发的PHP路径爆破问题分析
2014/07/28 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
jquery实现直播弹幕效果
2019/11/28 jQuery
Python日期操作学习笔记
2008/10/07 Python
Python文件及目录操作实例详解
2015/06/04 Python
Python读写unicode文件的方法
2015/07/10 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
留学生求职信
2014/06/03 职场文书
2015年党风建设工作总结
2015/04/29 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
党风廉政教育心得体会2016
2016/01/22 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python