javascript设计模式之策略模式学习笔记

1. 理解javascript中的策略模式

策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

使用策略模式的优点如下：

优点：

      1. 策略模式利用组合，委托等技术和思想，有效的避免很多if条件语句。

      2. 策略模式提供了开放-封闭原则，使代码更容易理解和扩展。

      3. 策略模式中的代码可以复用。

一：使用策略模式计算奖金；

下面的demo是我在书上看到的，但是没有关系，我们只是来理解下策略模式的使用而已，我们可以使用策略模式来计算奖金问题；

比如公司的年终奖是根据员工的工资和绩效来考核的，绩效为A的人，年终奖为工资的4倍，绩效为B的人，年终奖为工资的3倍，绩效为C的人，年终奖为工资的2倍；现在我们使用一般的编码方式会如下这样编写代码：

var calculateBouns = function(salary,level) {
  if(level === 'A') {
    return salary * 4;
  }
  if(level === 'B') {
    return salary * 3;
  }
  if(level === 'C') {
    return salary * 2;
  }
};
// 调用如下：
console.log(calculateBouns(4000,'A')); // 16000
console.log(calculateBouns(2500,'B')); // 7500

第一个参数为薪资，第二个参数为等级；

代码缺点如下：

calculateBouns 函数包含了很多if-else语句。

calculateBouns 函数缺乏弹性，假如还有D等级的话，那么我们需要在calculateBouns 函数内添加判断等级D的if语句；

算法复用性差，如果在其他的地方也有类似这样的算法的话，但是规则不一样，我们这些代码不能通用。

2. 使用组合函数重构代码

组合函数是把各种算法封装到一个个的小函数里面，比如等级A的话，封装一个小函数，等级为B的话，也封装一个小函数，以此类推；如下代码：

var performanceA = function(salary) {
  return salary * 4;
};
var performanceB = function(salary) {
  return salary * 3;
};
    
var performanceC = function(salary) {
  return salary * 2
};
var calculateBouns = function(level,salary) {
  if(level === 'A') {
    return performanceA(salary);
  }
  if(level === 'B') {
    return performanceB(salary);
  }
  if(level === 'C') {
    return performanceC(salary);
  }
};
// 调用如下
console.log(calculateBouns('A',4500)); // 18000

代码看起来有点改善，但是还是有如下缺点：

calculateBouns 函数有可能会越来越大，比如增加D等级的时候，而且缺乏弹性。

3. 使用策略模式重构代码

策略模式指的是 定义一系列的算法，把它们一个个封装起来，将不变的部分和变化的部分隔开，实际就是将算法的使用和实现分离出来；算法的使用方式是不变的，都是根据某个算法取得计算后的奖金数，而算法的实现是根据绩效对应不同的绩效规则；

一个基于策略模式的程序至少由2部分组成，第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context，该Context接收客户端的请求，随后把请求委托给某一个策略类。我们先使用传统面向对象来实现；

如下代码：

var performanceA = function(){};
performanceA.prototype.calculate = function(salary) {
  return salary * 4;
};   
var performanceB = function(){};
performanceB.prototype.calculate = function(salary) {
  return salary * 3;
};
var performanceC = function(){};
performanceC.prototype.calculate = function(salary) {
  return salary * 2;
};
// 奖金类
var Bouns = function(){
  this.salary = null;  // 原始工资
  this.levelObj = null; // 绩效等级对应的策略对象
};
Bouns.prototype.setSalary = function(salary) {
  this.salary = salary; // 保存员工的原始工资
};
Bouns.prototype.setlevelObj = function(levelObj){
  this.levelObj = levelObj; // 设置员工绩效等级对应的策略对象
};
// 取得奖金数
Bouns.prototype.getBouns = function(){
  // 把计算奖金的操作委托给对应的策略对象
  return this.levelObj.calculate(this.salary);
};
var bouns = new Bouns();
bouns.setSalary(10000);
bouns.setlevelObj(new performanceA()); // 设置策略对象
console.log(bouns.getBouns()); // 40000
    
bouns.setlevelObj(new performanceB()); // 设置策略对象
console.log(bouns.getBouns()); // 30000

如上代码使用策略模式重构代码，可以看到代码职责更新分明，代码变得更加清晰。

4. Javascript版本的策略模式

//代码如下：
var obj = {
    "A": function(salary) {
      return salary * 4;
    },
    "B" : function(salary) {
      return salary * 3;
    },
    "C" : function(salary) {
      return salary * 2;
    } 
};
var calculateBouns =function(level,salary) {
  return obj[level](salary);
};
console.log(calculateBouns('A',10000)); // 40000

可以看到代码更加简单明了；

策略模式指的是定义一系列的算法，并且把它们封装起来，但是策略模式不仅仅只封装算法，我们还可以对用来封装一系列的业务规则，只要这些业务规则目标一致，我们就可以使用策略模式来封装它们；

表单效验

比如我们经常来进行表单验证，比如注册登录对话框，我们登录之前要进行验证操作：比如有以下几条逻辑：

用户名不能为空

密码长度不能小于6位。

手机号码必须符合格式。

比如HTML代码如下：

<form action = "http://www.baidu.com" id="registerForm" method = "post">
    <p>
      <label>请输入用户名：</label>
      <input type="text" name="userName"/>
    </p>
    <p>
      <label>请输入密码：</label>
      <input type="text" name="password"/>
    </p>
    <p>
      <label>请输入手机号码：</label>
      <input type="text" name="phoneNumber"/>
    </p>
</form>

我们正常的编写表单验证代码如下：

var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function(){
  if(registerForm.userName.value === '') {
    alert('用户名不能为空');
    return;
  }
  if(registerForm.password.value.length < 6) {
    alert("密码的长度不能小于6位");
    return;
  }
  if(!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
    alert("手机号码格式不正确");
    return;
  }
}

但是这样编写代码有如下缺点：

1.registerForm.onsubmit 函数比较大，代码中包含了很多if语句；

2.registerForm.onsubmit 函数缺乏弹性，如果增加了一种新的效验规则，或者想把密码的长度效验从6改成8，我们必须改registerForm.onsubmit 函数内部的代码。违反了开放-封闭原则。

3. 算法的复用性差，如果在程序中增加了另外一个表单，这个表单也需要进行一些类似的效验，那么我们可能又需要复制代码了；

下面我们可以使用策略模式来重构表单效验；

第一步我们先来封装策略对象；如下代码：

var strategy = {
  isNotEmpty: function(value,errorMsg) {
    if(value === '') {
      return errorMsg;
    }
  },
  // 限制最小长度
  minLength: function(value,length,errorMsg) {
    if(value.length < length) {
      return errorMsg;
    }
  },
  // 手机号码格式
  mobileFormat: function(value,errorMsg) {
    if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
      return errorMsg;
    }
  } 
};

接下来我们准备实现Validator类，Validator类在这里作为Context，负责接收用户的请求并委托给strategy 对象，如下代码：

var Validator = function(){
  this.cache = []; // 保存效验规则
};
Validator.prototype.add = function(dom,rule,errorMsg) {
  var str = rule.split(":");
  this.cache.push(function(){
    // str 返回的是 minLength:6 
    var strategy = str.shift();
    str.unshift(dom.value); // 把input的value添加进参数列表
    str.push(errorMsg); // 把errorMsg添加进参数列表
    return strategys[strategy].apply(dom,str);
  });
};
Validator.prototype.start = function(){
  for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {
    var msg = validatorFunc(); // 开始效验 并取得效验后的返回信息
    if(msg) {
      return msg;
    }
  }
};

Validator类在这里作为Context，负责接收用户的请求并委托给strategys对象。上面的代码中，我们先创建一个Validator对象，然后通过validator.add方法往validator对象中添加一些效验规则，validator.add方法接收3个参数，如下代码：

validator.add(registerForm.password,'minLength:6','密码长度不能小于6位');

registerForm.password 为效验的input输入框dom节点；

minLength:6： 是以一个冒号隔开的字符串，冒号前面的minLength代表客户挑选的strategys对象，冒号后面的数字6表示在效验过程中所必须验证的参数，minLength:6的意思是效验 registerForm.password 这个文本输入框的value最小长度为6位；如果字符串中不包含冒号，说明效验过程中不需要额外的效验信息；

第三个参数是当效验未通过时返回的错误信息；

当我们往validator对象里添加完一系列的效验规则之后，会调用validator.start()方法来启动效验。如果validator.start()返回了一个errorMsg字符串作为返回值，说明该次效验没有通过，此时需要registerForm.onsubmit方法返回false来阻止表单提交。下面我们来看看初始化代码如下：

var validateFunc = function(){
  var validator = new Validator(); // 创建一个Validator对象
  /* 添加一些效验规则 */
  validator.add(registerForm.userName,'isNotEmpty','用户名不能为空');
  validator.add(registerForm.password,'minLength:6','密码长度不能小于6位');
  validator.add(registerForm.userName,'mobileFormat','手机号码格式不正确');

  var errorMsg = validator.start(); // 获得效验结果
  return errorMsg; // 返回效验结果
};
var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function(){
  var errorMsg = validateFunc();
  if(errorMsg){
    alert(errorMsg);
    return false;
  }
}

下面是所有的代码如下：

var strategys = {
  isNotEmpty: function(value,errorMsg) {
    if(value === '') {
      return errorMsg;
    }
  },
  // 限制最小长度
  minLength: function(value,length,errorMsg) {
    if(value.length < length) {
      return errorMsg;
    }
  },
  // 手机号码格式
  mobileFormat: function(value,errorMsg) {
    if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
      return errorMsg;
    }
  } 
};
var Validator = function(){
  this.cache = []; // 保存效验规则
};
Validator.prototype.add = function(dom,rule,errorMsg) {
  var str = rule.split(":");
  this.cache.push(function(){
    // str 返回的是 minLength:6 
    var strategy = str.shift();
    str.unshift(dom.value); // 把input的value添加进参数列表
    str.push(errorMsg); // 把errorMsg添加进参数列表
    return strategys[strategy].apply(dom,str);
  });
};
Validator.prototype.start = function(){
  for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {
    var msg = validatorFunc(); // 开始效验 并取得效验后的返回信息
    if(msg) {
      return msg;
    }
  }
};

var validateFunc = function(){
  var validator = new Validator(); // 创建一个Validator对象
  /* 添加一些效验规则 */
  validator.add(registerForm.userName,'isNotEmpty','用户名不能为空');
  validator.add(registerForm.password,'minLength:6','密码长度不能小于6位');
  validator.add(registerForm.userName,'mobileFormat','手机号码格式不正确');

  var errorMsg = validator.start(); // 获得效验结果
  return errorMsg; // 返回效验结果
};
var registerForm = document.getElementById("registerForm");
registerForm.onsubmit = function(){
  var errorMsg = validateFunc();
  if(errorMsg){
    alert(errorMsg);
    return false;
  }
};

如上使用策略模式来编写表单验证代码可以看到好处了，我们通过add配置的方式就完成了一个表单的效验；这样的话，那么代码可以当做一个组件来使用，并且可以随时调用，在修改表单验证规则的时候，也非常方便，通过传递参数即可调用；

给某个文本输入框添加多种效验规则，上面的代码我们可以看到，我们只是给输入框只能对应一种效验规则，比如上面的我们只能效验输入框是否为空，validator.add(registerForm.userName,'isNotEmpty','用户名不能为空');但是如果我们既要效验输入框是否为空，还要效验输入框的长度不要小于10位的话，那么我们期望需要像如下传递参数：

validator.add(registerForm.userName,[{strategy:'isNotEmpty',errorMsg:'用户名不能为空'}，{strategy: 'minLength:6',errorMsg:'用户名长度不能小于6位'}])

我们可以编写代码如下：

// 策略对象
var strategys = {
  isNotEmpty: function(value,errorMsg) {
    if(value === '') {
      return errorMsg;
    }
  },
  // 限制最小长度
  minLength: function(value,length,errorMsg) {
    if(value.length < length) {
      return errorMsg;
    }
  },
  // 手机号码格式
  mobileFormat: function(value,errorMsg) {
    if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
      return errorMsg;
    }
  } 
};
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 strategys[strategy].apply(dom,strategyAry);
      });
    })(rule);
  }
};
Validator.prototype.start = function(){
  for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {
  var msg = validatorFunc(); // 开始效验 并取得效验后的返回信息
  if(msg) {
    return msg;
  }
  }
};
// 代码调用
var registerForm = document.getElementById("registerForm");
var validateFunc = function(){
  var validator = new Validator(); // 创建一个Validator对象
  /* 添加一些效验规则 */
  validator.add(registerForm.userName,[
    {strategy: 'isNotEmpty',errorMsg:'用户名不能为空'},
    {strategy: 'minLength:6',errorMsg:'用户名长度不能小于6位'}
  ]);
  validator.add(registerForm.password,[
    {strategy: 'minLength:6',errorMsg:'密码长度不能小于6位'},
  ]);
  validator.add(registerForm.phoneNumber,[
    {strategy: 'mobileFormat',errorMsg:'手机号格式不正确'},
  ]);
  var errorMsg = validator.start(); // 获得效验结果
  return errorMsg; // 返回效验结果
};
// 点击确定提交
registerForm.onsubmit = function(){
  var errorMsg = validateFunc();
  if(errorMsg){
    alert(errorMsg);
    return false;
  }
}

注意：如上代码都是按照书上来做的，都是看到书的代码，最主要我们理解策略模式实现，比如上面的表单验证功能是这样封装的代码，我们平时使用jquery插件表单验证代码原来是这样封装的，为此我们以后也可以使用这种方式来封装表单等学习；

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# js  # 设计模式  # 策略模式  # javascript设计模式之策略模式  # JavaScript设计模式之策略模式实现原理详解  # javascript设计模式 – 策略模式原理与用法实例分析  # JavaScript设计模式之策略模式详解  # 学习JavaScript设计模式之策略模式  # javascript设计模式--策略模式之输入验证  # 学习JavaScript设计模式(策略模式)  # JavaScript设计模式之策略模式实例  # JavaScript设计模式策略模式案例分享  # 表单  # 为空  # 输入框  # 的人  # 都是  # 可以看到  # 不正确  # 创建一个  # 请输入  # 重构  # 可以使用  # 的是  # 在这里  # 第一个  # 是这样  # 复用  # 第二个  # 指的是  # 并取得  # 书上 

相关文章： 建站之星展会模板：智能建站与自助搭建高效解决方案  GML (Geography Markup Language)是什么，它如何用XML来表示地理空间信息？  如何通过.red域名打造高辨识度品牌网站？  高性价比服务器租赁——企业级配置与24小时运维服务  成都响应式网站开发,dw怎么把手机适应页面变成网页？  建站主机核心功能解析：服务器选择与网站搭建流程指南  如何做静态网页,sublimetext3.0制作静态网页？  网站代码制作软件有哪些,如何生成自己网站的代码？  设计网站制作公司有哪些,制作网页教程？  如何在七牛云存储上搭建网站并设置自定义域名？  已有域名如何免费搭建网站？  东莞市网站制作公司有哪些,东莞找工作用什么网站好？  网站制作难吗安全吗,做一个网站需要多久时间？  在线制作视频网站免费,都有哪些好的动漫网站？  上海网站制作网站建设公司,建筑电工证网上查询系统入口？  专业制作网站的公司哪家好,建立一个公司网站的费用.有哪些部分,分别要多少钱？  简易网站制作视频教程,使用记事本编写一个简单的网页html文件？  如何通过可视化优化提升建站效果？  如何登录建站主机？访问步骤全解析  长春网站建设制作公司,长春的网络公司怎么样主要是能做网站的？  如何通过服务器快速搭建网站？完整步骤解析  网站制作专业公司有哪些,如何制作一个企业网站，建设网站的基本步骤有哪些？  学校免费自助建站系统：智能生成+拖拽设计+多端适配  ,想在网上投简历，哪几个网站比较好？  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  行程制作网站有哪些,第三方机票电子行程单怎么开？  制作企业网站建设方案,怎样建设一个公司网站？  如何在IIS管理器中快速创建并配置网站？  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  如何在阿里云高效完成企业建站全流程？  网站专业制作公司,网站编辑是做什么的？好做吗？工作前景如何？  独立制作一个网站多少钱,建立网站需要花多少钱？  巅云智能建站系统：可视化拖拽+多端适配+免费模板一键生成  ,柠檬视频怎样兑换vip？  婚礼视频制作网站,学习*后期制作的网站有哪些？  如何通过虚拟主机空间快速建站？  建站之星2.7模板快速切换与批量管理功能操作指南  b2c电商网站制作流程,b2c水平综合的电商平台？  北京的网站制作公司有哪些,哪个视频网站最好？  建站之星ASP如何实现CMS高效搭建与安全管理？  个人网站制作流程图片大全,个人网站如何注销？  建站主机类型有哪些？如何正确选型  h5在线制作网站电脑版下载,h5网页制作软件？  魔方云NAT建站如何实现端口转发？  家具网站制作软件,家具厂怎么跑业务？  广德云建站网站建设方案与建站流程优化指南  建站之星CMS五站合一模板配置与SEO优化指南  网站制作公司排行榜,抖音怎样做个人官方网站  如何在阿里云域名上完成建站全流程？  微信小程序 五星评分(包括半颗星评分)实例代码