JavaScript 设计模式：策略模式实战案例解析

尽管代码结构有所改善，但条件判断依然存在。

3.3 面向对象实现：策略模式

将每种绩效包装为独立的策略类：

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;
};

// 奖金类（环境角色）
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

新增绩效 C 只需创建新策略类，无需修改现有代码，符合开放 - 封闭原则。

3.4 函数式实现：策略模式

利用 JavaScript 函数作为一等公民的特性，可直接将策略定义为函数对象：

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

此方式去除了类的冗余，代码更加简洁。

4. 多态：策略模式的核心

策略模式的灵活性依赖于多态。无论具体策略如何，只要具备相同的接口（如 calculate 方法），环境对象即可统一调用。在 JavaScript 中，由于动态特性，甚至不需要显式接口，只要函数签名匹配即可。

5. 案例二：缓动动画

5.1 动画原理

网页动画通过定时器逐帧改变元素属性坐标，利用视觉暂留形成运动效果。

5.2 缓动算法

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; }
};

5.3 动画类实现

将缓动算法作为策略注入动画类：

var Animate = function(dom) {
  this.dom = dom;
  this.startTime = 0;
  this.startPos = 0;
  this.endPos = 0;
  this.propertyName = null;
  this.easing = null;
  this.duration = null;
};

Animate.prototype.start = function(propertyName, endPos, duration, easing) {
  this.startTime = +new Date();
  this.startPos = this.dom.getBoundingClientRect()[propertyName];
  this.propertyName = propertyName;
  this.endPos = endPos;
  this.duration = duration;
  this.easing = tween[easing];

  var self = this;
  var timeId = setInterval(function() {
    if (self.step() === false) {
      clearInterval(timeId);
    }
  }, 19);
};

Animate.prototype.step = function() {
  var t = +new Date();
  if (t >= this.startTime + this.duration) {
    this.update(this.endPos);
    return false;
  }
  var pos = this.easing(t - this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
  this.update(pos);
  return true;
};

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');

更换算法名称即可改变运动轨迹，体现了策略模式的灵活切换能力。

6. 优缺点分析

优点

• 消除复杂的条件分支，提升代码可读性。
• 算法独立管理，扩展方便，符合开放 - 封闭原则。
• 支持算法复用与组合。
• 用组合替代继承，降低耦合度。

缺点

• 增加策略类数量，文件增多。
• 使用者需了解可用策略，否则配置困难。

7. JavaScript 函数特性

在 JavaScript 中，函数即对象，可自由传递。因此策略模式常被简化，甚至隐于代码背后，但其核心思想——分离变化、封装行为——依然适用。

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

8. 总结

策略模式通过将算法封装为独立对象，实现运行时动态切换，有效消除复杂的 if-else 结构。文章通过年终奖计算和缓动动画两个案例，展示了从基础逻辑到面向对象及函数式实现的演进过程。该模式符合开放封闭原则，提升了代码的扩展性与复用性，是前端开发中常用的设计模式之一。