這篇文章主要講解了如何使用javascript中的狀態(tài)模式,內容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。
創(chuàng)新新互聯,憑借10年的成都網站設計、成都網站制作經驗,本著真心·誠心服務的企業(yè)理念服務于成都中小企業(yè)設計網站有上1000+案例。做網站建設,選創(chuàng)新互聯。介紹:狀態(tài)模式用于解決系統(tǒng)中復雜對象的狀態(tài)轉換以及不同狀態(tài)下行為的封裝問題。狀態(tài)模式將一個對象的狀態(tài)從該對象中分離出來,使得對象狀態(tài)可以靈活變化。
定義:允許一個對象在其內部狀態(tài)改變時改變它的行為,對象看起來似乎修改了它的類,其別名為狀態(tài)對象,狀態(tài)模式是一種對象行為型模式。
場景:在很多情況下我們的頁面需要做一些狀態(tài)判斷,是否注冊,是否登錄,剩余金額是否大于500等等,我們通常是在組件中通過if…else…來做不同的處理,這種方式耦合嚴重不滿足單一職責原則。如何解決這個問題呢,這一節(jié)我們利用狀態(tài)模式來解決對象的狀態(tài)切換。
示例:
var Dialog = function(){ var _state = null; this.setState = function(state){ _state = state; } this.getState = function(){ return _state; } } var ShowState = function(){ this.doAction = function(dialog){ console.log("對Dialog設置顯示狀態(tài):"); dialog.setState(this); } this.toString = function(){ console.log("顯示中......"); } } var HideState = function(){ this.doAction = function(dialog){ console.log("對Dialog設置隱藏狀態(tài):"); dialog.setState(this); } this.toString = function(){ console.log("已隱藏......"); } } var dialog = new Dialog(); var showState = new ShowState(); var hideState = new HideState(); showState.doAction(dialog); //對Dialog設置顯示狀態(tài): dialog.getState().toString(); //顯示中...... hideState.doAction(dialog); //對Dialog設置隱藏狀態(tài) dialog.getState().toString(); //已隱藏......