關於狀態切換

關於發佈框的狀態切換問題, 個人實現思路是利用狀態機.

每一個狀態都是一個獨立的對象,而後建立一個狀態機來保存當前狀態.每次狀態發生改變的時候,就檢查是否是等於當前狀態, 若是不是就當前狀態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.能夠無限擴展和縮減, 即便增長和減小狀態也不會影響到其它狀態的運行.