关于状态切换

关于发布框的状态切换问题, 我的实现思路是利用状态机.

每个状态都是一个独立的对象,然后创建一个状态机来保存当前状态.每次状态发生改变的时候,就检查是不是等于当前状态, 如果不是就当前状态Close掉, 然后将改变的状态设置为当前状态, 代码如下:

 

		/*状态机*/
var statusMachine = function(item) {
	this.prevStatus = item || null;//设置初始状态
};

statusMachine.prototype = {
	init: function() {
		var _this = this;
	},
	change: function(status) {
                 //检测状态是否存在, 如果存在判断是否等于当前状态
		if (this.prevStatus && this.prevStatus.id != status.id) {
			this.prevStatus.close(); //关闭当前状态
		}

		this.prevStatus = status; //设置状态
		this.prevStatus.show(); //开启当前状态
	},
	close: function() {
		if (this.prevStatus) {
			this.prevStatus.close();
			this.prevStatus = null;
		}
	}
};

var status = new statusMachine();
/*图片状态*/
var image = {
	id: 'image',
	init: function(){			
		var _this = this;
		
		this.ui = {};
		this.ui.img = $('imgBox');
		this.ui.btnOpen = $('#imgOpen');
		
		
		
		this.ui.btnOpen = function(){
			status.change(_this); //切换状态					
		};
	},
	show: function(){
		this.ui.img.show();
	},
	close: function(){
		this.ui.img.hide();
	}
};

/*视频状态*/
var video = {
	id: 'video',
	init: function(){			
		var _this = this;
		
		this.ui = {};
		this.ui.video = $('imgvideo');
		this.ui.btnOpen = $('#videoOpen');
		
		this.ui.btnOpen = function(){
			status.change(_this);//切换状态
		};
	},
	show: function(){
		this.ui.video.show();
	},
	close: function(){
		this.ui.video.hide();
	}
};

　　

 

总结:

　　1.每个状态都是独立的, 不需要去关注其它状态, 所以怎么改变都不会影响到其它的状态.

      2.可以无限扩展和缩减, 即使增加和减少状态也不会影响到其它状态的运行.