手把手带你使用策略模式实现表单校验(代码片段)

前端呆头鹅 前端呆头鹅     2022-12-08     176

关键词:

策略模式

文章目录

前言

你的项目有哪些亮点?你对设计模式是否了解?这些都是面试官常问的问题,这两个问题都可以通过本文解决。

毋庸置疑,使用策略模式实现表单校验就是你项目的亮点,也是你掌握设计模式的体现!

一 了解策略模式

很多公司,员工的绩效与年终奖挂钩,假设员工绩效为S时,年终奖为月工资4,员工绩效为A时,年终奖为月工资2。该逻辑代码如下:

var getMonay = function(level, salary) 
  if(level === 'S') 
    return salary * 4
  
  if(level === 'A') 
    return salary * 2
  

console.log(getMonay('S', 1000)) // 4000
console.log(getMonay('A', 1000)) // 2000

策略模式的定义是:定义一系列的算法,将它们封装起来,它们可以相互替换。

策略模式实际上是将算法的使用和算法的实现分离,在算法使用时传入本次使用的算法。感觉有些绕,但是看完这章你就能马上理解。

首先我们将算法的实现和使用分离。

var getMonayS = function(salary) 
  return salary * 4

var getMonayA = function(salary) 
  return salary * 2

var getMonay = function(level, salary) 
  if(level === 'S') 
    return getMonayS(salary)
  
  if(level === 'A') 
    return getMonayA(salary)
  

console.log(getMonay('S', 1000)) // 4000
console.log(getMonay('A', 1000)) // 2000

可以看到在上面的代码中,算法的使用和实现已经分离,其中,getMonay方法为使用函数,getMonayS、getMonayA方法为实现函数。在getMonay方法中根据传入参数的不同调用不同实现函数。

可以看出这样的优化增加了代码复用性,代码也更清晰,但是仍然存在大量if。

策略模式主要由两个类组成:
策略类:封装算法实现 (上文中的getMonayS、getMonayA)
环境类:接受请求 将请求委托给某一个策略类。(上文中的getMonay)

我们将上面的代码以类的方式封装,完全去掉if语句。

var getMonayS = function(salary) 
  return salary * 4

var getMonayA = function(salary) 
  return salary * 2

class getMonay 
  salary = null
  strategy = null
  setSalary(salary) 
    this.salary = salary
  
  setStrategy(strategy) 
    this.strategy = strategy
  
  getBonus() 
    if(!strategy) 
      throw new Error('未设置strategy属性')
    
    return this.strategy(this.salary)
  

var bonusS = new getMonay
bonusS.setStrategy(getMonayS)
bonusS.setSalary(1000)
console.log(bonusS.getBonus())

var bonusA = new getMonay
bonusA.setStrategy(getMonayA)
bonusA.setSalary(1000)
console.log(bonusA.getBonus())

上面的代码实际上就是传入并储存相关变量和策略函数,用来计算结果的思路,JS语言的灵活性让代码可以有更简单的实现方式,去掉代码多余部分,可修改如下。

var getMonay = 
  S(salary) 
    return salary * 4
  ,
  A(salary) 
    return salary * 2
  

var bouns = function(salary, strategy) 
  return getMonay[strategy](salary)

console.log(bouns(1000, 'S'))
console.log(bouns(1000, 'A'))

到此为止,我们实现了一个简单的从充满if-else的代码到策略模式代码的转变,下面我们举一个更为常见的例子,来说明策略模式的用途。

二 实现表单校验

小呆的公司有一段表单校验的代码如下。

var form = 
  userName: '张三',
  password: '0990'

function vaildFun(form) 
  if(form.userName === '') 
    return '用户名不能为空'
  
  if(form.password.length < 6) 
    return '密码长度不能少于6位'
  

console.log(vaildFun(form)) // 密码长度不能少于6位

上面的代码中,类似上文中提到的计算绩效代码,含有多个if语句,我们将其中的逻辑抽象成多个策略函数放在一个对象中。

var strategies = 
  isNonEmpty(value, msg) 
    if(value === '') 
      return msg
    
  ,
  minLength(value, msg) 
    if(value.length < 6) 
      return msg
    
  

现在,我们需要一个方法,可以将Form对象中的value与校验规则联系起来,返回校验结果,使用效果如下。

function vaildFun(form) 
  var validator = new validator
  validator.add('isNonEmpty', form.userName, '用户名不能为空')
  validator.add('minLength:6', form.password, '密码长度不能少于6位')
  console.log(validator.start()) // // 密码长度不能少于6位

现在我们来实现上面代码中使用的validator类,该类中包含一个add方法,可以将Form对象中的value与校验规则联系起来,包含一个start方法,启动校验并返回校验结果。

由于校验信息是在add中存储的,而执行校验是在start中调用的,我们设立一个缓存数组cache来存储校验行为。

class Validator 
  constructor() 
    this.cache = []
  
  add(name, value, msg) 
    this.cache.push(function() 
      return strategies[name](value, msg)
    )
  
  start() 
    for(var i = 0; i < this.cache.length; i ++) 
      var msg = this.cache[i]()
      if(msg) 
        return msg
      
    
  

这样,我们就完成了基于策略模式的表单校验代码优化。

推荐系统手把手带你学推荐系统3实现第一个推荐系统(代码片段)

【推荐系统】手把手带你学推荐系统3实现第一个推荐系统概述基于排名的推荐系统代码实现概述推荐系统(RecommenderSystem)是一个信息过滤系统,在很多领域都有广泛的使用.推荐系统可以为用户提供个性化的产品,挖掘用户的潜在需... 查看详情

解秘java中native方法如何实现:手把手带你实现javanative方法(代码片段)

1、新建Operation.java文件publicclassOperationpublicnativeintadd(inta,intb);2、使用javah生成.h头文件javah-jniOperation生成的Operation.h文件内容:/*DONOTEDITTHISFILE-itismachinegenerated*/#include<jni.h>/*Heade 查看详情

手把手带你使用go-kit(代码片段)

手把手带你使用go-kitgo-kit是什么Gokit是一个微服务工具包集合。利用它提供的额API和规范可以创建健壮、可维护性高的微服务体系Go-kit的三层架构1、Service这里就是我们的业务类、接口等相关信息存放2、EndPoint定义Request、Response... 查看详情

centernet2实战:手把手带你实现使用centernet2训练自定义数据集(代码片段)

1、CenterNet2介绍论文地址:https://arxiv.org/abs/2103.07461GitHub地址:https://github.com/xingyizhou/CenterNet2CenterNet的原作者提出了一个概率性的两阶段检测器,这种解释激发了强大的第一阶段的使用,该阶段学习估计对象可能... 查看详情

手把手带你撸一个网易云音乐首页(下篇)(代码片段)

前言Hello,大家好,今天准备和大家继续分享如何利用Swift来实现一个网易云音乐的首页;上篇文章发布以后,我收获了不少小伙伴的关注与点赞,同时也得到了一些非常有用的建议,在这里再次感谢大家的认可... 查看详情

手把手带你撸一个网易云音乐首页(下篇)(代码片段)

前言Hello,大家好,今天准备和大家继续分享如何利用Swift来实现一个网易云音乐的首页;上篇文章发布以后,我收获了不少小伙伴的关注与点赞,同时也得到了一些非常有用的建议,在这里再次感谢大家的认可... 查看详情

手把手带你玩转spark机器学习-使用spark进行文本处理(代码片段)

系列文章目录手把手带你玩转Spark机器学习-专栏介绍手把手带你玩转Spark机器学习-问题汇总手把手带你玩转Spark机器学习-Spark的安装及使用手把手带你玩转Spark机器学习-使用Spark进行数据处理和数据转换手把手带你玩转Spark机器学... 查看详情

手把手带你实现符合promise/a+规范的promise(代码片段)

文章目录手把手带你实现符合Promise/A+规范的Promise什么是Promise/A+规范?一步步实现自定义Promise构造函数resolve与reject的构建与基础实现throw抛出异常改变状态Promise的状态一旦改变,就不会再变then方法执行回调基础实现异... 查看详情

手把手带你实现符合promise/a+规范的promise(代码片段)

文章目录手把手带你实现符合Promise/A+规范的Promise什么是Promise/A+规范?一步步实现自定义Promise构造函数resolve与reject的构建与基础实现throw抛出异常改变状态Promise的状态一旦改变,就不会再变then方法执行回调基础实现异... 查看详情

手把手带你小程序入门(代码片段)

小程序小程序官网概念作用特点环境准备第一个微信小程序微信开发者工具介绍小程序结构目录小程序配置文件代码编辑器技巧:模板语法注意:总结:小程序官网​https://developers.weixin.qq.com/miniprogram/dev/framework/概念微信小程序(MiniPr... 查看详情

手把手带你搞定c语言实现三子棋游戏,让你的代码有趣起来(超详细教程,从思路到代码,快码起来!)(代码片段)

【手把手带你搞定】C语言实现三子棋游戏什么是三子棋游戏分析代码实现菜单打印井字格创建二维棋盘数组初始化棋盘数组打印棋盘下棋玩家下棋电脑下棋判断结果完整代码总结在学习完函数和数组的基本使用之后,我们应... 查看详情

carson带你学android:手把手带你全面学习补间动画的使用!(代码片段)

...天,我将将献上一份Android补间动画的使用教程,手把手教你使用补间动画。Carson带你学Android动画系列文章:Carson带你学Android:一份全面&详细的动画知识学习攻略Carson带你学Android:常见的三种动画类型Carso... 查看详情

carson带你学android:手把手带你全面学习补间动画的使用!(代码片段)

...天,我将将献上一份Android补间动画的使用教程,手把手教你使用补间动画。Carson带你学Android动画系列文章:Carson带你学Android:一份全面&详细的动画知识学习攻略Carson带你学Android:常见的三种动画类型Carso... 查看详情

carson带你学android:手把手带你全面学习补间动画的使用!(代码片段)

...天,我将将献上一份Android补间动画的使用教程,手把手教你使用补间动画。Carson带你学Android动画系列文章:Carson带你学Android:一份全面&详细的动画知识学习攻略Carson带你学Android:常见的三种动画类型Carso... 查看详情

手把手带你实现第三方应用登录(代码片段)

大家在自己做项目的时候有没有想过实现一个第三方应用登录呢?类似这种:本篇文章就来聊一聊该如何实现第三方应用登录。什么是OAuth2.0OAuth是一项协议,它为用户资源的授权提供了一个安全、开放而简易的标准&#... 查看详情

硬核调试实操|手把手带你实现serverless断点调试(代码片段)

...数计算(FC)应用的断点调试步骤进行详细指导,手把手带你实现Serverless的断点调试,并从以下四个方面为你厘清“硬核调试”的脉络步骤,干货满满。导读:在应用开发过程中,或者开发完成后,若出... 查看详情

策略模式在表单验证中的应用

策略模式在表单验证中的应用最近想要封装一个校验表单的方法,没有什么很优雅的解决思路。今天偶然看到了这篇文章,学到了一种新的设计模式....实现也很容易理解。原文很详细,非常感谢文章的指点原文链接:策略模式... 查看详情

强化学习⚠️手把手带你走进强化学习2⚠️opp算法实现月球登陆器(代码片段)

【强化学习】⚠️手把手带你走进强化学习2⚠️OPP算法实现月球登陆器概述强化学习算法种类PPO算法Actor-Critic算法GymLunarLander-v2启动登陆器PPO算法实现月球登录器PPOmain输出结果概述从今天开始我们会开启一个新的篇章,带领大家... 查看详情