欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-20 23:34:09
策略模式(Strategy)定义一系列的算法,把它们一个个封装起来,并且使他们可以互相替换。策略模式有着广泛的应用。我们用例子来说明:策略模式计算奖金公司年终奖根据员工的工资基数和绩效来发放,例如,绩效为 S 的年终奖有 4 倍工资,绩效为 A 的有三倍工资,B 为 2 倍工资。我们用代码来实现:最初代码实现// 编写calculateBonus函数计算,输入参数为工资以及绩效。var calculateBonus = function(performanceLevel, salary)...

策略模式(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

更多精彩内容可以访问我的博客Aelous-BLog

本文地址:https://blog.csdn.net/Aelous_dp/article/details/107461282

相关标签: 前端