状态机编程思想及实例

最新推荐文章于 2025-03-19 19:55:41 发布

qq_35574727

最新推荐文章于 2025-03-19 19:55:41 发布

阅读量2.6k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_35574727/article/details/80859508

版权

本文探讨了状态机编程思想，将程序行为分为不同状态，并详细阐述了如何通过状态转换来控制程序流程。特别适合处理包含多个交互事件的场景。还提供了一个编程实例，以代码形式展示了状态机的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.状态机编程思想

状态机是软件编程中的一个重要概念。状态机将程序的行为划分为若干个状态，对于每一个状态规定其行为和可能的状态转换关系。状态机的状态即可以由其内部定义的状态转换关系改变，也可由外部操作改变，从而影响状态机的行为。适用于页面中点击事件比较多的效果。

二.编程实例

具体代码如下：

window.STATE = {
    jiantou1: {
        isShow: true
    },
    jiantou2: {
	isShow: false
    },
    jiantou3: {
	isShow: false
    },
    jiantou4: {
	isShow: false
    }
}
update() {
    if (this.jiantou1.isShow) {
        $('.fanyun-showOne-bottom').show();
	$(".jiantouUp1").show();
	$(".jiantouDown1").hide();
    } else {
	$('.fanyun-showOne-bottom').hide();
	$(".jiantouDown1").show();
	$(".jiantouUp1").hide();
    }
    if (this.jiantou2.isShow) {
	$('.fanyun-showTwo-system').show();
	$(".jiantouUp2").show();
	$(".jiantouDown2").hide();
    } else {
	$('.fanyun-showTwo-system').hide();
	$(".jiantouDown2").show();
	$(".jiantouUp2").hide();
    }
    if (this.jiantou3.isShow) {
	$('.fanyun-showThree-bottom-content').show();
	$(".jiantouUp3").show();
	$(".jiantouDown3").hide();
    } else {
	$('.fanyun-showThree-bottom-content').hide();
	$(".jiantouDown3").show();
	$(".jiantouUp3").hide();
    }
    if (this.jiantou4.isShow) {
	$('.fanyun-showfour-bottom-content').show();
	$(".jiantouUp4").show();
	$(".jiantouDown4").hide();
    } else {
	$('.fanyun-showfour-bottom-content').hide();
	$(".jiantouDown4").show();
	$(".jiantouUp4").hide();
    }
}
$('body').on('click', '.fanyun-showOne', function (e) {
    STATE.jiantou1.isShow = !STATE.jiantou1.isShow;
    STATE.jiantou2.isShow = false;
    STATE.jiantou3.isShow = false;
    STATE.jiantou4.isShow = false;
    STATE.jiantou11.isShow = false;
    STATE.jiantou22.isShow = false;
    STATE.fanyun.isShow = true;
    STATE.fireWall.isShow = false;
    STATE.update();
    var ev = e || window.event;
    if (ev.stopPropagation) {
	ev.stopPropagation();
    } else if (window.event) { //IE
	window.event.cancelBubble = true; //IE
    };
})