Vue 骚技巧，策略模式实现动态表单验证

发布时间：2025-11-05 03:16:20 来源：码上建站 作者：数据库

本文转载自微信公众号「前端下午茶」，骚实现作者SHERlocked93 。技巧转载本文请联系前端下午茶公众号。策略

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

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

1. 你曾见过的策略模式

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

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

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

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

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

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

2. 实例的代码实现

具体的免费源码下载例子我们用编程上的例子来演示，比较好量化。

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

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

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

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

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

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

3. 策略模式的通用实现

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

主要有下面几个概念：

结构图如下：

策略模式

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

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

4. 实战中的策略模式

4.1 表格 formatter

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

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

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

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

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

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

运行结果如下图：

4.2 表单验证

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

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

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

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

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

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

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

运行结果：

5. 策略模式的优缺点

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

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

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

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

策略模式的缺点：

6. 策略模式的适用场景

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

7. 其他相关模式

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

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

7.2 策略模式和享元模式

见享元模式中的介绍。

https://mp.weixin.qq.com/s/2B3OVfvGkbbpzCFKVc6zVw

相关文章