js策略模式及应用-表单验证

最新推荐文章于 2024-02-29 09:00:53 发布
最新推荐文章于 2024-02-29 09:00:53 发布
阅读量205 收藏
点赞数
分类专栏： javascript 文章标签： javascript 设计模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyw3390199/article/details/118637868
版权

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可以这样写：

var pS = function() {}
pS.prototype.calculate = function(salary) {
  return salary * 4
}

var pA = function() {}
pA.prototype.calculate = function(salary) {
  return salary * 3
}

var pB = function() {}
pB.prototype.calculate = function(salary) {
  return salary * 2
}

var Bonus = function() {
  this.salary = null // 初始薪水
  this.strategy = null // 绩效等级的策略对象
}
Bonus.prototype.setSalary = function(salary) {
  this.salary = salary
}
Bonus.prototype.setStrategy = function(strategy) {
  this.strategy = strategy
}
Bonus.prototype.getBonus = function() {
  return this.strategy.calculate(this.salary)
}

var bonus = new Bonus()
bonus.setSalary(10000)
bonus.setStrategy(new pS())
console.log(bonus.getBonus())

由于在js中，函数也是对象，所以还可以简写成这样：

var strategies = {
  'S': function(salary) {
    return salary * 4
  },
  'A': function(salary) {
    return salary * 3
  },
  'B': function(salary) {
    return salary * 2
  },
}

var getBonus = function(level, salary) {
  return strategies[level](salary)
}

console.log(getBonus('S', 10000))

在这里插入图片描述

我们接着通过写一个表单验证功能来体会一下策略模式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>js策略模式2</title>
</head>
<body>
	<form action="www.google.co.uk" method="post" id="registerForm">
		Username: <input type="text" name="username">
		Password: <input type="password" name="password">
		Phone: <input type="text" name="phoneNumber">
		<button>Submit</button>
	</form>
	<script type="text/javascript">
		var registerForm = document.getElementById('registerForm')
		registerForm.onsubmit = function () {
			if (registerForm.username.value === '') {
				alert('username required!')
				return false
			}
			if (registerForm.password.value.length < 6) {
				alert('password length less than 6 not allowed')
				return false
			}
			if (!/^1[3|5|7|8][0-9]{9}$/.test(registerForm.phoneNumber.value)) {
				alert('phone number not valid')
				return false
			}
		}
	</script>
</body>
</html>
上述代码可以完成功能，但是不够优雅，并且可扩展性不强，我们下面用策略模式来改造一下：
1.首先要有策略对象：
// 1.策略对象 一系列算法一系列业务逻辑
var strategies = {
  isNotEmpty: function(value, errMsg) {
    if (value == '') {
      return errMsg
    }
  },
  minLength: function(value, length, errMsg) {
    if (value.length <= 6) {
      return errMsg
    }
  },
  isMobile: function(value, errMsg) {
    if (!/^1[3|5|7|8][0-9]{9}$/.test(value)) {
      return errMsg
    }
  }
}
我们假设现在有一个封装好的验证类Validator（其实还没有，我们现在先假设有:
var registerForm = document.getElementById('registerForm')
// 验证方法
var validateFun = function() {
  var validator = new Validator()
  // 添加验证规则
  validator.add(registerForm.username, 'isNotEmpty', 'username is required!')
  validator.add(registerForm.password, 'minLength:6', 'password length less than 6 not allowed!')
  validator.add(registerForm.phoneNumber, 'isMobile', 'phone number not valid!')
  // 开启验证
  var errMsg = validator.start()
  return errMsg
}

registerForm.onsubmit = function() {
  var errMsg = validateFun()
  if (errMsg) {
    alert(errMsg)
    return false
  }
}
我们封装一个验证器对象：
// 2. 封装验证器对象
var Validator = function() {
  // 保存验证规则的数组
  this.cache = []
}
Validator.prototype.add = function(dom, rule, errMsg) {
  var array = rule.split(':')
  this.cache.push(function() {
    // 取出验证规则
    var strategy = array.shift()
    array.unshift(dom.value)
    array.push(errMsg)
    return strategies[strategy].apply(null, array)
    // return strategies[strategy](...array) es6写法 也可以
  })
}

Validator.prototype.start = function() {
  for (var i = 0, vaFunc; vaFunc = this.cache[i++];) {
    var msg = vaFunc()
    if (msg) {
      return msg
    }
  }
}

在这里插入图片描述

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>js策略模式2</title>
</head>
<body>
	<form action="www.google.co.uk" method="post" id="registerForm">
		Username: <input type="text" name="username">
		Password: <input type="password" name="password">
		Phone: <input type="text" name="phoneNumber">
		<button>Submit</button>
	</form>
	<script type="text/javascript">
		var registerForm = document.getElementById('registerForm')
		// 1.策略对象 一系列算法一系列业务逻辑
		var strategies = {
			isNotEmpty: function (value, errMsg) {
				if (value == '') {
					return errMsg
				}
			},
			minLength: function (value, length, errMsg) {
				if (value.length <= 6) {
					return errMsg
				}
			},
			isMobile: function (value, errMsg) {
				if (!/^1[3|5|7|8][0-9]{9}$/.test(value)) {
					return errMsg
				}
			}
		}

		// 2. 封装验证器对象
		var Validator = function () {
			// 保存验证规则的数组
			this.cache = []
		}

		Validator.prototype.add = function (dom, rule, errMsg) {
			var array = rule.split(':')
			this.cache.push(function () {
				// 取出验证规则
				var strategy = array.shift()
				array.unshift(dom.value)
				array.push(errMsg)
				// return strategies[strategy].apply(null, array)
				return strategies[strategy](...array) // es6写法 也可以
			})
		}

		Validator.prototype.start = function () {
			for (var i=0, vaFunc; vaFunc = this.cache[i++];) {
				var msg = vaFunc()
				if (msg) {
					return msg
				}
			}
		}

		// 验证方法
		var validateFun = function () {
			var validator = new Validator()
			// 添加验证规则
			validator.add(registerForm.username, 'isNotEmpty', 'username is required!')
			validator.add(registerForm.password, 'minLength:6', 'password length less than 6 not allowed!')
			validator.add(registerForm.phoneNumber, 'isMobile', 'phone number not valid!')
			// 开启验证
			var errMsg = validator.start()
			return errMsg
		}

		registerForm.onsubmit = function () {
			var errMsg = validateFun()
			if (errMsg) {
				alert(errMsg)
				return false
			}
		}
	</script>
</body>
</html>
Akimoto Hiroshi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js代码-设计模式之策略模式--表单验证方法
07-14
在这个“js代码-设计模式之策略模式--表单验证方法”的项目中，我们看到策略模式被应用在了表单验证这个具体场景中。 策略模式的主要思想是定义一系列的算法，并将每个算法封装起来，使它们可以互相替换。这使得...
JS策略模式
weixin_45523520的博客
03-20 1663
策略模式是一种常用的设计模式，它可以使代码更加灵活、可复用，并且有利于可以在运行时动态地改变代码的行为。在 JavaScript 中，我们可以通过函数来实现策略模式。策略模式的核心思想是将相似的行为封装为一个类，并将该类的调用暴露给外部。由于每个类都包含一个不同的行为，因此我们可以在运行时根据需要选择适当的类实例。总体来讲，策略模式可以使代码更加灵活、可维护，并且使我们可以在运行时根据需求选择不同的代码实现。在实际开发中，如果遇到类似多重条件判断的问题，我们可以使用策略模式来简化代码并使其更加易于扩展。
js设计模式之策略模式
SK_study的博客
01-10 6576
深入学习实际开发设计思想，提升代码质量
JavaScript 设计模式——策略模式
Starry_Firmament的博客
12-29 2042
是一种行为设计模式，能让我们定义一系列算法，并将每种算法分别放入独立的类中，以使算法的对象能够相互替换。
js设计模式——策略模式
梦是太匆
04-07 1025
定义：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。目的：将算法的使用和算法的实现分离开来。
JavaScript策略模式
橘猫吃不胖的博客
09-18 602
JavaScript策略模式 1 什么是策略模式 2 实现一个基础的策略模式 3 Javascript中策略模式 4 使用策略模式实现缓动动画 5 使用策略模式实现表单校验
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
11-21
本文通过一个实例深入探讨如何使用策略模式实现JS表单验证插件的数据与逻辑分离，提高代码的可读性、可维护性和扩展性。 首先，我们要理解数据与逻辑分离的重要性。传统的表单验证中，业务逻辑和数据处理往往交织在...
JavaScript设计模式之策略模式实例
10-25
在标题和描述中提到的jQuery的`animate`方法就是一个典型的策略模式应用案例。 jQuery的`animate`方法允许我们在执行动画时选择不同的缓动函数，如`linear`和`cubic`。这些缓动函数可以理解为不同的策略，它们封装...
学习JavaScript设计模式之策略模式
11-24
《JavaScript设计模式之策略模式详解》 在软件开发中，设计模式是一种被广泛接受的解决方案模板，用于解决特定场景下的常见问题。策略模式是其中的一种，它的核心思想是将算法族封装在独立的策略类中，使得算法的...
js策略模式
sysuzhyupeng的博客
04-03 1259
简介在程序设计中，我们经常遇到类似的情况，要实现某一个功能有多种方案可以选择，比如一个压缩文件的程序，既可以选择zip算法，也可以使用gzip算法。策略模式的定义是：定义一系列的算法，把它们一个一个封装起来，并且使它们可以相互替换。使用策略模式计算奖金需求为绩效S的人4倍奖金，绩效为A的人3倍奖金，绩效为B的人年终奖是2倍工资。 var caculateBonus = function(perfo
JavaScript中的策略模式
m0_75198698的博客
04-26 356
然后我们定义了一个`Calculator`类，它接受一个策略对象作为参数，并且包含一个`execute()`方法，用于调用策略对象的`execute()`方法。上面的代码中，我们首先创建了一个 `Validator` 对象，并添加了两种验证策略：`isRequired` 和 `isMaxLen(10)`。首先，我们定义一个 `Validator` 类作为策略的容器，它会将各种验证策略存储在内部的数组中，并提供一个 `validate` 方法，来调用各种策略进行验证。接下来，我们定义各种验证策略。
JavaScript设计模式-策略模式
前端御书房
01-06 772
策略模式是指定义一系列算法，将这些算法一个个封装起来。一个基于策略模式的程序主要分为两部分，一部分是策略类，主要负责具体实现，另一部分是环境类，接收请求并将请求分配给某一个策略类 示例：计算年终奖 案例描述：员工的表现评级分为A、B、C，A级奖金为5倍工资，B级奖金为4倍工资，C级奖金为3倍工资。 // A级表现的计算薪水算法（策略） function PerformanceA() {} PerformanceA.prototype.calculate = function (salary) {.
策略模式（js）
小白目的博客
08-17 848
设计模式是软件工程的基石, 为了代码可重用性、让代码更容易被他人理解、保证代码可靠性, 设计模式使代码编写真正工程化。
js 设计模式之策略模式
ili_ii的博客
01-30 147
js 设计模式之策略模式
js 策略模式实现大规模表单验证
CodingNoob
11-25 371
我们在做页面开发的时候有时候会遇到一些比较多的表单页面，比如个人信息，企业信息，设备信息等，里面都是包含很多的字段，每个字段需要校验的规则其实是不一样的，这样我们在提交表单的时候页面要做校验工能怎么办呢？维护起来是不是很头疼？原理就是将校验的方法抽离出来成为一个公共维护的对象，将对应的规则属性名跟对应数据的属性名相关联在一起，通过校验规则中的type 字段去找到对应检验规则方法，通过校验方法会返回对应的标识，不通过则会给出对应规则配置的错误提示语。整体代码：（ps: 用vue写的组件）
【Javascript】设计模式之策略模式
最新发布
zhenshu_guo的博客
02-29 1098
策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。
js设计模式一之策略模式（通俗易懂实战）
m0_56895352的博客
02-26 328
if (!//ctrl+b隐藏侧边树状资源这里使用的是vue3，在挂载钩子和卸载钩子中进行处理});});在js中策略模式主要通过一个字典映射来构建对分支策略的处理，再通过一个通用的函数来调用获取反馈，相当于是通过对象的多态性来消除了if-else，只是js中通过函数的方式来处理，这个模式在平时的编码也非常实用。
JavaScript设计模式之“策略模式”（一）
weixin_46886227的博客
07-27 308
在实现JavaScript版本之前，仔细理解这段代码，很容易观察到，在传统面向对象语言中，为什么不讲这些个策略类封装成一个对象呢，因为传统面向对象语言创建较为繁琐，还需要先创建一个构造类再来创建对象封装策略类，那么熟悉JavaScript的小伙伴就清楚了，在JavaScript中我们直接很容易的就能创建一个空对象，然后用键值对封装每个每个策略类，所以，我们直接上代码，看起来比传统代码清晰多了。这段话就很好的诠释了什么是策略模式，就是对于一个问题，我们可以提供多种手段去解决，而且最终的结果都是期望的结果。..
js 策略模式
qq_37130872的博客
02-17 869
js 的策略模式应用
js中设计模式策略模式
09-03
策略模式在JavaScript中有很多实际运用，其中两个主要的应用场景是实现动画效果和表单验证。通过使用策略模式，我们可以轻松地切换不同的动画效果，同时可以根据不同的验证规则来验证表单数据的有效性。 在实际的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值