5-策略模式

参考书籍: Javascript设计模式与开发实践（曾探）

在程序设计中，要实现某一个功能有多种方案可以选择。比如一个压缩文件的程序，既可以选择zip 算法，也可以选择gzip 算法。

这些算法灵活多样，而且可以随意互相替换。这种解决方案就是本章将要介绍的策略模式。

策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

一、使用策略模式计算奖金

很多公司的年终奖是根据员工的工资基数和年底绩效情况来发放的。例如，绩效为S 的人年终奖有4 倍工资，绩效为A 的人年终奖有3 倍工资，而绩效为B 的人年终奖是2 倍工资。假设财务部要求我们提供一段代码，来方便他们计算员工的年终奖。

1、最初的代码实现

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 函数的内部实现，这是违反开放封闭原则的。

• 算法的复用性差，如果在程序的其他地方需要重用这些计算奖金的算法呢？我们的选择只有复制和粘贴。

因此，我们需要重构这段代码。

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 函数有可能越来越庞大，而且在系统变化的时候缺乏弹性。

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 ); 
    // 把计算奖金的操作委托给对应的策略对象
};

//调用
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

再来回顾一下策略模式的思想：

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

这句话如果说得更详细一点，就是：

定义一系列的算法，把它们各自封装成策略类，算法被封装在策略类内部的方法里。在客户对Context 发起请求的时候，Context 总把请求委托给这些策略对象中间的某一个进行计算。

二、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

三、多态在策略模式中的体现

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

四、使用策略模式实现缓动动画

如果让一些不太了解前端开发的程序员来投票，选出他们眼中JavaScript 语言在Web 开发中的两大用途，我想结果很有可能是这样的：

• 编写一些让div 飞来飞去的动画
• 验证表单

虽然这只是一句玩笑话，但从中可以看到动画在Web 前端开发中的地位。一些别出心裁的动画效果可以让网站增色不少。

有一段时间网页游戏非常流行，HTML5 版本的游戏可以达到不逊于Flash 游戏的效果。我曾经编写过HTML5 版本的街头霸王游戏，让游戏的主角跳跃或是移动，实际上只是让这个div 按照一定的缓动算法进行运动而已。

1、实现动画效果的原理

用JavaScript 实现动画效果的原理跟动画片的制作一样，动画片是把一些差距不大的原画以较快的帧数播放，来达到视觉上的动画效果。

在JavaScript 中，可以通过连续改变元素的某个CSS属性，比如left、top、background-position 来实现动画效果。图5-1 就是通过改变节点的background-position，让人物动起来的。

2、思路和一些准备工作

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

现在来分析实现这个程序的思路。在运动开始之前，需要提前记录一些有用的信息，至少包括以下信息：

• 动画开始时，小球所在的原始位置；
• 小球移动的目标位置；
• 动画开始时的准确时间点；
• 小球运动持续的时间。

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

3、让小球运动起来

在实现完整的功能之前，我们先了解一些常见的缓动算法，这些算法最初来自Flash，但可以非常方便地移植到其他语言中。

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

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：

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

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

var Animate = function( dom ){
    this.dom = dom; // 进行运动的dom 节点
    this.startTime = 0; // 动画开始时间
    this.startPos = 0; // 动画开始时，dom 节点的位置，即dom 的初始位置
    this.endPos = 0; // 动画结束时，dom 节点的位置，即dom 的目标位置
    this.propertyName = null; // dom 节点需要被改变的css 属性名
    this.easing = null; // 缓动算法
    this.duration = null; // 动画持续时间
};

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

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。

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 方法：

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

如果不嫌麻烦，我们可以进行一些小小的测试：

var div = document.getElementById( 'div' );
var animate = new Animate( div );

animate.start( 'left', 500, 1000, 'strongEaseOut' );
// animate.start( 'top', 1500, 500, 'strongEaseIn' );

通过这段代码，可以看到小球按照我们的期望以各种各样的缓动算法在页面中运动。

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