Loading

javascript设计模式:策略模式

前言

  •  策略模式有效利用组合、委托、多态等技术和思想,可以有效避免多重条件选择语句。
  •  策略模式对开放-封闭原则提供了很好的支持,将算法封装在strategy中,使得他们易于切换、理解、扩展。
  •  策略模式中的算法也可以复用在系统的其他地方,从而有效的减少了复制粘贴工作。
  •  策略模式中利用组合和委托来让Context拥有执行算法的能力,这也是继承的一种更轻便的替代方案。

 

计算奖金

 1 var strategies={
 2         "s":function(salary){
 3             return salary*4;
 4         },
 5         "a":function(salary){
 6             return salary*2;
 7         }
 8     }
 9     
10 var getBonus=function(level,salary){
11        return strategies[level](salary);
12 }
13     
14 console.log(getBonus("s",10000));

 

表单验证

var strategies={
        isNonEmpty: function( value, errorMsg ){ // 不为空
            if ( value === '' ){
                return errorMsg ;
            }
        },
        minLength: function( value, length, errorMsg ){ // 限制最小长度
            if ( value.length < length ){
                return errorMsg;
            }
        },
        isMobile: function( value, errorMsg ){ // 手机号码格式
            if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
                return errorMsg;
            }
        }
    }
    
    var registerForm=document.getElementById("registerForm");
    
    
    var Validator=function(){
        this.cache=[];
    }
    
    Validator.prototype.add=function(dom,rules){
        var self=this;
        for(var i=0,rule;rule=rules[i++];){
            (function(rule){
                var ary=rule.strategy.split(':');
                var err=rule.errMsg;
                
                self.cache.push(function(){
                    var strategy=ary.shift(); //数组第一个元素就是验证策略
                    ary.unshift(dom.value);
                    ary.push(err);
                    return strategies[strategy].apply(dom,ary);
                });
            })(rule)
        }
    }
    
    Validator.prototype.start=function(){
        for(var i=0,validatorFunc;validatorFunc=this.cache[i++];){
            var err = validatorFunc();
            if(err){
                return err;
            }
        }
    }
    
    var validatorFunc= function(){
        var validator = new Validator();
        validator.add(registerForm.username,[
        {
            'strategy':'isNonEmpty',
            'errMsg':'用户名不能为空'
        }
        ,
        {
            'strategy':'minLength:6',
            'errMsg':'用户名长度不能小于6'
        }]);
            
        validator.add(registerForm.password,[
            {
                'strategy':'minLength:6',
                'errMsg':'密码长度不能小于6'
            }
        ])
        var err = validator.start();
        return err;
    }
    
    registerForm.onsubmit=function(){
        var err = validatorFunc();
        
        if(err){
            alert(err);
            return false;
        }
    }

 

总结

      策略模式的关键总结为三点:封装策略(也就是算法中变化的部分)、策略上下文(Context)、客户端调用。 其中上下文也起一个调度作用。

      策略模式这两个demo中,其中还用到了js call和apply、闭包特性。

 

posted @ 2017-01-04 14:14  歪头儿在北京  阅读(230)  评论(0编辑  收藏  举报