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写法的更多相关文章

  1. 15. 星际争霸之php设计模式--策略模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  2. [.net 面向对象程序设计深入](24)实战设计模式——策略模式(行为型)

    [.net 面向对象程序设计深入](24)实战设计模式——策略模式(行为型) 1,策略模式定义 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模式让算法独立于使用它 ...

  3. linkin大话设计模式--策略模式

    linkin大话设计模式--策略模式 Strategy [ˈstrætədʒi]  策略 策略模式用于封装系列的算法,这些算法通常被封装在一个称为Context的类中,客户端程序可以自由的选择任何一种 ...

  4. [.net 面向对象程序设计深入](26)实战设计模式——策略模式 Strategy (行为型)

    [.net 面向对象程序设计深入](26)实战设计模式——策略模式 Strategy (行为型) 1,策略模式定义 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模 ...

  5. javascript设计模式——策略模式

    前面的话 在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方 ...

  6. 在商城系统中使用设计模式----策略模式之在spring中使用策略模式

    1.前言: 这是策略模式在spring中的使用,对策略模式不了解对同学可以移步在商城中简单对使用策略模式. 2.问题: 在策略模式中,我们创建表示各种策略的对象和一个行为,随着策略对象改变而改变的 c ...

  7. [转]js设计模式-策略模式

    在程序设计中,常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法.这些算法灵活多样,而且可以随意互相替换.这种解决方案就是本文 ...

  8. 设计模式-策略模式(Strategy Model)

    1.概述     在开发过程中常常会遇到类似问题,实现一个功能的时候往往有多种算法/方法(策略),我们可以根据环境的不同来使用不同的算法或策略来实现这一功能.     如在人物比较排序的实现中,我们有 ...

  9. java设计模式 策略模式Strategy

    本章讲述java设计模式中,策略模式相关的知识点. 1.策略模式定义 策略模式,又叫算法簇模式,就是定义了不同的算法族,并且之间可以互相替换,此模式让算法的变化独立于使用算法的客户.策略模式属于对象的 ...

随机推荐

  1. 深入理解Kafka核心设计及原理(五):消息存储

    转载请注明出处:https://www.cnblogs.com/zjdxr-up/p/16127749.html 目录: 5.1文件目录布局 5.2消息压缩 5.3日志索引 5.4日志文件及索引文件分 ...

  2. JavaScript学习总结7-BOM

    今天学习了BOM模型,可以利用其来获得屏幕数据,网页历史,以及网页location等数据

  3. 2021.11.03 P2886 [USACO07NOV]Cow Relays G(矩阵+floyed)

    2021.11.03 P2886 [USACO07NOV]Cow Relays G(矩阵+floyed) [P2886 USACO07NOV]Cow Relays G - 洛谷 | 计算机科学教育新生 ...

  4. docker进阶_dockerswarm

    DockerSwarm Docker Swarm简介 Docker Swarm的功能 ​ Docker Swarm包含两个方面:docker安全集群,以及一个微服务应用引擎 ​ 集群方面,swarm将 ...

  5. Istio实践(3)- 路由控制及多应用部署(netcore&springboot)

    前言:接上一篇istio应用部署及服务间调用,本文介绍通过构建.netcore与springboot简单服务应用,实现服务间调用及相关路由控制等 1..netcore代码介绍及应用部署 新建.netc ...

  6. 设置 Visual Studio 总是以管理员身份运行

    话不多说直接上干货 第一步: 打开 Visual Studio 的安装目录,找到 devenv.exe,然后右键快捷菜单选择"兼容性疑难解答". 第二步: 选择故障排查选项 疑难解 ...

  7. 聊聊如何在华为云IoT平台进行产品开发

    摘要:华为云物联网平台承载着南北向数据互通的功能职责. 本文分享自华为云社区<如何基于华为云IoT物联网平台进行产品开发>,作者: Super.雯 . 华为云物联网平台承载着南北向数据互通 ...

  8. .Net Core Razor动态菜单实现

    准备 1.框架 .netcore  版本 yishaadmin开源框架 2.模板 本文模板使用adminlte3.0,文档地址https://adminlte.io/docs/3.0/ 3.菜单表 关 ...

  9. 【Java分享客栈】SpringBoot线程池参数搜一堆资料还是不会配,我花一天测试换你此生明白。

    一.前言   首先说一句,如果比较忙顺路点进来的,可以先收藏,有时间或用到了再看也行:   我相信很多人会有一个困惑,这个困惑和我之前一样,就是线程池这个玩意儿,感觉很高大上,用起来很fashion, ...

  10. PHP 运行 mkdir() Permission Denied 的原因

    使用lamp,在上传文件时,PHP执行 mkdir($path) ,  出现没有权限的错误. 解决: 本次使用的时yii框架,所以首先确保 是apache的用户对web目录有权限,然后再给此用户加 r ...