怎样用Javascript实现策略模式

概述

策略模式是JavaScript设计模式中行为型的设计模式；

定义：

定义一系列算法，并将这些算法各自封装成策略类（方法），然后将不变的部分和变化的部分分离开来，并且这些算法可以相互替换

白话解释：

实际上所谓的策略模式就是指根据不同的策略来执行不同的方法，是不是很类似与if-else分支判断；但是策略模式是用来解决多重条件判断语句的；

代码实现

需求：

年终将至，某公司决定提前发年终奖，但是年终奖的计算是有一定的规则的，年终奖的多少跟绩效考核密切相关；所以某公司的年终奖方案是这样的：

绩效考核为S的员工，年终奖是个人月工资的4倍；

绩效考核为A的员工，年终奖是个人月工资的3倍；

绩效考核为B的员工，年终奖是个人月工资的2倍；

看到这里让你开始编写程序，一般大部分的代码是这样的：

function calculateBonus(level,salary){
    if(level === 'S'){
        return salary*4;
    }
    
    if(level === 'A'){
        return salary*3
    }

    if(level === 'B'){
        return salary*2
    }
}

console.log(calculateBonus("S",14000));  //56000
console.log(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000));  //10000

上面的代码用来解决当前需求固然没有问题，但是在程序设计的角度来说，上面的代码是还有可以优化的点的；因为该方法相对来说比较庞大，有很多的分支判断，缺乏弹性；如果年终奖方案改了，需要增加一个C方案呢？那是不是又得去方法里面加分支判断呢？这就违反了开放封闭原则；

优化：

var strategies  = {
    "S":function(salary){
        return salary*4
    },
    "A":function(salary){
        return salary*3;
    },
    "B":function(salary){
        return salary*2
    }
}

var calculateBonus =function(level,salary){
    return strategies[level](salary);
} 
console.log(calculateBonus("S",14000));  //56000
console.log(calculateBonus("A",10000));  //30000
console.log(calculateBonus("B",5000));   //10000

通过优化上述代码之后，上面就是用策略模式来进行改造代码的，我们可以看到我们定义了一个策略对象，然后calculateBonus根据用户传入的等级和工资即可算出年终奖的金额，经过改造之后，代码的结构变得更加简洁；

在web开发中，登录页的注册、登录等功能都是需要进行表单提交的；然而在提交的过程中肯定要进行校验和筛选，不符合校验规则的将不能直接提交；在没有学习设计模式之前我们的校验可能也是跟上面一样都是多重if分支判断，然后我们现在用策略模式来实现一个表单校验：

    
    
    
    


        

            请输入用户名：
            请输入密码：
            请输入手机号码：
            提交
        

我们可以通过策略模式来解决表单校验大规模重复if-else判断等问题，上面的代码注释我已经给的很详细了，学习设计模式一定要去细品代码，学习思路；反正策略模式的一个主要思路就是通过定义一系列的算法，然后传入参数，根据不同的参数来执行不同的算法规则；

总结

优点：

1、利用组合、委托和多态技术和思想，可以避免多重条件选择语句；

2、将算法封装在独立的策略类里，使得易于切换，易于理解，易于扩展；

3、策略模式可以复用在系统的其他地方，从而避免重复的复制粘贴工作；　　　

缺点：

1、程序中会增加许多策略类或者策略对象；

2、使用策略类必须要对所有的策略类算法了解清楚，否则不知道怎么选择。

以上就是JavaScript策略模式的详细内容，更多关于JavaScript策略模式的资料请关注脚本之家其它相关文章！