Xu-Blog

养一猫一狗,猫叫啵啵,狗叫没想好~~

0%

JS设计模式-策略模式

策略模式(Strategy)

定义一系列的算法,把它们一个个封装起来,并且使他们可以互相替换。

策略模式有着广泛的应用。我们用例子来说明:

策略模式计算奖金

公司年终奖根据员工的工资基数和绩效来发放,例如,绩效为 S 的年终奖有 4 倍工资,绩效为 A 的有三倍工资,B 为 2 倍工资。我们用代码来实现:

最初代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 编写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 的系数做修改,那我们必须深入函数内部来实现,这是违反开放-封闭原则的。
  • 算法的复用性差,如果在程序的其他地方需要重用这些计算奖金的算法呢?我们的选择只有复制粘贴。

所以我们需要重构代码。

组合函数重构代码

一般比较容易想到的就是使用组合函数来重构代码,我们把各种算法封装到一个个的小函数里面,这些小函数有着良好的命名,可以一目了然地知道它对应着那种算法,它们也可以被复用在程序的其他地方。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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 函数有可能越来越庞大,而且在系统变化的时候缺乏弹性。

策略模式重构代码

有更好的办法来重构代码——策略模式。策略模式是将一系列算法一个个封装起来。将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外,策略模式的目的就是将算法的使用与算法的实现分离开来

在这个例子中,算法的使用方式是不变的,都是根据某个算法取得计算后的奖金数。算法的实现是各异和变化的,每种绩效对应着不同的计算规则。

一个策略模式的程序至少由两部分组成:

  • 第一部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程。
  • 第二部分是环境类 Context,Context 接受用户的请求,随后把请求委托给某一个策略类。要做到这一点,说明 Context 中要维持对某个策略对象的饮用。

现在用策略模式来重构代码。第一个版本是模仿传统面向对象语言中的实现。我们先把每种绩效的计算规则都封装在对应的策略类里面:

1
2
3
4
5
6
7
8
9
10
11
12
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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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); // 把计算奖金的操作委托给对应的策略对象
};

接下来,创建 bonus 对象,并给 bonus 对象设置一些原始数据,比如工资,绩效等等。然后把某个计算奖金的策略对象也传入 bonus 对象内部保存起来。当调用 bonus.getBonus()来计算奖金的时候,bonus 对象本身没有计算能力,而是把请求委托给了之前保存好的策略对象:

1
2
3
4
5
6
7
8
9
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 实现的策略模式。

JavaScript 版本的策略模式

在之前的代码中,我们让 strategy 对象从各个策略类中创建而来,实际上在 JS 中,函数就是对象,我们直接将 strategy 定义为函数:

1
2
3
4
5
6
7
8
9
10
11
var strategies = {
S: function(salary) {
return salary * 4;
},
A: function(salary) {
return salary * 3;
},
B: function(salary) {
return salary * 2;
}
};

同样,Context 也没必要用 Bonus 类来表示,我们依然用 calculateBonus 函数充当 Context 来接受用户请求。经过改造,代码结构变得更加简洁:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

多态在策略模式中的体现

通过使用策略模式重构代码,我们消除了原本程序中大片的条件分支语句。所有跟计算奖金有关的逻辑不再放在 Context 中,而是分布在各个策略对象中。Context 并没有计算奖金的能力,而是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被各自封装在对象内部。当我们对这些策略对象发出“计算奖金”的请求时,它们会返回各自不同的计算结构,这正是对象多态性的体现,也是“它们可以相互替换”的目的。替换 Context 中当前保存的策略对象,便能执行不同的算法来得到我们想要的结果。

策略模式实现动画

接下来跟着 demo 编写一个比较直观的例子,实现动画效果。

用 JS 实现动画效果原理和动画片一样~,动画片是把一些差距不大的原画以较快的帧数播放,达到视觉效果。在 JS 中,可以通过连续改变元素的某个 CSS 属性,比如 left、top、background-position 来实现动画效果。

思路和准备工作

我们的目标是编写一个动画类和一些缓动算法,让小球以各种各样的缓动效果在页面中运动。

现在来分析这个程序的思路。在运动开始前,需要提前记录一些有用的信息如下:

  • 动画开始时,小球所在的原始位置;
  • 小球移动的目标位置;
  • 动画开始的准确时间;
  • 动画的持续时间;

随后,我们用 setInterval 创建一个定时器,定时器每隔 19ms 循环一次。在定时器的每一帧中,我们会把动画已经消耗的时间、小球的原始位置、小球的目标位置和动画持续的总时间等信息传入缓动算法。该算法会通过这几个参数,计算出小球当前应该所在的位置。最后再更新该 div 对应的 CSS 属性,小球就可以顺利动起来了。

让小球动起来

我们来认识几个常见的缓动算法,来源于 Flash,可以方便的移植到其他语言中。

这些算法都接受 4 个参数,这 4 个参数的含义分别是 动画已经消耗的时间小球原始位置小球目标位置动画持续的总时间,返回的值则是动画元素应该处在的当前位置。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var tween = {
linear: function(t, b, c, d) {
return (c * t) / d + b;
},
easeIn: function(t, b, c, d) {
return c * (t /= d) * t + b;
},
strongEaseIn: function(t, b, c, d) {
return c * (t /= d) * t * t * t * t + b;
},
strongEaseOut: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
},
sineaseIn: function(t, b, c, d) {
return c * (t /= d) * t * t + b;
},
sineaseOut: function(t, b, c, d) {
return c * ((t = t / d - 1) * t * t + 1) + b;
}
};

下面我们开始编写完整代码,代码思想来源于 jQuery 库。

首先在页面中放置一个 div:

1
2
3
<body>
<div style="position:absolute;background:blue" id="div">我是div</div>
</body>

接下来定义 Animate 类,Animate 的构造函数接受一个参数:即将运动起来的 dom 节点。Animate 类的代码如下:

1
2
3
4
5
6
7
8
9
var Animate = function(dom) {
this.dom = dom; // 进行动画的dom节点
this.startTime = 0; // 动画开始时间
this.startPos = 0; // dom节点初始位置
this.endPos = 0; // dom节点目标位置
this.propertyName = null; // dom节点需要被改变的css属性名
this.easing = null; // 缓动算法
this.duration = null; // 动画持续时间
};

接下来 Animate.prototype.start 方法负责启动这个动画,在动画被启动的瞬间,要记录一些信息,供缓动算法在以后计算小球当前位置的时候使用。在记录完这些信息之后,此方法还要负责启动定时器。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Animate.prototype.start = function(propertyName, endPos, duration, easing) {
this.startTime = +new Date(); // 动画启动时间
this.startPos = this.dom.getBoundingClientRect()[propertyName]; // dom节点初始位置
this.propertyName = propertyName; // dom节点需要被改变的CSS属性名
this.endPos = endPos; // dom节点目标位置
this.duration = duration; // 动画持续时间
this.easing = tween[easing]; //缓动算法

var self = this;
var timeId = setInterval(function() {
// 启动定时器,开始执行动画
if (self.step() === false) {
// 如果动画已经结束,则清楚定时器
clearInterval(timeId);
}
}, 19);
};

Animate.prototype.start 方法接受以下 4 个参数:

  • propertyName:要改变的 CSS 属性名,比如”left”、”top”分别表示左右移动和上下移动。
  • endPos:小球运动的目标位置。
  • duration:动画持续时间。
  • easing:缓动算法。

接下来是 Animate.prototype.step 方法,该方法代表小球运动的每一帧要做的事情。在此处,这个方法负责计算小球当前位置和调用更新 CSS 属性值的方法 Animate.prototype.update。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Animate.prototype.step = function() {
var t = +new Date(); // 取得当前时间
if (t >= this.startTime + this.duration) {
// (1)
this.update(this.endPos); // 更新小球的CSS属性
return false;
}
var pos = this.easing(
t - this.startTime,
this.startPos,
this.endPos - this.startPos,
this.duration
); // pos为小球当前位置
this.update(pos); // 更新小球的CSS属性值
};

(1)处表示,如果当前时间大于动画开始时间加上动画持续时间,说明动画已经结束,此时应该修正小球的位置。因为在这一帧开始之后,小球的位置已经接近了目标位置,但是很可能不完全等于目标位置。此时我们主动修正小球当前位置为目标位置。此外让 Animate.prototype.step 方法返回 false ,可以通知 Animate.prototype.start 方法清除定时器。

最后是负责更新小球 CSS 属性的 Animate.prototype.update 方法:

1
2
3
Animate.prototype.update = function(pos) {
this.dom.style[this.propertyName] = pos + "px";
};

我们做一些小测试:

1
2
3
4
5
6
var div = document.getElementById("div");

var animate = new Animate(div);
animate.start("left", 500, 1000, "strongEaseOut");
// animate.start("top", 1500, 500, "strongEaseIn");
// 注:同时执行,只会执行后一个。

利用我们编写的动画类和一些缓动算法就可以让小球运动起来。我们使用策略模式把算法传入动画类中,来达到各种不同的缓动效果,这些算法都可以轻易地被替换为另一个算法,这是策略模式的经典运用之一。策略模式的实现并不复杂,关键是如何从策略模式的实现背后,找到封装变化、委托和多态性这些思想的价值

更广义的“算法”

策略模式指的是定义一系列的算法,并把它们封装起来。从定义上来看,策略模式就是用来封装算法的。但是如果把策略模式仅仅用来封装算法,必然有些大材小用。在实际开发中,我们通常会把算法的含义扩散开来,使用策略模式也可以用来封装一系列的“业务规则”。只要这些业务规则指向的目标一致,并且可以被替换使用,我们就可以用策略模式来封装它们。

表单校验

在一个 Web 项目中,注册、登录、修改用户信息等功能的实现都离不开提交表单。

在将用户输入的数据交给后台之前,常常要做一些客户端力所能及的校验工作,比如注册的时候需要校验是否填写了用户名,密码的长度是否符合规定等等。这样可以避免因为提交不合法的数据而带来不必要的网络开销。

我们编写如下规则:

  • 用户名不能为空
  • 密码长度不小于 6 位
  • 手机号码必须符合格式

表单校验的初始版本

此时没有引入策略模式,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
<body>
<form action="http://xudongpo.cn/register" id="registerForm" method="post">
请输入用户名:<input type="text" name="userName" /> 请输入密码:<input
type="text"
name="password"
/>
请输入手机号码:<input type="text" name="phoneNumber" />
<button>提交</button>
</form>
<script>
var registerForm = document.getElementById("registerForm");

registerForm.onsubmit = function() {
if (registerForm.userName.value === "") {
alert("用户名不能为空");
return false;
}
if (registerForm.password.value.length < 6) {
alert("密码长度不能少于6位");
return false;
}
if (!/(^[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
alert("手机号码格式不正确");
return false;
}
};
</script>
</body>
</html>

这是一种很常见的编码方式,它的缺点跟计算奖金的最初版本一模一样。

  • registerForm.onsubmit 函数比较庞大,包含了很多 if-else 语句,这些语句需要覆盖所有的校验规则。
  • registerForm.onsubmit 函数缺乏弹性,如果增加了一种新的校验规则,或者想把密码长度从 6 改为 8,就需要深入 registerForm.onsubmit 函数内部去实现,这是违反开放-封闭原则的。
  • 算法的复用性差,如果在程序中增加了另外一个表单,这个表单也需要进行一些类似的校验,我们很可能将这些校验逻辑复制的漫山遍野。

用策略模式重构表单

我们将使用策略模式来重构表单校验代码。我们首先将校验逻辑都封装成策略对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 类。在这里将作为 Context,负责接受用户请求并委托给 strategy 对象。代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var validateFunc = function(){
var validator = new Validator(); // 创建一个validator对象
/***** 添加一些校验规则 *****/
validator.add(registerForm.userName,'isNonEmpty','用户名不能为空');
validator.add(registerForm.password,'minLength','密码长度不少于6');
validator.add(registerForm.phoneNumber,'isMobile','手机号格式不正确');

var errorMsg = validator.start(); // 获得校验结果
return errorMsg; // 返回校验结果
}

var registerForm = focument.getElementById('registerForm');
registerForm.onsubmit = function(){
var.errorMsg = validateFunc(); // 如果errorMsg有返回值,说明没有通过校验
if(errorMsg){
alert(errorMsg);
return false; // 阻止表单提交
}
};

我们首先创建了一个 validator 对象,然后通过 validator.add 方法,往 validator 对象中添加一些校验规则。validator.add 方法接受 3 个参数,以下面这个代码说明:

1
validator.add(registerForm.password, "minLength", "密码长度不少于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 类的实现:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var Validator = function() {
this.cache = []; // 保存校验规则
};

Validator.prototype.add = function(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);
});
};

Validator.prototype.start = function() {
for (var i = 0, validatorFunc; (validatorFunc = this.cache[i++]); ) {
var msg = validatorFunc(); // 开始校验,并取得校验后的返回信息
if (msg) {
// 如果有确切的返回值,说明校验没有通过
return msg;
}
}
};

使用策略模式重构代码之后,我们仅仅通过“配置”的方式就可以完成表单的校验,这些校验规则也可以复用在程序的任何地方,还能作为插件的形式,方便的被移植到其他项目中。

在修改某个检验规则的时候,只要编写或者改写少量的代码。比如我们想要将用户名输入框的校验规则改为用户名不能少于 10 个字符。可以看到这时候的修改是毫不费力的。代码如下:

1
2
3
validator.add(registerForm.userName, "isNonEmpty", "用户名不能为空");
// 改为
validator.add(registerForm.userName, "minLength:10", "用户名长度不能小于10位");

添加多种校验规则

目前我们的表单校验已经基本完成,但是有一点点小遗憾:一个文本输入框只能对应一种校验规则。

如果我们既想要校验它是否为空,又想校验它输入的文本长度不少于 10 呢?我们期望以这样的形式进行校验:

1
2
3
4
5
6
7
8
9
10
validator.add(registerForm.userName, [
{
startegy: "isNonEmpty",
errorMsg: "用户名不能为空"
},
{
startegy: "minLength:10",
errorMsg: "用户名长度不能小于10位"
}
]);

下面提供的代码可以用于一个文本输入框对应多种校验规则:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<html>
<body>
<form action="http://xudongpo.cn/register" id="registerForm" method="post">
请输入用户名:<input type="text" name="userName" /> 请输入密码:<input
type="text"
name="password"
/>
请输入手机号码:<input type="text" name="phoneNumber" />
<button>提交</button>
</form>
<script>
/********** 策略对象 **********/

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类 **********/

var Validator = function() {
this.cache = []; // 保存校验规则
};

Validator.prototype.add = function(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);
}
};

Validator.prototype.start = function() {
for (var i = 0, validatorFunc; (validatorFunc = this.cache[i++]); ) {
var errorMsg = validatorFunc();
if (errorMsg) {
// 如果有确切的返回值,说明校验没有通过
return errorMsg;
}
}
};

/********** 客户调用代码 **********/

var registerForm = document.getElementById("registerForm");

var validateFunc = function() {
var validator = new Validator();

validator.add(registerForm.userName, [
{
startegy: "isNonEmpty",
errorMsg: "用户名不能为空"
},
{
startegy: "minLength:10",
errorMsg: "用户名长度不能小于10位"
}
]);
validator.add(registerForm.password, [
{
startegy: "minLength:6",
errorMsg: "密码长度不能小于6位"
}
]);
validator.add(registerForm.phoneNumber, [
{
startegy: "isMobile",
errorMsg: "手机号码格式不正确"
}
]);
};

registerForm.onsubmit = function() {
var errorMsg = validateFunc();

if (errorMsg) {
alert(errorMsg);
return false;
}
};
</script>
</body>
</html>

策略模式的优缺点

策略模式是一种常用且有效的设计模式,通过以上例子,我们可以总结出策略模式的一些优缺点:

优点:

  • 策略模式利用组合、委托和多态等技术和思想,可以有效的避免多重条件选择语句。
  • 策略模式提供了对开放-封闭原则的完美支持,将算法封装在独立的 strategy 中,使得它们易于切换,易于理解,易于扩展。
  • 策略模式中的算法也可以复用在系统的其他地方,从而避免许多重复的复制粘贴工作。
  • 在策略模式中利用组合和委托来让 Context 拥有执行算法的能力,这也是继承的一种更轻便的替代方案。

缺点,但不严重:

  • 使用策略模式会在程序中增加许多策略类或者策略对象,但实际上这比把它们负责的逻辑堆砌在 Context 中好。
  • 想要使用策略模式,必须了解所有的 strategy,必须了解各个 strategy 之间的不同点,这样才能选择一个合适的 strategy。此时 strategy 要向客户暴露它的所有实现,这是违反最少知识原则的。

一等函数对象与策略模式

以上几个示例,既有模拟传统面向对象语言的版本,又有针对 JS 的特有实现。在以类为中心的传统面向对象语言中,不同的算法或者行为被封装在各个策略类中,Context 将请求委托给这些策略对象,这些策略对象会根据请求返回不同的执行结果,这样便能表现出对象的多态性。

Peter Norvig 在他的演讲中曾说过:“在函数作为一等对象的语言中,策略模式是隐形的。strategy 就是值为函数的变量。”在 JS 中,除了使用类来封装算法和行为之外,使用函数当然也是一种选择。这些“算法”可以被封装在函数中并且四处传递,也就是我们常说的“高阶函数”。实际上在 JS 这种以函数作为一等对象的语言中,策略模式已经融入到语言本身当中,我们经常用高阶函数来封装不同的行为,并把它传递到另一个函数当中。我们对这些函数发出“调用”消息,不同的函数返回不同的结果。在 JS 中,函数对象的“多态性”来的更简单。

如下代码,我们能否认出来:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var S = function(salary) {
return salary * 4;
};
var A = function(salary) {
return salary * 3;
};
var B = function(salary) {
return salary * 2;
};

var calculateBonus = function(func, salary) {
return func(salary);
};

calculateBonus(S, 10000); // 40000
End~~请支持原创撒花= ̄ω ̄=花撒
如果您读文章后有收获,可以打赏我喝咖啡哦~