策略模式实现 Vue 动态表单验证的方法


Posted in Javascript onSeptember 16, 2019

策略模式(Strategy Pattern)又称政策模式,其定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换。封装的策略算法一般是独立的,策略模式根据输入来调整采用哪个算法。关键是策略的 实现和使用分离

注意:本文可能用到一些编码技巧比如 IIFE(Immediately Invoked Function Expression, 立即调用函数表达式),ES6 的语法 let/const、箭头函数、rest 参数,短路运算符 等,如果还没接触过可以点击链接稍加学习 ~

1. 你曾见过的策略模式

现在电子产品种类繁多,尺寸多种多样,有时候你会忍不住想拆开看看里面啥样(想想小时候拆的玩具车还有遥控器),但是螺丝规格很多,螺丝刀尺寸也不少,如果每碰到一种规格就买一个螺丝刀,家里就得堆满螺丝刀了。所以现在人们都用多功能的螺丝刀套装,螺丝刀把只需要一个,碰到不同规格的螺丝只要换螺丝刀头就行了,很方便,体积也变小很多。

策略模式实现 Vue 动态表单验证的方法

再举个栗子,一辆车的轮胎有很多规格,在泥泞路段开的多的时候可以用泥地胎,在雪地开得多可以用雪地胎,高速公路上开的多的时候使用高性能轮胎,针对不同使用场景更换不同的轮胎即可,不需更换整个车。

这些都是策略模式的实例,螺丝刀/车属于封装上下文,封装和使用不同的螺丝刀头/轮胎,螺丝刀头/轮胎这里就相当于策略,可以根据需求不同来更换不同的使用策略。

在这些场景中,有以下特点:

螺丝刀头/轮胎(策略)之间相互独立,但又可以相互替换;

螺丝刀/车(封装上下文)可以根据需要的不同选用不同的策略;

2. 实例的代码实现

具体的例子我们用编程上的例子来演示,比较好量化。

场景是这样的,某个电商网站希望举办一个活动,通过打折促销来销售库存物品,有的商品满 100 减 30,有的商品满 200 减 80,有的商品直接8折出售(想起被双十一支配的恐惧),这样的逻辑交给我们,我们要怎样去实现呢。

通过判断输入的折扣类型来计算计算商品总价的方式,几个 if-else 就满足了需求,但是这样的做法的缺点也很明显:

priceCalculate 函数随着折扣类型的增多,  if-else 判断语句会变得越来越臃肿;

如果增加了新的折扣类型或者折扣类型的算法有所改变,那么需要更改  priceCalculate 函数的实现,这是违反开放-封闭原则的;

可复用性差,如果在其他的地方也有类似这样的算法,但规则不一样,上述代码不能复用;

我们可以改造一下,将计算折扣的 算法部分提取出来 保存为一个对象,折扣的 类型作为 key ,这样索引的时候 通过对象的键值索引调用具体的算法

这样 算法的实现和算法的使用就被分开了 ,想添加新的算法也变得十分简单:

如果你希望计算算法隐藏起来,那么可以借助 IIFE 使用闭包的方式,这时需要添加增加策略的入口,以方便扩展:

这样算法就被隐藏起来,并且预留了增加策略的入口,便于扩展。

3. 策略模式的通用实现

根据上面的例子提炼一下策略模式,折扣计算方式可以被认为是策略(Strategy),这些策略之间可以相互替代,而具体折扣的计算过程可以被认为是封装上下文(Context),封装上下文可以根据需要选择不同的策略。

主要有下面几个概念:

Context:封装上下文,根据需要调用需要的策略,屏蔽外界对策略的直接调用,只对外提供一个接口,根据需要调用对应的策略;

Strategy:策略,含有具体的算法,其方法的外观相同,因此可以互相代替;

StrategyMap:所有策略的合集,供封装上下文调用;

结构图如下:

策略模式实现 Vue 动态表单验证的方法

下面使用通用化的方法实现一下。

通用实现看起来似乎比较简单,这里分享一下项目实战。

4. 实战中的策略模式

 4.1 表格 formatter

这里举一个 Vue + ElementUI 项目中用到的例子,其他框架的项目原理也类似,和大家分享一下。

Element 的表格控件的 Column 接受一个 formatter 参数,用来格式化内容,其类型为函数,并且还可以接受几个特定参数,像这样: Function(row,column,cellValue,index)

以文件大小转化为例,后端经常会直接传 bit 单位的文件大小,那么前端需要根据后端的数据,根据需求转化为自己需要的单位的文件大小,比如 KB/MB。

首先实现文件计算的算法:

那么在组件中我们可以直接:

代码实例可以参看 codepen - 策略模式实战

运行结果如下图:

策略模式实现 Vue 动态表单验证的方法

4.2 表单验证

除了表格中的 formatter 之外,策略模式也经常用在表单验证的场景,这里举一个 Vue + ElementUI 项目的例子,其他框架同理。

ElementUI 的 Form 表单 具有表单验证功能,用来校验用户输入的表单内容。实际需求中表单验证项一般会比较复杂,所以需要给每个表单项增加 validator 自定义校验方法。

我们可以像官网示例一样把表单验证都写在组件的状态 data 函数中,但是这样就不好复用使用频率比较高的表单验证方法了,这时我们可以结合策略模式和函数柯里化的知识来重构一下。首先我们在项目的工具模块(一般是 utils 文件夹)实现通用的表单验证方法:

然后在 utils/index.js 中增加一个柯里化方法,用来生成表单验证函数:

上面的 formValidateGene 函数接受两个参数,第一个是验证规则,也就是 src/utils/validates.js 文件中提取出来的通用验证规则的方法名,第二个参数是报错的话表单验证的提示信息。

可以看见在使用的时候非常方便,把表单验证方法提取出来作为策略,使用柯里化方法动态选择表单验证方法,从而对策略灵活运用,大大加快开发效率。

代码实例可以参看 codesandbox - 策略模式表单验证实战

运行结果:

策略模式实现 Vue 动态表单验证的方法

5. 策略模式的优缺点

策略模式将算法的 实现和使用拆分 ,这个特点带来了很多优点:

策略之间相互独立,但 策略可以自由切换 ,这个策略模式的特点给策略模式带来很多灵活性,也提高了策略的复用率;

如果不采用策略模式,那么在选策略时一般会采用多重的条件判断,采用策略模式可以 避免多重条件判断 ,增加可维护性;

可扩展性好,策略可以很方便的进行扩展;

策略模式的缺点:

策略相互独立,因此一些复杂的算法逻辑 无法共享 ,造成一些资源浪费;

如果用户想采用什么策略,必须了解策略的实现,因此 所有策略都需向外暴露 ,这是违背迪米特法则/最少知识原则的,也增加了用户对策略对象的使用成本。

6. 策略模式的适用场景

那么应该在什么场景下使用策略模式呢:

多个算法 只在行为上稍有不同 的场景,这时可以使用策略模式来动态选择算法;

算法 需要自由切换 的场景;

有时 需要多重条件判断 ,那么可以使用策略模式来规避多重条件判断的情况;

7. 其他相关模式

7.1 策略模式和模板方法模式

策略模式和模板方法模式的作用比较类似,但是结构和实现方式有点不一样。

策略模式让我们在程序运行的时候动态地指定要使用的算法;

模板方法模式是在子类定义的时候就已经确定了使用的算法;

7.2 策略模式和享元模式

总结

 以上所述是小编给大家介绍的策略模式实现 Vue 动态表单验证的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
js不完美解决click和dblclick事件冲突问题
Jul 16 Javascript
jquery.cookie() 方法的使用(读取、写入、删除)
Dec 05 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
js创建对象几种方式的优缺点对比
Sep 28 Javascript
微信开发 微信授权详解
Oct 21 Javascript
几行js代码实现自适应
Feb 24 Javascript
Vue Promise的axios请求封装详解
Aug 13 Javascript
一文了解vue-router之hash模式和history模式
May 31 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 #jQuery
Vue实现滑动拼图验证码功能
Sep 15 #Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 #Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 #Javascript
layui使用label标签的方法
Sep 14 #Javascript
使用layui定义一个模块并使用的例子
Sep 14 #Javascript
基于Layui自定义模块的使用方法详解
Sep 14 #Javascript
You might like
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
提高网站性能之 如何对待JavaScript
2009/10/31 Javascript
JS 退出系统并跳转到登录界面的实现代码
2013/06/29 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
详解javascript高级定时器
2015/12/31 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
通过实例学习React中事件节流防抖
2019/06/17 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
JavaScript适配器模式原理与用法实例详解
2020/03/09 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
Python 字符串操作方法大全
2014/03/11 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
一个Python最简单的接口自动化框架
2018/01/02 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
Python类如何定义私有变量
2020/02/03 Python
python scatter函数用法实例详解
2020/02/11 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
西班牙购买行李箱和背包网站:Maletas Greenwich
2019/10/08 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
《问银河》教学反思
2014/02/19 职场文书
小学生期末评语大全
2014/04/21 职场文书
委托书英文
2015/01/28 职场文书
2015年营业员工作总结
2015/04/23 职场文书
客户答谢会致辞
2015/07/30 职场文书