设计模式(十)-策略模式

策略模式

策略模式作为一种软件设计模式,指对象的某个行为,在不同场景中，该行为有不同的实现算法.

• 图例

  
  image.png

• 代码示例

class Tickets{
    constructor(kind){
        this.kind=kind
    }
    pay(money){
       return this.kind.pay(money)
    }
}

class EightyAbove{
    pay(money){
        return money*.3
    }
}
class EightyToElevent{
    pay(money){
        return money
    }
}
class TenUnder{
    pay(money){
        return money*.5
    }
}

let  tickets=new Tickets(new EightyAbove())
console.log(tickets.pay(100)) //30
tickets.kind=new EightyToElevent()
console.log(tickets.pay(100)) //100

• 策略模式另一种实现

class Tickets{
    constructor(){
        this.kind={
            eightyAbove:(money)=>{
                return money*.3
            },
            eightyToElevent:(money)=>{
                return money
            },
            tenUnder:(money)=>{
                return money*.5
            }
        }
    }
    pay(type,money){
       return this.kind[type](money)
    }
}
let tickets=new Tickets()
console.log(tickets.pay('eightyAbove',100))  //30
console.log(tickets.pay('eightyToElevent',100)) //100

• 应用场景

1.表单校验

  <form id="registerForm">
        请输入用户名：<input type="text" name="userName"><br>
        请输入密码：<input type="text" name="password"><br>
        <input type="submit" value="提交">
  </form>
  <script>
         let form=document.getElementById('registerForm');
         let validator=(function(){
             let rules={
                 noEmpty(val,msg){
                     if(val=='') return msg
                 },
                 minLength(val,msg){
                     if(val==''||val<6) return msg
                 },
                 maxLength(val,msg){
                    if(val==''||val>10) return msg
                 }
             }
             let checks=[]
             //增加校验的项目
             function add(element,rule){
                 checks.push(function(){
                     let val=element.value
                     let name=rule.shift()
                     rule.unshift(val)
                     return rules[name] &&rules[name].apply(element,rule)
                 })
             }
             function start(){
                 for(let i=0;i<checks.length;i++){
                     let check=checks[i];
                     let msg=check()
                     console.log(msg)
                     if(msg) return msg
                 }
             }
             return {
                 add,
                 start
             }
         })()
        
         form.onsubmit=function(){
             validator.add(form.userName,['noEmpty','用户名不能为空'])
             validator.add(form.password,['minLength','密码长度不能小于6位'])
             validator.add(form.password,['maxLength','密码长度不能小于10位'])
             let msg=validator.start()
             if(msg){
                 alert(msg)
                 return false
             }
             return true
         }
   </script>