设计模式-策略模式前端应用校验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.策略模式定义 策略模式,又叫算法簇模式,就是定义了不同的算法族,并且之间可以互相替换,此模式让算法的变化独立于使用算法的客户.策略模式属于对象的 ...
随机推荐
- 如何使用 python 爬取酷我在线音乐
前言 写这篇博客的初衷是加深自己对网络请求发送和响应的理解,仅供学习使用,请勿用于非法用途!文明爬虫,从我做起.下面进入正题. 获取歌曲信息列表 在酷我的搜索框中输入关键词 aiko,回车之后可以看到 ...
- STL空间配置器源码分析(四)bitmap_allocator
一.摘要 bitmap_allocator是STL空间分配器的其中一种,它采用内存池策略,最多存储64条空闲链表(freelist,实际是一块空间连续的内存区,后面也称为超级块),每条空闲链表存储的内 ...
- JavaWeb项目端口占用问题
今天使用springboot编写项目的时候安装了一个插件,重启了idea,但是项目忘记终止连接了,再打开idea启动项目发现端口被占用 控制台输出: ************************* ...
- redis 知识点收集 注意理解底层
学redis,首先要明白其特性,其次要理解明白redis与操作系统底层的关系,这点很重要.这是一个优秀的学习方法,作为计算机专业,应当时刻想着技术和操作系统计算机组成数据结构的联系,听起来有些书生气死 ...
- HCIE笔记-第六节-CIDR与ICMP
项目部 58人 地址:194.2.3.128 /26 研发部 100人 地址: 194.2.3.0/25 市场部 27人 地址: 194.2.3.192/27 财务部 15人 地址:194.2.3.2 ...
- python基础练习题(题目 模仿静态变量的用法)
day27 --------------------------------------------------------------- 实例041:类的方法与变量 题目 模仿静态变量的用法. 程序 ...
- CentOS下Apache Doris Oracle ODBC外表使用指南
1.软件环境 操作系统:CentOS 7.8 Apache Doris :0.15 Postgresql数据库:oracle 19c UnixODBC:2.3.1 Oracle ODBC :insta ...
- C3P0反序列化链学习
C3P0 c3p0第一次听闻是用于fastjson的回显上,大佬们总结三种方法,后面两种主要就是用于fastjson和jackjson的回显利用(注入内存马) http base jndi hex序列 ...
- vue动态路由实现原理 addRoute
vue新版router.addRoute基础用法 新版Vue Router中用router.addRoute来替代原有的router.addRoutes来动态添加路由.子路由 在添加子路由的时候 比如 ...
- K-MEANS算法【聚类】
可视化 聚类 最简单实用的聚类算法:K-MEANS算法 K值:数据分成几份 质心:簇的中心点 优化目标:K个簇的(每个簇中的每个点距离质心的距离)的和最小 ci中心点,x个别点 工作流程: 设置K值, ...