一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第7天,点击查看活动详情。
\
「设计模式 JavaScript 描述」策略模式
在现实中,很多时候也有多种途径到达同一个目的地。比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路。
在程序设计中,我们也常常遇到类似的情况,要实现某一个功能有多种方案可以选择。比如 一个压缩文件的程序,既可以选择 zip 算法,也可以选择 gzip 算法。
这些算法灵活多样,而且可以随意互相替换。这种解决方案就是本章将要介绍的策略模式。
策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。
1. 使用策略模式计算奖金
策略模式有着广泛的应用。本节我们就以年终奖的计算为例进行介绍。
很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如,绩效为 S 的人年 终奖有 4 倍工资,绩效为 A 的人年终奖有 3 倍工资,而绩效为 B 的人年终奖是 2 倍工资。假设财 务部要求我们提供一段代码,来方便他们计算员工的年终奖。
1.1 最初的代码实现
我们可以编写一个名为 calculateBonus
的函数来计算每个人的奖金数额。很显然,calculateBonus
函数要正确工作,就需要接收两个参数:员工的工资数额和他的绩效考核等级。 代码如下:
var calculateBonus = function (performanceLevel, salary) {
if (performanceLevel === 'S') {
return salary * 4;
}
if (performanceLevel === 'A') {
return salary * 3;
}
if (performanceLevel === 'B') {
return salary * 2;
}
};
calculateBonus('B', 20000); // 输出:40000
calculateBonus('S', 6000); // 输出:24000
复制代码
可以发现,这段代码十分简单,但是存在着显而易见的缺点。
calculateBonus
函数比较庞大,包含了很多if-else
语句,这些语句需要覆盖所有的逻辑分支。calculateBonus
函数缺乏弹性,如果增加了一种新的绩效等级 C,或者想把绩效 S 的奖金系数改为5,那我们必须深入calculateBonus
函数的内部实现,这是违反开放—封闭原则的。- 算法的复用性差,如果在程序的其他地方需要重用这些计算奖金的算法呢?我们的选择只有复制和粘贴。 因此,我们需要重构这段代码。
1.2 使用组合函数重构代码
一般最容易想到的办法就是使用组合函数来重构代码,我们把各种算法封装到一个个的小函数里面,这些小函数有着良好的命名,可以一目了然地知道它对应着哪种算法,它们也可以被复用在程序的其他地方。代码如下:
var performanceS = function (salary) {
return salary * 4;
};
var performanceA = function (salary) {
return salary * 3;
};
var performanceB = function (salary) {
return salary * 2;
};
var calculateBonus = function (performanceLevel, salary) {
if (performanceLevel === 'S') {
return performanceS(salary);
}
if (performanceLevel === 'A') {
return performanceA(salary);
}
if (performanceLevel === 'B') {
return performanceB(salary);
}
};
calculateBonus('A', 10000); // 输出:30000
复制代码
目前,我们的程序得到了一定的改善,但这种改善非常有限,我们依然没有解决最重要的问题:calculateBonus
函数有可能越来越庞大,而且在系统变化的时候缺乏弹性。
1.3 使用策略模式重构代码
经过思考,我们想到了更好的办法——使用策略模式来重构代码。策略模式指的是**定义一系列的算法,把它们一个个封装起来。**将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用与算法的实现分离开来。
在这个例子里,算法的使用方式是不变的,都是根据某个算法取得计算后的奖金数额。而算法的实现是各异和变化的,每种绩效对应着不同的计算规则。
一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程。第二个部分是环境类 Context
,Context
接受客户的请求,随后把请求委托给某一个策略类。要做到这点,说明 Context
中要维持对某个策略对象的引用。
现在用策略模式来重构上面的代码。第一个版本是模仿传统面向对象语言中的实现。我们先把每种绩效的计算规则都封装在对应的策略类里面:
var performanceS = function () {};
performanceS.prototype.calculate = function (salary) {
return salary * 4;
};
var performanceA = function () {};
performanceA.prototype.calculate = function (salary) {
return salary * 3;
};
var performanceB = function () {};
performanceB.prototype.calculate = function (salary) {
return salary * 2;
};
复制代码
接下来定义奖金类 Bonus
:
var Bonus = function () {
this.salary = null; // 原始工资
this.strategy = null; // 绩效等级对应的策略对象
};
Bonus.prototype.setSalary = function (salary) {
this.salary = salary; // 设置员工的原始工资
};
Bonus.prototype.setStrategy = function (strategy) {
this.strategy = strategy; // 设置员工绩效等级对应的策略对象
};
Bonus.prototype.getBonus = function () { // 取得奖金数额
return this.strategy.calculate(this.salary); // 把计算奖金的操作委托给对应的策略对象
};
复制代码
在完成最终的代码之前,我们再来回顾一下策略模式的思想:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。
这句话如果说得更详细一点,就是:定义一系列的算法,把它们各自封装成策略类,算法被封装在策略类内部的方法里。在客户对 Context
发起请求的时候,Context
总是把请求委托给这些策略对象中间的某一个进行计算。
现在我们来完成这个例子中剩下的代码。先创建一个 bonus
对象,并且给 bonus
对象设置一些原始的数据,比如员工的原始工资数额。接下来把某个计算奖金的策略对象也传入 bonus
对象 内部保存起来。当调用 bonus.getBonus()
来计算奖金的时候,bonus
对象本身并没有能力进行计算, 而是把请求委托给了之前保存好的策略对象:
var bonus = new Bonus();
bonus.setSalary( 10000 );
bonus.setStrategy( new performanceS() ); // 设置策略对象
console.log( bonus.getBonus() ); // 输出:40000
bonus.setStrategy( new performanceA() ); // 设置策略对象
console.log( bonus.getBonus() ); // 输出:30000
复制代码
刚刚我们用策略模式重构了这段计算年终奖的代码,可以看到通过策略模式重构之后,代码变得更加清晰,各个类的职责更加鲜明。但这段代码是基于传统面向对象语言的模仿,下一节我 们将了解用 JavaScript 实现的策略模式。
2. JavaScript 版本的策略模式
在前面,我们让 strategy
对象从各个策略类中创建而来,这是模拟一些传统面向对象语言的实现。实际上在 JavaScript 语言中,函数也是对象,所以更简单和直接的做法是把 strategy
直接定义为函数:
var strategies = {
"S": function (salary) {
return salary * 4;
},
"A": function (salary) {
return salary * 3;
},
"B": function (salary) {
return salary * 2;
}
};
复制代码
同样,Context
也没有必要必须用 Bonus
类来表示,我们依然用 calculateBonus
函数充当 Context
来接受用户的请求。经过改造,代码的结构变得更加简洁:
var strategies = {
"S": function (salary) {
return salary * 4;
},
"A": function (salary) {
return salary * 3;
},
"B": function (salary) {
return salary * 2;
}
};
var calculateBonus = function (level, salary) {
return strategies[level](salary);
};
console.log(calculateBonus('S', 20000)); // 输出:80000
console.log(calculateBonus('A', 10000)); // 输出:30000
复制代码
在接下来的表单验证的例子中,我们用到的就是这种函数形式的策略对象。
3. 多态在策略模式中的体现
通过使用策略模式重构代码,我们消除了原程序中大片的条件分支语句。所有跟计算奖金有关的逻辑不再放在 Context 中,而是分布在各个策略对象中。Context 并没有计算奖金的能力,而是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被各自封装在对象内部。当我们对这些策略对象发出“计算金”的请求时,它们会返回各自不同的计算结果,这正是对象多 态性的体现,也是“它们可以相互替换”的目的。替换 Context 中当前保存的策略对象,便能执行不同的算法来得到我们想要的结果。
4. 表单校验
在一个 Web 项目中,注册、登录、修改用户信息等功能的实现都离不开提交表单。
在将用户输入的数据交给后台之前,常常要做一些客户端力所能及的校验工作,比如注册的时候需要校验是否填写了用户名,密码的长度是否符合规定,等等。这样可以避免因为提交不合法数据而带来的不必要网络开销。
假设我们正在编写一个注册的页面,在点击注册按钮之前,有如下几条校验逻辑。
- 用户名不能为空。
- 密码长度不能少于 6 位。
- 手机号码必须符合格式。
4.1 表单校验的第一个版本
现在编写表单校验的第一个版本,可以提前透露的是,目前我们还没有引入策略模式。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单校验</title>
</head>
<body>
<form action="http://xxx.com/register" id="register-form" method="post">
请输入用户名: <input type="text" name="userName" />
请输入密码: <input type="text" name="password" />
请输入手机号码: <input type="text" name="phoneNumber" />
<button>提交</button>
</form>
</body>
<script>
var registerForm = document.getElementById('register-form');
registerForm.onsubmit = function () {
if (registerForm.userName.value === '') {
alert('用户名不能为空');
return false;
}
if (registerForm.password.value.length < 6) {
alert('密码长度不能少于 6 位');
return false;
}
if (!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
alert('手机号码格式不正确');
return false;
}
}
</script>
</html>
复制代码
这是一种很常见的代码编写方式,它的缺点跟计算奖金的最初版本一模一样。
registerForm.onsubmit
函数比较庞大,包含了很多if-else
语句,这些语句需要覆盖所有的校验规则。registerForm.onsubmit
函数缺乏弹性,如果增加了一种新的校验规则,或者想把密码的长度校验从 6 改成 8,我们都必须深入registerForm.onsubmit
函数的内部实现,这是违反开放—封闭原则的。- 算法的复用性差,如果在程序中增加了另外一个表单,这个表单也需要进行一些类似的校验,那我们很可能将这些校验逻辑复制得漫天遍野。
4.2 用策略模式重构表单校验
下面我们将用策略模式来重构表单校验的代码,很显然第一步我们要把这些校验逻辑都封装成策略对象:
var strategies = {
isNonEmpty: function (value, errorMsg) { // 不为空
if (value === '') {
return errorMsg;
}
},
minLength: function (value, length, errorMsg) { // 限制最小长度
if (value.length < length) {
return errorMsg;
}
},
isMobile: function (value, errorMsg) { // 手机号码格式
if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
return errorMsg;
}
}
};
复制代码
接下来我们准备实现 Validator
类。Validator
类在这里作为 Context
,负责接收用户的请求并委托给 strategy
对象。在给出 Validator
类的代码之前,有必要提前了解用户是如何向 Validator
类发送请求的,这有助于我们知道如何去编写 Validator
类的代码。代码如下:
var validataFunc = function () {
var validator = new Validator(); // 创建一个 validator 对象
/***************添加一些校验规则****************/
validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空');
validator.add(registerForm.password, 'minLength:6', '密码长度不能少于 6 位');
validator.add(registerForm.phoneNumber, 'isMobile', '手机号码格式不正确');
var errorMsg = validator.start(); // 获得校验结果
return errorMsg; // 返回校验结果
}
var registerForm = document.getElementById('registerForm');
registerForm.onsubmit = function () {
var errorMsg = validataFunc(); // 如果 errorMsg 有确切的返回值,说明未通过校验
if (errorMsg) {
alert(errorMsg);
return false; // 阻止表单提交
}
};
复制代码
从这段代码中可以看到,我们先创建了一个 validator
对象,然后通过 validator.add
方法,往 validator
对象中添加一些校验规则。validator.add
方法接受 3 个参数,以下面这句代码说明:
validator.add(registerForm.password, 'minLength:6', '密码长度不能少于 6 位');
复制代码
registerForm.password
为参与校验的input
输入框。'minLength:6'
是一个以冒号隔开的字符串。冒号前面的minLength
代表客户挑选的strategy
对象,冒号后面的数字 6 表示在校验过程中所必需的一些参数。'minLength:6'
的意思就是校验registerForm.password
这个文本输入框的value
最小长度为 6。如果这个字符串中不包含冒号,说明校验过程中不需要额外的参数信息,比如'isNonEmpty'
。- 第 3 个参数是当校验未通过时返回的错误信息。
当我们往 validator
对象里添加完一系列的校验规则之后,会调用 validator.start()
方法来启动校验。如果 validator.start()
返回了一个确切的 errorMsg
字符串当作返回值,说明该次校验没有通过,此时需让 registerForm.onsubmit
方法返回 false
来阻止表单的提交。
最后是 Validator
类的实现:
class Validator {
constructor() {
this.cache = []; // 保存校验规则
}
add(dom, rule, errorMsg) {
var ary = rule.split(':'); // 把 strategy 和参数分开
this.cache.push(function () { // 把校验的步骤用空函数包装起来,并且放入 cache
var strategy = ary.shift(); // 用户挑选的 strategy
ary.unshift(dom.value); // 把 input 的 value 添加进参数列表
ary.push(errorMsg); // 把 errorMsg 添加进参数列表
return strategies[strategy].apply(dom, ary);
});
};
start() {
for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
var msg = validatorFunc(); // 开始校验,并取得校验后的返回信息
if (msg) { // 如果有确切的返回值,说明校验没有通过
return msg;
}
}
}
}
复制代码
使用策略模式重构代码之后,我们仅仅通过“配置”的方式就可以完成一个表单的校验,这些校验规则也可以复用在程序的任何地方,还能作为插件的形式,方便地被移植到其他项目中。
在修改某个校验规则的时候,只需要编写或者改写少量的代码。比如我们想将用户名输入框的校验规则改成用户名不能少于 4 个字符。可以看到,这时候的修改是毫不费力的。代码如下:
validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' );
// 改成:
validator.add( registerForm.userName, 'minLength:10', '用户名长度不能小于 10 位' );
复制代码
4.3 给某个文本输入框添加多种校验规则
目前我们的表单校验实现留有一点小遗憾:一 个文本输入框只能对应一种校验规则,比如,用户名输入框只能校验输入是否为空。如果我们既想校验它是否为空,又想校验它输入文本的长度不小于 10 呢?我们期望以这样的形式进行校验:
validator.add(registerForm.userName, [{
strategy: 'isNonEmpty',
errorMsg: '用户名不能为空'
}, {
strategy: 'minLength:6',
errorMsg: '用户名长度不能小于 10 位'
}]);
复制代码
下面提供的代码可用于一个文本输入框对应多种校验规则:
/***********************策略对象**************************/
var strategies = {
isNonEmpty: function (value, errorMsg) {
if (value === '') {
return errorMsg;
}
},
minLength: function (value, length, errorMsg) {
if (value.length < length) {
return errorMsg;
}
},
isMobile: function (value, errorMsg) {
if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
return errorMsg;
}
}
};
/***********************Validator 类**************************/
class Validator {
constructor() {
this.cache = [];
}
add(dom, rules) {
var self = this;
for (var i = 0, rule; rule = rules[i++];) {
(function (rule) {
var strategyAry = rule.strategy.split(':');
var errorMsg = rule.errorMsg;
self.cache.push(function () {
var strategy = strategyAry.shift();
strategyAry.unshift(dom.value);
strategyAry.push(errorMsg);
return strategies[strategy].apply(dom, strategyAry);
});
})(rule)
}
}
start() {
for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
var errorMsg = validatorFunc();
if (errorMsg) {
return errorMsg;
}
}
};
}
/***********************客户调用代码**************************/
var registerForm = document.getElementById('registerForm');
var validataFunc = function () {
var validator = new Validator();
validator.add(registerForm.userName, [{
strategy: 'isNonEmpty',
errorMsg: '用户名不能为空'
}, {
strategy: 'minLength:6',
errorMsg: '用户名长度不能小于 10 位'
}]);
validator.add(registerForm.password, [{
strategy: 'minLength:6',
errorMsg: '密码长度不能小于 6 位'
}]);
validator.add(registerForm.phoneNumber, [{
strategy: 'isMobile',
errorMsg: '手机号码格式不正确'
}]);
var errorMsg = validator.start();
return errorMsg;
}
registerForm.onsubmit = function () {
var errorMsg = validataFunc();
if (errorMsg) {
alert(errorMsg);
return false;
}
};
复制代码
5. 策略模式的优缺点
策略模式是一种常用且有效的设计模式,本文提供了计算奖金、、表单校验这两个例子来加深大家对策略模式的理解。从这两个例子中,我们可以总结出策略模式的一些优点。
- 策略模式利用组合、委托和多态等技术和思想,可以有效地避免多重条件选择语句。
- 策略模式提供了对开放—封闭原则的完美支持,将算法封装在独立的
strategy
中,使得它们易于切换,易于理解,易于扩展。 - 策略模式中的算法也可以复用在系统的其他地方,从而避免许多重复的复制粘贴工作。
- 在策略模式中利用组合和委托来让
Context
拥有执行算法的能力,这也是继承的一种更轻便的替代方案。
当然,策略模式也有一些缺点,但这些缺点并不严重。
首先,使用策略模式会在程序中增加许多策略类或者策略对象,但实际上这比把它们负责的逻辑堆砌在 Context
中要好。 其次,要使用策略模式,必须了解所有的 strategy
,必须了解各个 strategy
之间的不同点,这样才能选择一个合适的 strategy
。比如,我们要选择一种合适的旅游出行路线,必须先了解选择飞机、火车、自行车等方案的细节。此时 strategy
要向客户暴露它的所有实现,这是违反最少知识原则的。