轻松掌握JavaScript策略模式

定义：定义一系列的算法，把它们一个个封装成函数，也可把它们作为属性统一封装进一个对象，然后再定义一个方法，该方法可根据参数自动选择执行对应的算法。

一般用于在实现一个功能时，有很多个方案可选择的情况。

例子1：根据员工薪水salary、绩效等级S、A、B、C，来计算年终奖

 //封装了所有算法的策略对象
var strategies = {
  'S': function(salary){
    return salary*4;
  },
  'A': function(salary){
    return salary*3;
  },
  'B': function(salary){
    return salary*2;
  },
  'C': function(salary){
    return salary*1;
  }
} //定义自动选择算法的方法
var calculateBonus = function(level,salary){
  return strategies[level](salary);
}
//使用
calculateBonus('S',9000); //36000
calculateBonus('B',5000); //10000

例子2：表单验证

 //定义验证算法的策略对象
var strategies = function(){
  isEmpty:function(value,errorMsg){
    if(value = ''){
      return errorMsg;
    }
  }
  outRangle:function(value,min,max,errorMsg){
    if(value.length > max || value.length < min){
      return errorMsg;
    }
  }
  isSame:function(oldValue,newValue,errorMsg){
    if(newValue !== oldValue){
      return errorMsg;
    }
  }
  isMobile:function(value,errorMsg){
    if(!/(^1[3|5|8][0-9]{9}$)/.test(value)){
      return errorMsg;
    }
  }
  ......
}

也可不定义以下的Validator类，直接在触发失去焦点事件时调用strategies对象的属性方法来验证当前input项

 //定义Validator
var Validator = function(){
  this.cache = [];
}
Validator.prototype.add = function(elem,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(elem.value);
        strategyAry.push(errorMsg);
        return strategies[strategy].apply(elem,strategyAry);
      })
    })(rule)
  }
}
Validator.prototype.start = function(){
  for(var i = 0, func; func = this.cache[i++]){
    var errorMsg = func();
    if(errorMsg){
      return errorMsg;
    }
  }
}

使用：

var validator = new Validator();
validator.add(elem.userName,[
  {strategy:'isEmpty', errorMsg:'用户名不能为空'},
  {strategy:'outRangle:6:12', errorMsg:'用户名长度为6-12位'}
]);
......
var errorMsg = validator.start();
......

附：参数配置对象 
假如有一个函数foo(a,b,c,d,e,f...)，它的参数很多，这样的函数不好使用，参数不好记！比较好的方法是使用一个对象来包含这些参数，然后再把该对象传递给函数，函数再对这个对象的属性做处理

 var prop = {
  a:55,
  b:'ss',
  c:function(){...}
  d:{x:1,y:2}
  ...
}
foo(prop);

这样一来，使用函数时就不必去记参数顺序了，只需记住参数对象的几个属性名字就行，不易出错 
参考文献： 《JavaScript模式》 《JavaScript设计模式与开发实践》

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

赞 (0)

相关推荐

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

    1. 理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点: 1. 策略模式利用组合,委托等技术和思想,有效的避免很多if条件语句. 2. 策略模式提供了开放-封闭原则,使代码更容易理解和扩展. 3. 策略模式中的代码可以复用. 一:使用策略模式计算奖金: 下面的demo是我在书上看到的,但是没有关系,我们只是来理解下策略模式的使用而已,我们可以使用策略模式来计算奖金问题: 比如公司的年终奖是根据

  • 学习JavaScript设计模式之策略模式

    把不变的部分和变化的部分隔开是每个设计模式的主题. 条条大路通罗马.我们经常会遇到解决一件事情有多种方案,比如压缩文件,我们可以使用zip算法.也可以使用gzip算法.其灵活多样,我们可以采用策略模式解决. 一.定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 基于策略类模式的程序至少由两部分组成.第一个部分是一组策略类,策略类封装了具体的算法,并负责具体的计算过程.第二个部分是环境类Context,Context接收客户的请求,随后把请求委托给某一个策略类. 二.示例 计

  • 利用策略模式与装饰模式扩展JavaScript表单验证功能

    利用策略模式与装饰模式扩展JavaScript表单验证功能

    简单的表单验证 html结构 <!-- validata.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Validata</title> </head> <body> <form id="form"> <labe

  • 学习JavaScript设计模式(策略模式)

    学习JavaScript设计模式(策略模式)

    何为策略?比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路. 1.策略模式的定义 如果没有时间但是不在乎钱,可以选择坐飞机. 如果没有钱,可以选择坐大巴或者火车. 如果再穷一点,可以选择骑自行车. 在程序设计中,我们也常常遇到类似的情况,要实现某一个功能有多种方案可以选择.比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法. 定义:策略模式定义一系列的算法,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 策略模式有着广泛的应用.本

  • JavaScript设计模式之策略模式实例

    策略模式的意义是定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换. 一个小例子就能让我们一目了然. 回忆下jquery里的animate方法. 复制代码 代码如下: $( div ).animate( {"left: 200px"}, 1000, 'linear' );  //匀速运动 $( div ).animate( {"left: 200px"}, 1000, 'cubic' );  //三次方的缓动 这2句代码都是让div在1000ms内往右移动

  • 深入理解JavaScript系列（33）：设计模式之策略模式详解

    介绍 策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化不会影响到使用算法的客户. 正文 在理解策略模式之前,我们先来一个例子,一般情况下,如果我们要做数据合法性验证,很多时候都是按照swith语句来判断,但是这就带来几个问题,首先如果增加需求的话,我们还要再次修改这段代码以增加逻辑,而且在进行单元测试的时候也会越来越复杂,代码如下: 复制代码 代码如下: validator = {             validate: function (value, ty

  • javascript设计模式--策略模式之输入验证

    策略模式定义了算法家族,分别封装起来,让他们之间可以互相替换,此模式让算法的变化独立于使用算饭的客户. 先定义一个简单的输入表单: <!DOCTYPE html> <html> <head> <meta charset="utf-"> <style> .form{ width: px; height: px; #margin: px auto; } .form-item-label{ width:px; text-align:

  • JavaScript设计模式之策略模式详解

    在程序设计中,我们也常常遇到这种情况,要实现某一个功能我们有很多种算法可以实现. 这些算法灵活多样,而且可以随意互相替换.这种解决方案就是所谓的策略模式. 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. /* * pre:策略模式 * 示例:公司计算奖金,分A.B.C 三种绩效,计算方式如下 * 绩效为A,奖金乘以系数5 * 绩效为B,奖金乘以系数4 * 绩效为C,奖金乘以系数3 */ //-------- 示例1 ---------- var calcula

  • 详解JavaScript的策略模式编程

    我喜欢策略设计模式.我尽可能多的试着去使用它.究其本质,策略模式使用委托去解耦使用它们的算法类. 这样做有几个好处.他可以防止使用大条件语句来决定哪些算法用于特定类型的对象.将关注点分离开来,因此降低了客户端的复杂度,同时还可以促进子类化的组成.它提高了模块化和可测性.每一个算法都可以单独测试.每一个客户端都可以模拟算法.任意的客户端都能使用任何算法.他们可以互调.就像乐高积木一样. 为了实现策略模式,通常有两个参与者: 该策略的对象,封装了算法. 客户端(上下文)对象,以即插即用的方式能使用任

  • 轻松掌握JavaScript策略模式

    定义:定义一系列的算法,把它们一个个封装成函数,也可把它们作为属性统一封装进一个对象,然后再定义一个方法,该方法可根据参数自动选择执行对应的算法. 一般用于在实现一个功能时,有很多个方案可选择的情况. 例子1:根据员工薪水salary.绩效等级S.A.B.C,来计算年终奖 //封装了所有算法的策略对象 var strategies = { 'S': function(salary){ return salary*4; }, 'A': function(salary){ return salary

  • 从表单校验看JavaScript策略模式的使用详解

    众所周知的是,表单确实在前端,唔,或者说在网页中占有不小的比重.事实上,几乎每一个中大型网站都会有"登录注册"以验证用户信息.防止一些不可名状的隐患... 那么表单的优劣就成了前端开发者急需解决的问题.其实我更愿意称为"代码的可读性"或"可复用性"以及"是否冗杂". 表单也有"优劣"?你在开玩笑嘛? 我想你可以认真看下下面的代码,它用到了一些"新知识": <form action=

  • 如何使用JavaScript策略模式校验表单

    概述 Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,比如是否填写,填写的长度,密码是否符合规范等等,前端校验可以避免提交不合规范的表单. 假如我们有一个表单,校验逻辑如下: 用户名不为空 密码长度不低于6位 手机号符合格式 未使用策略模式的表单校验 当没有使用策略模式时,即我们首先会想到的校验模式通常是这样的: <body> <form id="registerForm"> <label fo

  • JavaScript策略模式利用对象键值的映射关系详解

    目录 引言 1.策略模式的极简实现 2.策略模式的简单案例 (1)工具函数 (2)提示样式 总结 引言 策略模式指的是,定义一系列的算法,把它们一个个的封装起来,通过传递一些参数,使他们可以相互替换. 举个周末从家去咖啡馆的例子: 从家去咖啡馆,有跑步.骑行和漫步的方式.也就是说,从家到咖啡馆,有三种策略可选择. 1.策略模式的极简实现 通过对象的键值映射关系,定义策略和具体实现之间的关系: var strategies = { A: xxx, B: yyy, C: zzz } 其中,A.B和C

  • 轻松掌握JavaScript状态模式

    状态模式 状态模式(State)允许一个对象在其内部状态改变的时候改变它的行为,对象看起来似乎修改了它的类. 状态模式的使用场景也特别明确,有如下两点:  1.一个对象的行为取决于它的状态,并且它必须在运行时刻根据状态改变它的行为.(有些对象通常会有好几个状态,在每个状态都只可以做当前状态才可以做的事情,而不能做其它状态能做的事儿) 2.一个操作中含有大量的分支语句,而且这些分支语句依赖于该对象的状态.状态通常为一个或多个枚举常量的表示. 一.有限状态机 1.状态总数(state)是有限的.  

  • 轻松掌握Java策略模式

    定义:一个类的行为或其算法可以在运行时更改.在策略模式中,我们创建表示各种策略的对象和一个行为随着策略对象改变而改变的 context 对象.策略对象改变 context 对象的执行算法. 特点: 1.算法可以自由切换. 2.避免使用多重条件判断. 3.扩展性良好. 企业级开发和常用框架中的应用:java.servlet.http.HttpServlet的service方法 实例:对两个数的操作行为. public class Demo { public static void main(Str

  • 轻松掌握JavaScript代理模式

    在面向对象设计中,有一个单一职责原则,指就一个类(对象.函数)而言,应该仅有一个引起它变化的原因.如果一个对象承担了过多的职责,就意味着它将变得巨大,引起它变化的原因就多,它把这些职责耦合到了一起,这种耦合会导致程序难于维护和重构. 这时候,我们可以把该对象(本体)的其中一部分职责分离出来给一些第三方对象去做,本体只管自己的一些核心职责,这些第三方对象就称作代理.代理对象可以作为对象(也叫"真正的主体")的保护者,让真正的主体对象做尽量少的工作.在代理设计模式中,一个对象充当了另一个对

  • 怎样用Javascript实现策略模式

    概述 策略模式是JavaScript设计模式中行为型的设计模式: 定义: 定义一系列算法,并将这些算法各自封装成策略类(方法),然后将不变的部分和变化的部分分离开来,并且这些算法可以相互替换 白话解释: 实际上所谓的策略模式就是指根据不同的策略来执行不同的方法,是不是很类似与if-else分支判断:但是策略模式是用来解决多重条件判断语句的: 代码实现 需求: 年终将至,某公司决定提前发年终奖,但是年终奖的计算是有一定的规则的,年终奖的多少跟绩效考核密切相关:所以某公司的年终奖方案是这样的: 绩效

  • JavaScript设计模式策略模式案例分享

    前言 策略设计模式就是指一个问题匹配多个解决方法,不一定要用到哪一个,而且有可能随时增加多个方案 比如我们去买书,书店都会搞一些优惠活动,满100减20,满200减50,八折优惠这些,但是优惠活动源源不止这些,后期会陆续添加优惠活动,比如双11活动打七折,等到双11活动过去之后打七折活动还需要取消 我们先不用策略设计模式进行实现计算折扣后价格,我们声明一个方法,里面接受俩个参数,这俩个参数一个是价格一个是折扣种类,然后在方法里面使用if语句判断折扣种类计算价格,如果没有折扣就是原价,最后把计算过

  • C++设计模式之策略模式

    C++设计模式之策略模式

    前言 刚刚加班回来:哎,公司规定平时加班只有10块钱的餐补:星期六和星期天加班,只给串休假:在国家规定的节假日按照3倍工资发放.那么对于这么多的计算加班费的方法,公司的OA系统是如何进行做的呢?这就要说到今天我这里总结的策略设计模式了. 策略模式 在GOF的<设计模式:可复用面向对象软件的基础>一书中对策略模式是这样说的:定义一系列的算法,把它们一个个封装起来,并且使它们可相互替换.该模式使得算法可独立于使用它的客户而变化. 策略模式为了适应不同的需求,只把变化点封装了,这个变化点就是实现不同

随机推荐