JavaScript设计模式之策略模式实例_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秒完成这次工作。

时间: 2024-09-20 00:51:01

JavaScript设计模式之策略模式实例_javascript技巧的相关文章

JavaScript设计模式之外观模式实例_javascript技巧

外观模式(门面模式),是一种相对简单而又无处不在的模式.外观模式提供一个高层接口,这个接口使得客户端或子系统更加方便调用. 用一段再简单不过的代码来表示: 复制代码 代码如下: var getName = function(){ return "svenzeng" } var getSex = function(){ return 'man' } 如果你需要分别调用getName和getSex函数. 那可以用一个更高层的接口getUserInfo来调用. 复制代码 代码如下: var

JavaScript设计模式之单件模式介绍_javascript技巧

单件模式说明 1. 说明:单件模式,就是静态化的访问中已经实例化的对象,这个对象只能通过一个唯一的入口访问,已经实例或待实例化的对象:面向对象语言如Java, .Net C#这样的服务端动态语言里,能保证类的操作有顺的进行,避免并行操作使数据发生混乱的情况: 2. 单件模式的好处: 1>. 减少 new 的操作,以免加快内存频繁操作,占用内存: 2>. 尽量减少大系统的对象的开销: 3>. 就是上面说的,可以保障某些类型的操作有顺序准确的操作,以免并行处理引起的数据异常现象: 当然上面说

JavaScript设计模式之建造者模式介绍_javascript技巧

建造者模式说明 1. 将一个复杂对象的 构造 与它的表示相分离,使同样的创建过程可有不同的表示,这就叫做建造者模式. 2. 面向对象语言中的说明,主要角色: 1>. Builder 这个接口类,定义这个建造者[工人],统一的可操作的行为方式,它表示一个复杂的结构对象; 2>. ConcreteBuilder 用于创建[实现] Builder 各种形态的实例对象,来表示 Builder 不同的表示; 3>. Director 这个指挥者 用于指导 Builder 实例的执行过程跟形式,用于

JavaScript设计模式之代理模式介绍_javascript技巧

代理模式说明 说明:顾名思义就是用一个类来代替另一个类来执行方法功能,这个模式跟装饰模式有点相似,不一样的是,代理模式是代替客户初始化被代理对象类,而装饰模式采用接口或初装饰者参数引用的方式来执行的. 在动态面向对象语言里,代理模式即起到控制修饰被代理类的作用,也对被代理类起到了充分的隐藏保护作用:被代理类只到我们需要时,才被间接初始化调用: 场景描述: 很常见到的就是租房子的例子,房客要租房子,房东要把房子租出去,但是房客跟房东都没怎么有空找房子或在家等着有人看房子,就一同去找房屋中介.房东把

JavaScript设计模式之外观模式介绍_javascript技巧

外观模式说明 说明:外观模式是用于由于子系统或程序组成较复杂而提供的一个高层界面接口,使用客户端更容易访问底层的程序或系统接口; 外观模式是我们经常使用遇到的模式,我们经常涉及到的功能,可能需要涉及到几个子接口或子系统,而我们的某个功能,可能只需要这向个多个子接口中的一个或几个组成的顺序封装.如果是业务功能直接对应子接口或子系统的,可能要求开发人员对内部需要相当的了解:你可能需要去了解业务流程是怎么走,他的顺序是什么,等等.这即需要开发员了解业务,也使得客户端编程变得相当的复杂: 这里如果有一层

JavaScript设计模式之策略模式

在网上搜索"为什么MVC不是一种设计模式呢?"其中有解答:MVC其实是三个经典设计模式的演变:观察者模式(Observer).策略模式(Strategy).组合模式(Composite).所以我今天选择学习策略模式. 策略模式:定义了一系列家族算法,并对每一种算法单独封装起来,让算法之间可以相互替换,独立于使用算法的客户. 通常我并不会记得"牛顿第一定律"的具体内容,所以我也难保证我会对这个定义记得多久--用FE经常见到的东西来举个例子说明一下: $("d

学习JavaScript设计模式之策略模式_javascript技巧

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

javascript组合使用构造函数模式和原型模式实例_javascript技巧

本文实例讲述了javascript组合使用构造函数模式和原型模式的方法.分享给大家供大家参考.具体如下: function testPrototype2(){ function Person3(name, age, job){ this.name=name; this.age=age; this.job=job; this.friends =["shelb", "court"]; } Person3.prototype = { constructor:Person3

JavaScript中实现单体模式分享_javascript技巧

单体模式作为一种软件开发模式在众多面向对象语言中得到了广泛的使用,在javascript中,单体模式也是使用非常广泛的,但是由于javascript语言拥有其独特的面向对象方式,导致其和一些传统面向对象语言虽然在单体模式的思想上是一致的,但是实现起来还是有差异的. 首先来看看传统面向对象语言对于单体模式的定义:单体模式是只能被实例化一次并且可以通过一个众所周知的访问点来访问的类.这个定义有两点突出了传统面向对象语言的特征,即类和实例化,所以对于传统面向对象语言来讲,单体模式是建立在其类和实例化的