javascript中的设计模式之策略模式

一、定义

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

二、举例

　　动画中缓动函数，用来控制动画的运动方式，比如linear、cubic、bounce等

三、结构

　　策略模式分为两个部分，一个是策略类，用来将算法进行封装，另一个是环境类，用来接收请求，并把这个请求委托给策略类。

四、实现

1.封装算法

试想这样的场景，所有的职位的基本工资是按照员工的工作年限计算的，

　　工作3-5年就是等级P5：基本工资 * 1.3， 

　　工作5-10年就是等级P6：基本工资 * 1.5 + 补助，

　　工作10-15年就是等级P7：基本工资 * 2.0 + 补助 + 分红，

　　大于15年就是等级P8：基本工资 * 3.0 + 补助 + 分红 * 2，

　　如果使用平常的方法计算工资就像这样：

/**
 * 计算工资方法
 * @param level 等级
 * @returns {number} 工资
 */
function getSalary(level){
    var basicSalary = 3000; // 基本工资
    var allowance = 2000;   // 补助
    var bonus = 10000;  // 分红
    if(level === "P5"){
        return basicSalary;
    }else if(level === "P6"){
        return basicSalary * 1.2;
    }else if(level === "P7"){
        return basicSalary * 1.5 + allowance;
    }else if(level === "P8"){
        return basicSalary * 2 + allowance + bonus;
    }else{
        return basicSalary * 3 + allowance + bonus * 2;
    }
}
getSalary("P6");   // 3600
getSalary("P7");  // 18000;
getSalary("P8");  // 31000;

 

从上面的代码中，我们看到这段代码的缺陷：

　　1.包含了太多的if-else，即便换成switch还是显得很臃肿。

　　2.缺乏弹性，如果增加了一个等级的计算方法，就需要更改getSalary代码

　　3.算法的复用性差，算法不能够被其他的地方使用

下面使用策略模式改写：

// 策略类
var salaryStrategy = {
    basicSalary: 3000,
    allowance: 2000,
    bonus: 10000,
    "P5": function () {
        return this.basicSalary;
    },
    "P6": function () {
        return this.basicSalary * 1.2;
    },
    "P7": function () {
        return this. basicSalary * 1.5 + this.allowance;
    },
    "P8": function () {
        return this.basicSalary * 3 + this.allowance + this.bonus * 2;
    }
};

// 执行环境
function getSalary(level){
    return salaryStrategy[level]();
}

getSalary("P5");   // 3000
getSalary("P6");   // 3600
getSalary("P8");   // 31000

 

　　改写之后，salaryStrategy专门用于封装算法，这样我们可以对其中的算法进行扩展，可以方便的进行复用。事实上在js中，可以理解用于封装算法的策略模式中的策略类就是一个哈希表，便于获取。

著名的动画引擎tween.js对于动画函数的封装就是这样的方式，我们可以看下他的策略类对于算法的封装（使用ts编写）：

export type EasingFunction = (amount: number) => number

/**
 * The Ease class provides a collection of easing functions for use with tween.js.
 */
const Easing = {
    Linear: {
        None: function (amount: number): number {
            return amount
        },
    },
    Back: {
        In: function (amount: number): number {
            const s = 1.70158
            return amount * amount * ((s + 1) * amount - s)
        },
        // ...
    },
    Bounce: {
        In: function (amount: number): number {
            return 1 - Easing.Bounce.Out(1 - amount)
        }
        // ...
    },
}
export default Easing

2.封装业务

　　当然我们可以不仅仅封装算法，还可以封装我们自定义的业务规则。比如我在开发中遇到的情况，展示二维地图后需要请求某个图层的数据，图层包括多个对象，比如点、线、面、椭圆、弧线等等，这时我们就需要将这些图形绘制到地图上面，比如后端传过来的数据是这样的：

// 点数据
var pointData = {
    type: "Point",  // 图形类型
    geography: [40,130] // 经纬度
};
// 线数据
var lineData= {
    type: "Line",  // 图形类型
    geography: [[40,130],[40.3,130.4],[43.2,134.3]] // 经纬度
};
// 椭圆数据
var ellipseData = {
    type: 'Ellipse',
    geography: {
        centerPoint: [40,130],  // 椭圆中心点
        xAxis: 300, // 横轴长度
        yAxis:400,  // 纵轴长度
        angel: 45   // 偏转角度
    }
}

　　可以看到随着type的不同，geography参数也不同，椭圆的geography更是发生了大改变。而且在通用的地理数据中，是不存在椭圆这样的数据类型，如果想要直接用canvas绘制，就必须使用绘制椭圆、弧线等插件，其中的绘制过程可能还要设计到地图的相关业务，比如权限以及填充的颜色、线条的颜色等这样的业务方面的需求。因此这样的需求是不可能使用一个统一的绘制方法的，这样就可以使用策略模式封装业务代码来处理。