一、定义
定义一系列的算法，把他们一个个封装起来，并且使他们可以互相替换
动画中缓动函数，用来控制动画的运动方式，比如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绘制，就必须使用绘制椭圆、弧线等插件，其中的绘制过程可能还要设计到地图的相关业务，比如权限以及填充的颜色、线条的颜色等这样的业务方面的需求。因此这样的需求是不可能使用一个统一的绘制方法的，这样就可以使用策略模式封装业务代码来处理。
