低调的js、web群

状态模式与策略模式

前言

在工作的时候我发现项目中出现大量的if判断,这样的代码让新人接手项目看着实在是难以理解。因此通过学习,找到了合适的解决方案。下面我就简单介绍一下状态模式与策略模式。

状态模式

主要对状态进行管理,对应各种状态进行相应操作,可以多状态执行,例:if(a==100&&b==200)两种状态的处理。

策略模式

主要是针对的单个策略处理,每种策略对应一种处理方式。

案例

曾经玩过这样的游戏,首先是选择题,选择到最后出现结果。比如你喜欢吃什么水果:苹果,你喜欢什么样的颜色:蓝色,你喜欢哪项运动:篮球。根据这些结果推算出是什么样的人,这样的游戏就是使用状态管理模式去实现。把你选择的状态收集起来,最后拿到这个组合给出相应的结果。每一种选择对应一种结果。

之前玩过的小游戏【超级玛丽】也可以使用这种方式。

var state = function(){
    var stateList={},
        stateFn={
        shoot(){
            console.log('射击');
        },
        move(){
        console.log('移动');
        },
        jump(){
        console.log('跳');
        }
    };
    var action={
        changeState(){
            var arg=arguments;//获取参数
            stateList={};//重置状态
            if(arg.length){
                for(var i=0;i<arg.length;i++){
                stateList[arg[i]]=1;
                }
            }
            return this;
        },
        does(){
            for(i in stateList){
            stateFn[i] && stateFn[i]();                        
            }
            return this;
        }
    }
    return {
        set:action.changeState,
        does:action.does
    }
};

var demo=state();

demo.set('shoot').does();//射击
demo.set('move','shoot').does();//移动+射击
demo.set('jump','shoot').does();//跳+射击

案例

曾经我们一起写表单验证的时候是不是每次提交的时候都需要逐个验证,这样的话,对于我们来说,每种验证写对应的验证方式即可。


var state = function(){
    var stateFn={
        tel(){
            console.log('验证手机号');
        },
        user(){
           console.log('验证用户名');
        },
        pasword(){
           console.log('验证密码');
        }
    };
    return {
        check(type,val){//验证
           return stateFn[type] ? stateFn[type](val):"没有此类验证方式"; 
        },
        add(type,fn){//添加验证方式
            stateFn[type]=fn;
        }
    }
};
var d=state();
d.check('tel',1731008**44);

总结

状态模式与策略模式很相似,确切的说状态模式包含策略模式。但他们的实现主要是针对条件判断,比如之前曾使用过的switch case 其实我也建议使用策略模式尝试,你会得到也想不到的结果。

posted @ 2018-09-22 22:47 小小坤 阅读(...) 评论(...) 编辑 收藏