blog | javascript设计模式学习笔记 Nodejs最佳实践 javascript标准对象

策略模式的定义是:定义一系列的算法，把它们一个个封装起来（策略类），并且使它们可以相互替换（环境类）

换句话说就是：定义一系列的算法，把它们各自封装成策略类，算法被封装在策略类内部的方法里。在客户对 Context（环境类）发起请求的时候，Context 总是把请求委托给这些策略对象中间的某一个进行计算。

策略模式的目的就是将算法的使用与算法的实现分离开来。

JavaScript 版本的策略模式

计算奖金

// 定义一系列计算奖金的策略 （策略类Strategy）
var strategies = {
  S: function(salary) {
    return salary * 4;
  },
  A: function(salary) {
    return salary * 3;
  },
  B: function(salary) {
    return salary * 2;
  }
};
// 定义计算奖金的执行环境  （环境类Context）【策略模式核心】
var calculateBonus = function(level, salary) {
  return strategies[level](salary); //委托对应的策略对象计算奖金
};

console.log(calculateBonus("S", 20000)); // 输出:80000，计算 S等级 20000薪水的奖金
console.log(calculateBonus("A", 10000)); // 输出:30000，计算 A等级 10000薪水的奖金

// 【策略对象】strategies：负责封装计算奖金有关的逻辑
// 【环境对象】calculateBonus：并没有计算奖金的能力，而是把这个职责委托给了某个策略对象


// 无命名空间的策略模式实现
//为了清楚地表示这是一个策略模式，我们特意使用了 strategies 这个名字。如果去掉 strategies，我们还能认出这是一个策略模式的实现吗?代码如下:
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

多态在策略模式中的体现

通过使用策略模式重构代码，我们消除了原程序中大片的条件分支语句。所有跟计算奖金有关的逻辑不再放在 Context 中，而是分布在各个策略对象中。Context 并没有计算奖金的能力，而是把这个职责委托给了某个策略对象。每个策略对象负责的算法已被各自封装在对象内部。当我们对这些策略对象发出“计算奖金”的请求时，它们会返回各自不同的计算结果，这正是对象多态性的体现，也是“它们可以相互替换”的目的。替换 Context 中当前保存的策略对象，便能执行不同的算法来得到我们想要的结果。

策略模式的优缺点

策略模式是一种常用且有效的设计模式，可以总结出策略模式的一些优点：

 策略模式利用组合、委托和多态等技术和思想，可以有效地避免多重条件选择语句。
 策略模式提供了对开放—封闭原则的完美支持，将算法封装在独立的 strategy 中，使得它

们易于切换，易于理解，易于扩展。
 策略模式中的算法也可以复用在系统的其他地方，从而避免许多重复的复制粘贴工作。
 在策略模式中利用组合和委托来让 Context 拥有执行算法的能力，这也是继承的一种更轻

便的替代方案。

当然，策略模式也有一些缺点，但这些缺点并不严重。

首先，使用策略模式会在程序中增加许多策略类或者策略对象，但实际上这比把它们负责的逻辑堆砌在 Context 中要好。
其次，要使用策略模式，必须了解所有的 strategy（策略），必须了解各个 strategy 之间的不同点，这样才能选择一个合适的 strategy。比如，我们要选择一种合适的旅游出行路线，必须先了解选择飞机、火车、自行车等方案的细节。此时 strategy 要向客户暴露它的所有实现，这是违反最少知识原则的。

示例1：用策略模式实现表单校验（一个input对应一个校验规则）

// 一系列验证规则的策略对象
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 类。Validator 类在这里作为 Context，负责接收用户的请求 并委托给 strategy 对象。在给出 Validator 类的代码之前，有必要提前了解用户是如何向 Validator 类发送请求的，这有助于我们知道如何去编写 Validator 类的代码。代码如下:

var validataFunc = function () {
  var validator = new Validator(); // 创建一个 validator 对象
  /***************添加一些校验规则****************/
  validator.add( registerForm.userName, 'isNonEmpty', '用户名不能为空' );
  validator.add( registerForm.password, 'minLength:6', '密码长度不能少于 6 位' );
  validator.add( registerForm.phoneNumber, 'isMobile', '手机号码格式不正确' );
  var errorMsg = validator.start(); // 获得校验结果
  return errorMsg; // 返回校验结果
}
var registerForm = document.getElementById( 'registerForm' );
registerForm.onsubmit = function () {
  var errorMsg = validataFunc(); // 如果 errorMsg 有确切的返回值，说明未通过校验
  if ( errorMsg ) {
    alert( errorMsg );
    return false; // 阻止表单提交
  }
};

从这段代码中可以看到，我们先创建了一个 validator 对象，然后通过 validator.add 方法，往 validator 对象中添加一些校验规则。validator.add 方法接受 3 个参数，以下面这句代码说明: validator.add( registerForm.password, ‘minLength:6’, ‘密码长度不能少于 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(); // 把校验的步骤用空函数包装起来，并且放入 cache
    ary.unshift( dom.value );
    ary.push( errorMsg ); //
    return strategies[strategy].apply( dom, ary )
  })
}

Validator.prototype.start = function () {
  for (let i = 0,validatorFunc; validatorFunc= this.cache[i++];) {
    var msg = validatorFunc(); //开始校验，并取得校验后返回信息
    if (msg) {
      return msg;
    }
  }
}

示例2：给某个文本输入框添加多种校验规则

<form action="http:// xxx.com/register" id="registerForm" method="post"> 
    请输入用户名:<input type="text" name="userName"/ >
    请输入密码:<input type="text" name="password"/ > 
    请输入手机号码:<input type="text" name="phoneNumber"/ > 
    <button>提交</button>
</form>

/***********************策略对象**************************/
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 validataFunc = function() {
  var validator = new Validator();
  validator.add(registerForm.userName, [
    {
      strategy: "isNonEmpty",
      errorMsg: "用户名不能为空"
    },
    {
      strategy: "minLength:6",
      errorMsg: "用户名长度不能小于 10 位"
    }
  ]);
  validator.add(registerForm.password, [
    {
      strategy: "minLength:6",
      errorMsg: "密码长度不能小于 6 位"
    }
  ]);
  validator.add(registerForm.phoneNumber, [
    {
      strategy: "isMobile",
      errorMsg: "手机号码格式不正确"
    }
  ]);
  var errorMsg = validator.start();
  return errorMsg;
};
registerForm.onsubmit = function() {
  var errorMsg = validataFunc();
  if (errorMsg) {
    alert(errorMsg);
    return false;
  }
};

示例2：使用策略模式实现缓动动画

// 这些算法都接受 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
  },
  strongEaseOut: function ( t, b, c, d ) {
    return c * ( ( t = t / d - 1 ) * t )
  },
  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 )
  }
};
// 现在进入代码实现阶段，首先在页面中放置一个 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 节点的位置，即 dom 的初始位置
  this.endPos = 0; // 动画结束时，dom 节点的位置，即 dom 的目标位置
  this.propertyName = null; // dom 节点需要被改变的 css 属性名
  this.easing = null; // 缓动算法
  this.duration = null; // 动画持续时间
};

//接下来 Animate.prototype.start 方法负责启动这个动画，在动画被启动的瞬间，要记录一些 信息，供缓动算法在以后计算小球当前位置的时候使用。在记录完这些信息之后，此方法还要负 责启动定时器。代码如下:

/**
 * Animate.prototype.start 方法接受以下 4 个参数。
 * propertyName:要改变的 CSS 属性名，比如'left'、'top'，分别表示左右移动和上下移动。
 * endPos: 小球运动的目标位置。
 * duration: 动画持续时间。
 * easing: 缓动算法。
 *  */
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.step 方法，该方法代表小球运动的每一帧要做的事情。在此处，这个方法负责计算小球的当前位置和调用更新 CSS 属性值的方法
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' );
// 通过这段代码，可以看到小球按照我们的期望以各种各样的缓动算法在页面中运动