设计模式-策略模式前端应用校验vue写法
1、定义:定义一系列算法,把它们一个个封装起来,并且它们可以相互替换
2、实际应用:减少if else的使用,在有多种算法相似的情况下,使用 if…else 所带来的复杂和难以维护,提高维护和可读性,具备扩展性
使用案例
优化前写法
if (this.code.length != 16) {
if (this.code.length == 0) {
Toast({
message: '请输入兑换码或者选择扫描兑换码',
position: 'middle',
duration: 3000
})
return false
} else {
Toast({
message: '请输入正确的兑换码',
position: 'middle',
duration: 1500
})
}
} else if (!validateMobile(this.userTel)) {
Toast({
message: '请输入正确的手机号',
position: 'middle',
duration: 1500
})
} else if (this.codeVal.length == 0) {
Toast({
message: '请输入短信验证码',
position: 'middle',
duration: 1500
})
} else if (this.codeVal.length < 4) {
Toast({
message: '请输入正确的短信验证码',
position: 'middle',
duration: 1500
})
}
优化后的写法-采用策论模式+构造函数
我是建一个check.js文件,具体页面引用import { validateCodeFunc } from '@/assets/js/check'
第一步把所有的策略封装起来
const strategys = {
// 空检验
isNotEmpty: (value, errorMsg) => {
if (value === '') return errorMsg
},
// 16位数字code
codeLength: (value, errorMsg) => {
if (!/^\d{16}$/.test(value)) return errorMsg
},
// 4位验证码
verificationCodeLength: (value, length, errorMsg) => {
if (value.length != length) return errorMsg
},
// 手机号
mobileFormat: (value, errorMsg) => {
if (!/^1[3456789]\d{9}$/.test(value)) return errorMsg
}
}
第二步创建调用策略的环境,需要使用那种策略
export function Validator() {
this.cache = [] // 保存效验规则
}
Validator.prototype.add = function(value, rule, errorMsg) {
var str = rule.split(':') // str 返回的是 [verificationCodeLength,4]
this.cache.push(function() {
var strategy = str.shift()// 方法名
str.unshift(value) // value添加进参数列表
str.push(errorMsg) // 把errorMsg添加进参数列表
return strategys[strategy].apply(value, str)
})
}
Validator.prototype.start = function() {
for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
var msg = validatorFunc() // 开始效验 并取得效验后的返回信息
if (msg) {
return msg
}
}
}
第三步最后创建一个Validator实例,在具体页面调用即可
export function validateMobileFunc(params) {
const validator = new Validator()
validator.add(params.userTel, 'isNotEmpty', '请输入手机号')
validator.add(params.userTel, 'mobileFormat', '请输入正确格式的手机号')
validator.add(params.codeVal, 'isNotEmpty', '请输入验证码')
validator.add(params.codeVal, 'verificationCodeLength:4', '请输入正确格式的验证码')
var errorMsg = validator.start()
return errorMsg
}
设计模式-策略模式前端应用校验vue写法的更多相关文章
- 15. 星际争霸之php设计模式--策略模式
题记==============================================================================本php设计模式专辑来源于博客(jymo ...
- [.net 面向对象程序设计深入](24)实战设计模式——策略模式(行为型)
[.net 面向对象程序设计深入](24)实战设计模式——策略模式(行为型) 1,策略模式定义 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它 ...
- linkin大话设计模式--策略模式
linkin大话设计模式--策略模式 Strategy [ˈstrætədʒi] 策略 策略模式用于封装系列的算法,这些算法通常被封装在一个称为Context的类中,客户端程序可以自由的选择任何一种 ...
- [.net 面向对象程序设计深入](26)实战设计模式——策略模式 Strategy (行为型)
[.net 面向对象程序设计深入](26)实战设计模式——策略模式 Strategy (行为型) 1,策略模式定义 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模 ...
- javascript设计模式——策略模式
前面的话 在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方 ...
- 在商城系统中使用设计模式----策略模式之在spring中使用策略模式
1.前言: 这是策略模式在spring中的使用,对策略模式不了解对同学可以移步在商城中简单对使用策略模式. 2.问题: 在策略模式中,我们创建表示各种策略的对象和一个行为,随着策略对象改变而改变的 c ...
- [转]js设计模式-策略模式
在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方案就是本文 ...
- 设计模式-策略模式(Strategy Model)
1.概述 在开发过程中常常会遇到类似问题,实现一个功能的时候往往有多种算法/方法(策略),我们可以根据环境的不同来使用不同的算法或策略来实现这一功能. 如在人物比较排序的实现中,我们有 ...
- java设计模式 策略模式Strategy
本章讲述java设计模式中,策略模式相关的知识点. 1.策略模式定义 策略模式,又叫算法簇模式,就是定义了不同的算法族,并且之间可以互相替换,此模式让算法的变化独立于使用算法的客户.策略模式属于对象的 ...
随机推荐
- 深入理解Kafka核心设计及原理(五):消息存储
转载请注明出处:https://www.cnblogs.com/zjdxr-up/p/16127749.html 目录: 5.1文件目录布局 5.2消息压缩 5.3日志索引 5.4日志文件及索引文件分 ...
- JavaScript学习总结7-BOM
今天学习了BOM模型,可以利用其来获得屏幕数据,网页历史,以及网页location等数据
- 2021.11.03 P2886 [USACO07NOV]Cow Relays G(矩阵+floyed)
2021.11.03 P2886 [USACO07NOV]Cow Relays G(矩阵+floyed) [P2886 USACO07NOV]Cow Relays G - 洛谷 | 计算机科学教育新生 ...
- docker进阶_dockerswarm
DockerSwarm Docker Swarm简介 Docker Swarm的功能 Docker Swarm包含两个方面:docker安全集群,以及一个微服务应用引擎 集群方面,swarm将 ...
- Istio实践(3)- 路由控制及多应用部署(netcore&springboot)
前言:接上一篇istio应用部署及服务间调用,本文介绍通过构建.netcore与springboot简单服务应用,实现服务间调用及相关路由控制等 1..netcore代码介绍及应用部署 新建.netc ...
- 设置 Visual Studio 总是以管理员身份运行
话不多说直接上干货 第一步: 打开 Visual Studio 的安装目录,找到 devenv.exe,然后右键快捷菜单选择"兼容性疑难解答". 第二步: 选择故障排查选项 疑难解 ...
- 聊聊如何在华为云IoT平台进行产品开发
摘要:华为云物联网平台承载着南北向数据互通的功能职责. 本文分享自华为云社区<如何基于华为云IoT物联网平台进行产品开发>,作者: Super.雯 . 华为云物联网平台承载着南北向数据互通 ...
- .Net Core Razor动态菜单实现
准备 1.框架 .netcore 版本 yishaadmin开源框架 2.模板 本文模板使用adminlte3.0,文档地址https://adminlte.io/docs/3.0/ 3.菜单表 关 ...
- 【Java分享客栈】SpringBoot线程池参数搜一堆资料还是不会配,我花一天测试换你此生明白。
一.前言 首先说一句,如果比较忙顺路点进来的,可以先收藏,有时间或用到了再看也行: 我相信很多人会有一个困惑,这个困惑和我之前一样,就是线程池这个玩意儿,感觉很高大上,用起来很fashion, ...
- PHP 运行 mkdir() Permission Denied 的原因
使用lamp,在上传文件时,PHP执行 mkdir($path) , 出现没有权限的错误. 解决: 本次使用的时yii框架,所以首先确保 是apache的用户对web目录有权限,然后再给此用户加 r ...