轻松掌握JavaScript策略模式
来源: 阅读:1098 次 日期:2016-08-30 14:13:17
温馨提示: 小编为您整理了“轻松掌握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策略模式
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2026上岸·考公考编培训报班

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们| 联系我们| 人才招聘| 网站声明| 网站帮助| 非正式的简要咨询| 简要咨询须知| 新媒体/短视频平台| 手机站点| 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:
咨询QQ:1093837350(9:00—18:00) 版权所有:
云南网警报警专用图标
Baidu
map