JavaScript策略模式详解:定义、应用与参数配置优化
本文深入解析JavaScript中的策略模式,通过年终奖计算和表单验证两个实例,展示如何将一系列算法封装为函数或对象属性,并通过统一接口自动选择执行。同时介绍了利用参数配置对象优化多参数函数调用的最佳实践,帮助开发者编写更清晰、易维护的代码。
策略模式定义与核心概念
策略模式的定义是:将一系列算法分别封装成独立的函数,或者作为属性统一封装到一个对象中,随后定义一个公共方法。该方法依据传入的参数,自动判断并执行对应的算法逻辑。
该模式通常适用于实现某个功能时存在多种可选方案的业务场景。
实例一:根据员工的薪水(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
实例二:用于前端表单数据的合法性验证。
策略模式应用:表单验证实现
//定义验证算法的策略对象
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);
假设存在一个函数foo(a,b,c,d,e,f...),其参数数量众多,导致函数难以调用且参数顺序不易记忆。更优的做法是创建一个包含这些参数的对象,将该对象作为单一参数传递给函数,由函数内部处理该对象的属性。这样,调用函数时无需记忆复杂的参数顺序,只需关注配置对象的属性名即可,从而有效降低出错概率。参考文献包括《JavaScript模式》与《JavaScript设计模式与开发实践》。
以上内容为本文的全部总结,希望能为读者的学习提供有益帮助,同时也欢迎大家继续支持本站。
怎么使用 JavaScript import() 实现模块的条件加载
2026-11-05 14:44:45
前端防御XSS攻击:怎么防止恶意JS注入与CSP策略配置
2026-11-04 08:51:38
怎么解决 Turf.js 处理大规模 GeoJSON 数据的性能瓶颈
2026-11-03 23:22:19
为什么不建议在JS中手动拼接JSON字符串?
2026-11-03 22:48:27
代码混淆对JS执行性能的影响测试与分析
2026-11-03 22:25:37
