状态机编程思想及实例

一.状态机编程思想

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

二.编程实例

具体代码如下：

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
    };
})