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

策略模式的意义是定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。
一个小例子就能让我们一目了然。

回忆下jquery里的animate方法.

代码如下:

$( div ).animate( {“left: 200px”}, 1000, ‘linear' );  //匀速运动
$( div ).animate( {“left: 200px”}, 1000, ‘cubic' );  //三次方的缓动

这2句代码都是让div在1000ms内往右移动200个像素. linear(匀速)和cubic(三次方缓动)就是一种策略模式的封装.

再来一个例子. 上半年我写的dev.qplus.com, 很多页面都会有个即时验证的表单. 表单的每个成员都会有一些不同的验证规则.

比如姓名框里面， 需要验证非空，敏感词，字符过长这几种情况。 当然是可以写3个if else来解决，不过这样写代码的扩展性和维护性可想而知。如果表单里面的元素多一点，需要校验的情况多一点，加起来写上百个if else也不是没有可能。

所以更好的做法是把每种验证规则都用策略模式单独的封装起来。需要哪种验证的时候只需要提供这个策略的名字。就像这样：

代码如下:

nameInput.addValidata({
notNull: true,
dirtyWords: true,
maxLength: 30
})

而notNull，maxLength等方法只需要统一的返回true或者false，来表示是否通过了验证。

代码如下:

validataList = {
notNull: function( value ){
return value !== ”;
},
maxLength: function( value, maxLen ){
return value.length() > maxLen;
}
}

可以看到，各种验证规则很容易被修改和相互替换。如果某天产品经理建议字符过长的限制改成60个字符。那只需要0.5秒完成这次工作。

赞 (0)

相关推荐

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

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

  • 利用策略模式与装饰模式扩展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设计模式之策略模式详解

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

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

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

  • 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系列（33）：设计模式之策略模式详解

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

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

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

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

  • 轻松掌握JavaScript策略模式

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

  • 详解JavaScript的策略模式编程

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

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

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

  • JavaScript设计模式之构造函数模式实例教程

    JavaScript设计模式之构造函数模式实例教程

    本文实例讲述了JavaScript设计模式之构造函数模式.分享给大家供大家参考,具体如下: 一.构造函数模式概念 构造函数用于创建特定类型的对象--不仅声明了使用过的对象,构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值.你可以自定义自己的构造函数,然后在里面声明自定义类型对象的属性或方法. 在JavaScript里,构造函数通常是认为用来实现实例的,JavaScript没有类的概念,但是有特殊的构造函数.通过new关键字来调用自定义的构造函数,在构造函数内部,this关键字引用的

  • JavaScript设计模式之代理模式实例分析

    JavaScript设计模式之代理模式实例分析

    本文实例讲述了JavaScript设计模式之代理模式.分享给大家供大家参考,具体如下: 代理模式的定义,代理是一个对象(proxy)用它来控制目标对象的访问.为此他要是先与目标对象相同的接口,但是他不同于装饰者模式,它对目标对象不进行任何修改,它的目的在于延缓"复杂"对象的初始化时间.这样可以在用到这个目标对象的时候再初始化他(对于单例来讲更是重要). 代理模式有两种分类: (1)普通代理 (2)惰性代理 具体看下面的例子 第一,普通代理模式 步骤一,接口检验文件的引用 //定义一个静

  • JavaScript设计模式之命令模式实例分析

    JavaScript设计模式之命令模式实例分析

    本文实例讲述了JavaScript设计模式之命令模式.分享给大家供大家参考,具体如下: 第一,命令模式: (1)用于消除调用者和接收者之间直接的耦合的模式,并且可以对(调用这个过程进行留痕操作) (2)真的不要乱用这个模式,以为他使你简单调用写法变得非常的复杂和有些难以理解. (3)你的业务出现了 (回退操作)(重做操作)的需求的时候你就要考虑使用这个模式了. 命令的原理: 一种情况为发出者直接作用于执行者,这样耦合度很高,另外一种情况为,在发出者和执行者之间增加一个用存储命令的命令访问库也即命

  • JavaScript设计模式之建造者模式实例教程

    JavaScript设计模式之建造者模式实例教程

    本文实例讲述了JavaScript设计模式之建造者模式.分享给大家供大家参考,具体如下: 一.建造者模式模式概念 建造者模式可以将一个复杂的对象的构建与其表示相分离,使得同样的构建过程可以创建不同的表示.也就是说如果我们用了建造者模式,那么用户就需要指定需要建造的类型就可以得到它们,而具体建造的过程和细节就不需要知道了.建造者模式实际就是一个指挥者,一个建造者,一个使用指挥者调用具体建造者工作得出结果的客户. 建造者模式主要用于"分步骤构建一个复杂的对象",在这其中"分步骤&

  • Python设计模式之策略模式实例详解

    Python设计模式之策略模式实例详解

    本文实例讲述了Python设计模式之策略模式.分享给大家供大家参考,具体如下: 策略模式(Strategy Pattern):它定义了算法家族,分别封装起来,让他们之间可以相互替换,此模式让算法的变化,不会影响到使用算法的客户. 下面是一个商场活动的实现 #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = 'Andy' ''' 大话设计模式 设计模式--策略模式 策略模式(strategy):它定义了算法家族,分别封装起来,让他们之

  • php设计模式之策略模式实例分析【星际争霸游戏案例】

    本文实例讲述了php设计模式之策略模式.分享给大家供大家参考,具体如下: 星际开地图对战,等5秒钟进入地图后,每个玩家都会拥有一个基地,几个农民等,还会有初始的人口供给.但这些是根据种族的不同而不同. 待解决的问题:我们需要根据种族的不同,而对玩家进行不同的初始化,最好将这些不同的处理方式封装. 思路:定义初始化的接口,然后制作不同种族的初始化类. 策略模式(Strategy)示例: 为了使代码不至于过长,一部分类的定义不在此写出,如果要调试,请用字符串等方式替代new. <?php //玩家的

  • JavaScript设计模式之策略模式实现原理详解

    俗话说,条条大路通罗马.在现实生活中,我们可以采用很多方法实现同一个目标.比如我们先定个小目标,先挣它一个亿.我们可以根据具体的实际情况来完成这个目标. 策略模式的定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 举个例子:表单校验 在一个Web项目中,注册.登录等功能的实现都离不开表单提交.表单校验也是前端常常需要做的事.假设我们正在编写一个注册的页面,在点击提交按钮之前,有如下几条校验逻辑: 用户名不可为空,不允许以空白字符命名,用户名长度不能小于2位. 密码长度不能小

  • JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】

    本文实例讲述了JavaScript设计模式--简单工厂模式.分享给大家供大家参考,具体如下: 第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方法不要写出Interface.prototype ,因为这是写到接口的原型链上的 //我们要把静态的函数直接写到类层次上 //(1)定义一个接口类 var Interface=function (name,methods) {//name:接口名字 if(argument

  • javascript设计模式之策略模式

    目录 一. 认识策略模式 二. 具体实现和思想 三. 策略模式的实际运用 四. 总结 一. 认识策略模式 策略模式的定义:定义一系列的算法,将他们一个个封装起来,使他们直接可以相互替换. 策略模式是开发中常用的第二种设计模式,它在开发中非常常见,由两部分组成.第一部分是策略类,封装了许多具体的,相似的算法.第二部分是环境类,接受客户请求,随后将请求委托给策略类.说的通俗一点就是将相同算法的函数存放在一个包装里边,每个函数用相同的方式拿出来,就叫做策略模式.下面我们来通过代码实现深入了解一下. 二

随机推荐