设计模式知识连载（28）---状态模式:

最新推荐文章于 2020-06-09 20:50:32 发布

宇智波幽助

最新推荐文章于 2020-06-09 20:50:32 发布

阅读量126

点赞数

分类专栏：设计模式文章标签：设计模式状态模式

本文链接：https://blog.csdn.net/yuzhiboyouzhu/article/details/78897694

版权

设计模式专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<body>


<h3>设计模式知识连载（28）---状态模式:</h3>
<p>
    当一个对象的内部状态发生改变时，会导致其行为的改变，这看起来像是改变了对象
</p>

<hr>






<script type="text/javascript">


    /**
    *   案例一：图片展示，方式一：初始
    */
    // 展示结果：
    function showResult(result) {
        if(result == 0) {
            console.log('result=0') 
        }else if(result == 1) {
            console.log('result=1') 
        }else if(result == 2) {
            console.log('result=2') 
        }else if(result == 3){
            console.log('result=3') 
        }
    }

    /**
    *   案例一：图片展示，方式二：状态模式
    */
    //投票结果状态对象
    var ResultState = function() {
        // 判断结果保存在内部状态中
        var States = {
            // 每种状态作为一种独立方法保存
            state0 : function() {
                console.log('state0') ;
            },
            state1 : function() {
                console.log('state1') ;
            },
            state2 : function() {
                console.log('state2') ;
            },
            state3 : function() {
                console.log('state3') ;
            }
        }
        // 获取某一种状态并执行其对应的方法
        function show(result) {
            States['state' + result] && States['state' + result]() ;
        }
        // 返回调用状态方法接口
        return {
            show : show 
        }
    } ;

    // 测试实例：
    // var result_state = new ResultState() ;
    // result_state.show(3) ;


    /**
    *   案例二：超级玛丽，方式一：初始状态
    */
    //单动作条件判断，每增加一个动作就需要添加一个判断
    var lastAction_single = '' ;
    function changeMarry_single(action) {
        if(action == 'jump') {
            console.log('进行了跳跃动作') ;
        }else if(action == 'move') {
            console.log('进行了移动动作') ;
        }else{
            console.log('进行了默认动作') ;
        } 
        lastAction_single = action ;
    } 

    // console.log('单动作条件判断------------') ;
    // changeMarry_single('jump') ;


    // 复合动作对条件判断的开销是翻倍的
    var lastAction1_complex = '' ;
    var lastAction2_complex = '' ;
    function changeMarry_complex(action1, action2) {
        if(action1 == 'shoot' && action2 == '') {
            console.log('进行了射击动作') ;
        }
        else if(action1 == 'jump' && action2 == '') {
            console.log('进行了跳跃动作');
        }
        else if(action1 == 'move' && action2 == 'shoot') {
            console.log('进行了移动射击动作') ;
        }else if(action1 == 'jump' && action2 == 'shoot') {
            console.log('进行了跳跃射击动作') ;
        }else{
            console.log('进行了默认动作') ;
        }

        // 保留上一个动作
        lastAction1_complex = action1 || '' ;
        lastAction2_complex = action2 || '' ;
    }
    // console.log('复合动作判断------------') ;
    // changeMarry_complex('jump', 'shoot') ;


    /**
    *   案例二：超级玛丽，方式一：状态优化
    */
    // 创建超级玛丽状态类
    var MarryState = function() {
        // 内部状态私有量
        var _currentState = {} ;

        // 动作与状态方法映射
        var states = {
            jump : function () {
                console.log('jump...【跳跃】') ;
            },
            move : function() {
                console.log('move...【移动】') ;
            },
            shoot : function() {
                console.log('shoot...【射击】') ;
            },
            squat : function() {
                console.log('squat...【蹲下】') ;
            }
        } ;

        // 动作控制类
        var Action = {
            // 改变状态方法
            changeState : function() {
                // 组合动作通过传递多个参数实现
                var arg = arguments ;

                // 重置内部状态
                _currentState = {} ;

                // 如果有动作则添加动作
                if(arg.length) {
                    // 遍历动作
                    for(var i = 0; i < arg.length; i++) {
                        _currentState[arg[i]] = true ;
                    }
                }
                // 返回动作控制类
                return this ;
            }, 
            // 执行动作
            goes : function() {
                console.log('触发一次动作') ;
                // 遍历内部状态保存的动作
                for(var i in _currentState) {
                    // 如果该动作存在则执行
                    states[i] && states[i]() ;
                }
                return this ;
            }
        }
        // 返回接口方法：change、gose
        return {
            change : Action.changeState,
            goes : Action.goes
        }
    }

    // 测试实例：
    console.log('使用状态后的值：---------') ;

    // 直接执行这个状态类
    // MarryState()
    //  .change('jump', 'shoot')    // 添加跳跃与设计动作
    //  .goes()                     // 执行动作
    //  .goes()                     // 执行动作
    //  .change('shoot')            // 添加射击动作
    //  .goes() ;                   // 执行动作

    // 实例化这个状态类
    // 创建一个
    var marry = new MarryState() ;
    marry
        .change('jump', 'shoot')
        .goes()
        .goes()
        .change('shoot')
        .goes() ;
</script>   

</body>

宇智波幽助

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
设计模式知识连载（28）---状态模式:

<h3>设计模式知识连载（28）---状态模式:</h3><p> 当一个对象的内部状态发生改变时，会导致其行为的改变，这看起来像是改变了对象</p><hr><script type="text/javascript"> /** * 案例一：图片展示，方式一：初始 */ // 展示结果： function showResult(result)
复制链接

扫一扫

专栏目录