再起航，我的学习笔记之JavaScript设计模式19(状态模式)

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_30919571

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量52

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 设计模式 ViewUI

原文链接：http://www.cnblogs.com/chen-jie/p/JavaScript-State.html

本文介绍了状态模式的概念及其在JavaScript中的应用。通过一个示例展示了如何使用状态模式来替代冗长的条件判断语句，实现更简洁、易于维护的代码结构。

状态模式

概念介绍

状态模式(State)：当一个对象的内部状态发生改变时，会导致其行为的改变，这看起来像是改变了对象

示例演示

在我们写项目的过程中或多或少会遇到如下的多分支判断

function show(value){
    if(value==0){
        console.log(0);
    }else if(value==1){
        console.log(1);
    }else if(value==2){
        console.log(2);
    }
}

万一哪天需求变更需要调整结果，那就很麻烦了。那么我们有什么办法既可以减少代码中的条件判断语句，又能使每种判断情况独立存在呢？

这个时候我们就可以用到状态模式了，状态模式很适合这类分支条件内部独立结果的管理。

每一种条件对应对象内部的一种状态，面对不同判断结果，它其实就是选择对象内的一种状态。

下面我们用状态模式实现刚才的例子

//返回状态结果对象
    var ResutlState=function(){
        //把结果保存在内部对象中
            var States={
                //每种状态作为一种独立的方法保存
                state0:function(){
                    console.log(0);
                },
                state1:function(){
                    console.log(1);
                },
                state2:function(){
                    console.log(2);
                }
            }
            //获取对应方法
            function show(result){
                States['state'+result]&&States['state'+result]();
            }
            return{
                //返回调用状态方法
                show:show
            }
        }();

好了我们试着调用一下

ResutlState.show(1);

总结

状态模式即是解决程序中臃肿的分支判断语句问题，将每个分支转化为一种状态独立出来，方便每种状态的管理又不至于每次执行时遍历所有分支。在程序中到底产出哪种行为结果，决定于选择哪种状态，而选择何种状态又是在程序运行时决定的，当然状态模式最终的目的即是简化分支判断流程。
也谢谢大家看到这里：）如果你觉得我的分享还可以请点击推荐，分享给你的朋友让我们一起进步~

好了以上就是本次分享的全部内容，本次示例参考自JavaScript设计模式一书，让我们一点点积累一点点成长，希望对大家有所帮助。

欢迎转载，转载请注明作者，原文出处。

转载于:https://www.cnblogs.com/chen-jie/p/JavaScript-State.html