JS设计模式学习 - 策略模式

最新推荐文章于 2023-02-27 16:47:37 发布

Aelousdp

最新推荐文章于 2023-02-27 16:47:37 发布

阅读量453

点赞数 6

分类专栏：前端文章标签：设计模式 javascript

本文链接：https://blog.csdn.net/Aelous_dp/article/details/107461282

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

策略模式(Strategy)

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

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

策略模式计算奖金

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

最初代码实现

// 编写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 的系数做修改，那我们必须深入函数内部来实现，这是违反开放-封闭原则的。
算法的复用性差，如果在程序的其他地方需要重用这些计算奖金的算法呢？我们的选择只有复制粘贴。

所以我们需要重构代码。

组合函数重构代码

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

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 中要维持对某个策略对象的饮用。

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

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

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

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 定义为函数：

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 中当前保存的策略对象，便能执行不同的算法来得到我们想要的结果。

策略模式实现动画

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

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

思路和准备工作

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

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

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

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

让小球动起来

我们来认识几个常见的缓动算法，来源于 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节点初始位置
  this.endPos = 0; // 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");
// 注：同时执行，只会执行后一个。

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

更广义的“算法”

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

表单校验

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

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

我们编写如下规则：

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

表单校验的初始版本

此时没有引入策略模式，代码如下：

<html>
  <body>
    <form action="http://xxxxx.com/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 函数内部去实现，这是违反开放-封闭原则的。
算法的复用性差，如果在程序中增加了另外一个表单，这个表单也需要进行一些类似的校验，我们很可能将这些校验逻辑复制的漫山遍野。

用策略模式重构表单

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

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 对象。代码如下：

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 个参数，以下面这个代码说明：

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 类的实现：

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 个字符。可以看到这时候的修改是毫不费力的。代码如下：

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

添加多种校验规则

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

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

validator.add(registerForm.userName, [
  {
    startegy: "isNonEmpty",
    errorMsg: "用户名不能为空"
  },
  {
    startegy: "minLength:10",
    errorMsg: "用户名长度不能小于10位"
  }
]);

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

<html>
  <body>
    <form action="http://xxxxx.com/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 中，函数对象的“多态性”来的更简单。

如下代码，我们能否认出来：

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