首页 > 代码库 > Javascript设计模式与开发实践详解（二：策略模式） http://www.jianshu.com/p/ef53781f6ef2

Javascript设计模式与开发实践详解（二：策略模式） http://www.jianshu.com/p/ef53781f6ef2

2024-09-26 10:09:39   216人阅读

上一章我们介绍了单例模式及JavaScript惰性单例模式应用
这一次我主要介绍策略模式
策略模式是定义一系列的算法，把它们一个个封装起来，并且让他们可以互相替换。
比方说在现实中很多时候也有很多途径到达同一个目的地，比如我们去某个地方旅游，可以选择坐飞机，乘火车，骑自行车等方式。

使用策略模式计算奖金

很多公司的年终奖是根据员工的工资基数和年底绩效来发放的。例如，绩效为 S 的人年终奖有4倍工资，绩效为 A 的人年终奖有3倍工资，绩效为 B 的人年终奖有2倍工资。
现在我们来计算员工的年终奖。

  var performanceS = function  (salary) {
return salary * 4;
}
var performanceA = function  (salary) {
return salary * 3;
}
var performanceB = function  (salary) {
return salary * 2;
}
var calculateBonus = function  (performanceLevel,salary) {
if(performanceLevel === ‘S‘)
    return performanceS(salary)
if(performanceLevel === ‘A‘)
    return performanceA(salary)
if(performanceLevel === ‘B‘)
    return performanceB(salary)

}
calculateBonus(‘A‘,10000);  // 30000

值得一提的是以上代码并不符合策略模式定义
策略模式是定义一系列的算法，把它们一个个封装起来，并且让他们可以互相替换。
这句话理解起来就是定义一系列的算法，把它们各自封装成策略类，算法被封装在策略类内部的方法里。
因此我们必须做点改变

在JavaScript中，函数也是对象，所以我们可以直接将定义一个对象strategy用来存放策略类。
参见代码：

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‘,20000) ); // 80000

以上基本符合了策略模式的定义及写法。

更广义的算法

用策略模式仅仅来封装算法未免大材小用，在实际开发中，也可以用策略模式来封装一些业务规则。
接下来我们用策略模式来完成表单验证的例子。

表单验证

校验表单信息想必都是稀松平常的事情，假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。

1.用户名不能为空
2.密码长度不少于6位
3.手机号码必须符合格式

假设我们现在没有引入策略模式，那么普通的写法是这样的：

<body>
 <form action=‘xxx‘ id=‘registerForm‘ method=‘post‘>
      please entry username : <input type=‘text‘ name=‘username‘ />
      please entry password : <input type=‘text‘ name=‘password‘ />
      please entry phoneNumber : <input type=‘text‘ name=‘phoneNumber‘ />
             <button>submit</button>
 </form>
 <script>
     var registerForm = document.getElementById(‘registerForm‘)
     registerForm.onsubmit = function  () {
         if(registerForm.username.value =http://www.mamicode.com/= ‘‘){
              alert(‘username cannot be none‘)
              return false;
         }
         if(registerForm.password.value.length < 6 ){
              alert(‘password length cannot less than 6‘)
              return false;
         }
         if(!/(^1[3][5][8][0-9]{9}$)/.test(registerForm.phoneNumber.value)){
             alert(‘phoneNumber format error‘)
             return false;
         }
     }
 </script>
</body>

可想而知这种面向过程的方法繁琐且不复用缺乏弹性，总而言之，我们必须用策略模式重构之。

注意我们的核心思想就是要写两个类： 一个策略类 一个内容类

用策略模式重构表单校验

第一步我们要把这些校验逻辑封装成策略对象，也就是策略类：

var strategies = {
 isNonEmpty: function  (value ,errorMsg) {
     if(value =http://www.mamicode.com/= ‘‘) return errorMsg
 },
 minLength: function  (value,length,errorMsg) {
     if(value.length < length) return errorMsg
 },
inMobile: function  (value,errorMsg) {
    if(!/(^1[3][5][8][0-9]{9}$)/.test(value)) return errorMsg 
}
};

ok ，现在我们开始写内容类。Validator 类在这里作为context ，负责接收用户的请求，并委托给strategy对象。

var Validator = function  () {
this.cache = [];   // save the check format
}  
Validator.prototype.add = function  (dom,rule,errorMsg) {
var ary = rule.split(‘:‘)      // forExample : ‘minLength:10‘        
this.cache.push(function  () {
    var strategy = ary.shift() //  minLength
    ary.unshift(dom.value)     // forExample : registerForm.username
    ary.push(errorMsg);        //  ary= [registerForm.username,10]
     return strategies[strategy].apply(dom,ary)    //bring the dom & ary into strategies props.


});
};
Validator.prototype.start = function  () {
for (var i = 0; ValidatorFunc; ValidatorFunc = this.cache[i++]) {
     var msg = ValidatorFunc();
     if(msg) return msg;  // if have return value then the check is failed.
};
}

如果我们没有写如何用户如何向Validator类发送请求，上面理解起来可能比较复杂。现在我们具体到表单看看。

var ValidatorFunc = function  () {
var validator = new Validator()
/***************add some format by the prototype     fun.*************************/
   validator.add(registerForm.username,‘isNonEmpty‘,‘username cannot be     none‘);
   validator.add(registerForm.password,‘minLength:6‘,‘password cannot be none‘);
   validator.add(registerForm.phoneNumber,‘isMoblie‘,‘phoneNumber cannot be none‘);


   var errorMsg = Validator.start() // get the check result 
   return errorMsg                  // return the result. if exsit ...
}

  var registerForm = document.getElementById(‘registerForm‘)
  registerForm.onsubmit = function  () {
  var errorMsg = validatorFunc()   // this is a instance!!!
  if(errorMsg) 
      alert(errorMsg)
  return false
}

这样我们大致完成了一个表单的策略模式重构（如果你能马上立刻看懂的话...）

值得一提的是我们现在可以非常轻松简单的修改校验规则，例如

validator.add(registerForm.username,‘minLength:10‘,‘username cannot less than 10‘)

小结

策略模式是一种常用且有效的设计模式，我们可以总结出策略模式的一些优点。

  1. 有效避免多重条件选择语句
  2. 完美支持了开发--封闭原则
  3. 易于复用

Javascript设计模式与开发实践详解（二：策略模式） http://www.jianshu.com/p/ef53781f6ef2


联系
我们