策略模式是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分支判断,然后我们现在用策略模式来实现一个表单校验:

  

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>Document</title></head><body>        <form action="http:// xxx.com/register" id="registerForm" method="post">             请输入用户名:<input type="text&