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

策略模式(Strategy Pattern)，也称为策略模式，定义一系列算法，逐个封装，使其可替换。封装的策略算法一般是独立的，策略模式根据输入调整采用哪种算法。关键是将政策的实施和使用分开。

注意：本文可能会用到一些编码技术，比如IIFE(立即调用函数表达式)、ES6语法let/const、箭头函数、rest参数、短路运算符等。没接触过的可以点击链接了解一点~

1.你所看到的战略模式

如今，各种尺寸的电子产品种类繁多。有时候忍不住想打开看看是什么样子(想想小时候拆过的玩具车和遥控器)，但是螺丝和螺丝刀的尺寸有很多。如果每次遇到一定尺寸就买一把螺丝刀，家里就会堆满螺丝刀。所以现在人们使用多功能螺丝刀套装，只需要一个螺丝刀手柄，遇到不同规格的螺丝时，只需要更换螺丝刀头，既方便又小很多。

例如，栗子有许多汽车轮胎的规格。泥地多路可以用泥地轮胎，雪地多路可以用雪地轮胎，多路可以用高性能轮胎。不同的轮胎可以针对不同的使用场景进行更换，无需更换整车。

这些都是策略模式的例子。螺丝刀/汽车属于包装语境，不同的螺丝刀刀头/轮胎包装使用。螺丝刀头/轮胎在这里等同于策略，可以根据不同的需求更换不同的使用策略。

在这些场景中，有以下特征：

螺丝刀头/轮胎(策略)相互独立，但可以相互替换；

螺丝刀/推车(包装语境)可以根据不同的需求选择不同的策略；

2.实例的代码实现

我们用编程例子来演示具体的例子，很容易量化。

场景是这样的。一个电子商务网站想举办一个活动，通过打折促销来销售库存商品。有的货100多减30，有的货200多减80，有的货直接八折卖(想到怕被双十一支配)。让我们有这个逻辑。我们如何实现它？

通过判断输入折扣类型来计算商品的总价，几种if-else可以满足需求，但这种方法的缺点也很明显：

随着折扣类型的增加，if-else判断语句会越来越臃肿；

如果增加了新的折扣类型或者折扣类型的算法发生了变化，就需要改变priceCalculate函数的实现方式，违反了开闭原则；

可重用性差。如果其他地方也有这样的算法，但是规则不同，上面的代码不能重复使用；

我们可以对其进行修改，提取计算折扣的算法部分保存为对象，以折扣类型为关键字，这样在索引时就可以通过对象的键值索引调用具体的算法：

这样，算法的实现和算法的使用是分开的，添加一个新算法非常简单：

如果你想隐藏计算算法，可以在IIFE的帮助下使用闭包。此时，您需要添加一个条目来添加策略以促进扩展：

这样隐藏了算法，保留了添加策略的入口，便于扩展。

3.政策模式的普遍实施

根据上面的例子，细化Strategy模式，折扣计算方式可以看作是策略，可以相互替代，而具体的折扣计算过程可以看作是package Context，可以根据需要选择不同的策略。

主要有以下概念：

上下文：封装上下文，按需调用所需策略，屏蔽外部对策略的直接调用，对外只提供一个接口，按需调用相应的策略；

策略：策略包含特定的算法，其方法外观相同，可以互相替换；

StrategyMap:所有策略的集合，可以被封装上下文调用；

结构图如下：

下面用一般化的方法来实现。

通用实现看起来比较简单，下面我们来分享一下实际项目。

4.实战中的战术模式

4.1表格格式化程序

下面是Vue ElementUI项目中使用的一个例子。其他框架的项目原则是相似的。跟大家分享一下。

Element的table控件的Column接受格式化内容的formatter参数，其类型为function，还可以接受几个特定的参数，如function(行、列、单元格值、索引)。

以文件大小转换为例，后端往往以位为单位直接传输文件大小，所以前端需要根据后端的数据和要求，以自己的单位转换文件大小，比如KB/MB。

首先，实现了文件计算算法：

那么我们可以直接：

代码示例可以参考codepen-战略模式实战

运行结果如下：

4.2表单验证

除了表单中的格式化程序之外，策略模式也经常用于表单验证场景。这里有一个Vue ElementUI项目的例子，其他框架都是一样的。

ElementUI的表单表单具有表单验证功能，用于验证用户输入的表单内容。在实际需求中，表单验证项通常是复杂的，因此有必要为每个表单项添加一个验证器自定义验证方法。

我们可以像官网示例一样，在组件的状态数据函数中编写表单验证，但是很难重用常用的表单验证方法。此时，我们可以结合政策模式和功能核心化的知识对其进行重构。首先，我们在项目的工具模块(通常是utils文件夹)中实现一个通用的表单验证方法：

然后在utils/index.js中添加一个corization方法，生成表单验证函数：

上面的formValidateGene函数接受两个参数，第一个是验证规则，即从src/utils/validations.js文件中提取的通用验证规则的方法名，第二个参数是报错时表单验证的提示信息。

可以看出使用起来非常方便。提取表单验证方法作为策略，利用科里奥利方法动态选择表单验证方法，可以灵活应用策略，大大加快开发效率。

代码示例可以参考codesandbox-policy模式表单来验证实战

运行结果：

5.战略模式的利弊

策略模式将算法的实现和使用分开，这带来了许多优势：

策略是相互独立的，但策略可以自由切换。这种策略模式的特点给策略模式带来了很大的灵活性，提高了策略的复用率。

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

可扩展性好，策略容易扩展；

策略模式的缺点：

策略是相互独立的，所以一些复杂的算法逻辑无法共享，造成一些资源的浪费；

如果用户想采用任何策略，他必须知道策略的执行情况，所以所有的策略都需要暴露，这违反了迪米特里规则/最少知识原则，也增加了用户使用策略对象的成本。

6.策略模型的适用场景

那么在什么情况下我们应该使用策略模式：

多种算法只是在行为上略有不同，所以策略模式可以用来动态选择算法；

算法需要自由切换场景；

有时需要多个条件判断，因此可以使用策略模式来避免多个条件判断。

7.其他相关模型

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

策略模式和模板方法模式的作用相似，但结构和实现有些不同。

策略模式允许我们动态指定程序运行时要使用的算法；

模板方法模式是定义子类时使用的算法已经确定；

7.2策略模式和享受模式

摘要

以上就是用边肖介绍的策略模式实现Vue动态表单验证的方法，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！