javascript設計模式——狀態模式

来源:http://www.cnblogs.com/xiaohuochai/archive/2017/12/17/8046560.html
-Advertisement-
Play Games

[1]初識狀態模式 [2]通用結構 [3]文件上傳 [4]優缺點 [5]狀態機 ...


前面的話

　　狀態模式是一種非同尋常的優秀模式，它也許是解決某些需求場景的最好方法。雖然狀態模式並不是一種簡單到一目瞭然的模式（它往往還會帶來代碼量的增加），但一旦明白了狀態模式的精髓，以後一定會感謝它帶給你的無與倫比的好處。狀態模式的關鍵是區分事物內部的狀態，事物內部狀態的改變往往會帶來事物的行為改變。本文將詳細介紹狀態模式

 

初識狀態模式

　　想象這樣一個場景：有一個電燈，電燈上面只有一個開關。當電燈開著的時候，此時按下開關，電燈會切換到關閉狀態；再按一次開關，電燈又將被打開。同一個開關按鈕，在不同的狀態下，表現出來的行為是不一樣的

　　現在用代碼來描述這個場景，首先定義一個Light類，可以預見，電燈對象light將從Light類創建而出，light對象將擁有兩個屬性，用state來記錄電燈當前的狀態，用button表示具體的開關按鈕

【初始版本】

　　首先給出不用狀態模式的電燈程式實現：

var Light = function(){
    this.state = 'off'; // 給電燈設置初始狀態off
    this.button = null; // 電燈開關按鈕
};

　　接下來定義Light.prototype.init方法，該方法負責在頁面中創建一個真實的button節點，假設這個button就是電燈的開關按鈕，當button的onclick事件被觸發時，就是電燈開關被按下的時候，代碼如下：

Light.prototype.init = function(){
    var button = document.createElement( 'button' ),
    self = this;
    button.innerHTML = '開關';
    this.button = document.body.appendChild( button );
    this.button.onclick = function(){
        self.buttonWasPressed();
    }
};

　　當開關被按下時，程式會調用self.buttonWasPressed方法，開關按下之後的所有行為，都將被封裝在這個方法里，代碼如下：

Light.prototype.buttonWasPressed = function(){
    if ( this.state === 'off' ){
        console.log( '開燈' );
        this.state = 'on';
    }else if ( this.state === 'on' ){
        console.log( '關燈' );
        this.state = 'off';
    }
};

var light = new Light();
light.init();

　　現在已經編寫了一個強壯的狀態機，這個狀態機的邏輯既簡單又縝密，看起來這段代碼設計得無懈可擊，這個程式沒有任何bug。實際上這種代碼已經編寫過無數遍，比如要交替切換一個button的class，跟此例一樣，往往先用一個變數state來記錄按鈕的當前狀態，在事件發生時，再根據這個狀態來決定下一步的行為

　　令人遺憾的是，這個世界上的電燈並非只有一種。許多酒店裡有另外一種電燈，這種電燈也只有一個開關，但它的表現是：第一次按下打開弱光，第二次按下打開強光，第三次才是關閉電燈。現在必須改造上面的代碼來完成這種新型電燈的製造：

Light.prototype.buttonWasPressed = function(){
    if ( this.state === 'off' ){
        console.log( '弱光' );
        this.state = 'weakLight';
    }else if ( this.state === 'weakLight' ){
        console.log( '強光' );
        this.state = 'strongLight';
    }else if ( this.state === 'strongLight' ){
        console.log( '關燈' );
        this.state = 'off';
    }
};

　　現在考慮一下上述程式的缺點

　　1、很明顯buttonWasPressed方法是違反開放——封閉原則的，每次新增或者修改light的狀態，都需要改動buttonWasPressed方法中的代碼，這使得buttonWasPressed成為了一個非常不穩定的方法

　　2、所有跟狀態有關的行為，都被封裝在buttonWasPressed方法里，如果以後這個電燈又增加了強強光、超強光和終極強光，那將無法預計這個方法將膨脹到什麼地步。當然為了簡化示例，此處在狀態發生改變的時候，只是簡單地列印一條log和改變button的innerHTML。在實際開發中，要處理的事情可能比這多得多，也就是說，buttonWasPressed方法要比現在龐大得多

　　3、狀態的切換非常不明顯，僅僅表現為對state變數賦值，比如this.state='weakLight'。在實際開發中，這樣的操作很容易被程式員不小心漏掉。也沒有辦法一目瞭然地明白電燈一共有多少種狀態，除非耐心地讀完buttonWasPressed方法里的所有代碼。當狀態的種類多起來的時候，某一次切換的過程就好像被埋藏在一個巨大方法的某個陰暗角落裡

　　4、狀態之間的切換關係，不過是往buttonWasPressed方法里堆砌if、else語句，增加或者修改一個狀態可能需要改變若幹個操作，這使buttonWasPressed更加難以閱讀和維護

【狀態模式】

　　下麵使用狀態模式改進電燈的程式。通常談到封裝，一般都會優先封裝對象的行為，而不是對象的狀態。但在狀態模式中剛好相反，狀態模式的關鍵是把事物的每種狀態都封裝成單獨的類，跟此種狀態有關的行為都被封裝在這個類的內部，所以button被按下的的時候，只需要在上下文中，把這個請求委托給當前的狀態對象即可，該狀態對象會負責渲染它自身的行為。同時還可以把狀態的切換規則事先分佈在狀態類中，這樣就有效地消除了原本存在的大量條件分支語句

　　下麵進入狀態模式的代碼編寫階段，首先將定義3個狀態類，分別是offLightState、WeakLightState、strongLightState。這3個類都有一個原型方法buttonWasPressed，代表在各自狀態下，按鈕被按下時將發生的行為，代碼如下：

// offLightState
var OffLightState = function( light ){
    this.light = light;
};
OffLightState.prototype.buttonWasPressed = function(){
    console.log( '弱光' ); // offLightState 對應的行為
    this.light.setState( this.light.weakLightState ); // 切換狀態到weakLightState
};
// WeakLightState：
var WeakLightState = function( light ){
    this.light = light;
};
WeakLightState.prototype.buttonWasPressed = function(){
        console.log( '強光' ); // weakLightState 對應的行為
        this.light.setState( this.light.strongLightState ); // 切換狀態到strongLightState
    };
// StrongLightState：
var StrongLightState = function( light ){
    this.light = light;
};
StrongLightState.prototype.buttonWasPressed = function(){
    console.log( '關燈' ); // strongLightState 對應的行為
    this.light.setState( this.light.offLightState ); // 切換狀態到offLightState
};

　　接下來改寫Light類，現在不再使用一個字元串來記錄當前的狀態，而是使用更加立體化的狀態對象。在Light類的構造函數里為每個狀態類都創建一個狀態對象，這樣一來可以很明顯地看到電燈一共有多少種狀態，代碼如下：

var Light = function(){
    this.offLightState = new OffLightState( this );
    this.weakLightState = new WeakLightState( this );
    this.strongLightState = new StrongLightState( this );
    this.button = null;
};

　　在button按鈕被按下的事件里，Context也不再直接進行任何實質性的操作，而是通過self.currState.buttonWasPressed()將請求委托給當前持有的狀態對象去執行，代碼如下：

Light.prototype.init = function(){
    var button = document.createElement( 'button' ),
    self = this;
    this.button = document.body.appendChild( button );
    this.button.innerHTML = '開關';
    this.currState = this.offLightState; // 設置當前狀態
    this.button.onclick = function(){
        self.currState.buttonWasPressed();
    }    
};

　　最後還要提供一個Light.prototype.setState方法，狀態對象可以通過這個方法來切換light對象的狀態。狀態的切換規律事先被完好定義在各個狀態類中。在Context中再也找不到任何一個跟狀態切換相關的條件分支語句：

Light.prototype.setState = function( newState ){
    this.currState = newState;
};

　　現在可以進行一些測試：

var light = new Light();
light.init();

　　執行結果跟之前的代碼一致，但是使用狀態模式的好處很明顯，它可以使每一種狀態和它對應的行為之間的關係局部化，這些行為被分散和封裝在各自對應的狀態類之中，便於閱讀和管理代碼。另外，狀態之間的切換都被分佈在狀態類內部，這使得無需編寫過多的if、else條件分支語言來控制狀態之間的轉換

　　當需要為light對象增加一種新的狀態時，只需要增加一個新的狀態類，再稍稍改變一些現有的代碼即可。假設現在light對象多了一種超強光的狀態，那就先增加SuperStrongLightState類：

var SuperStrongLightState = function(light){
  this.light=light;
};

SuperStrongLightState.prototype.buttonWasPressed=function(){
  console.log('關燈');
  this.light.setState(this.light.offLightState);
};

　　然後在Light構造函數里新增一個superStrongLightState對象：

var Light = function(){
  this.offLightState=new OffLightState(this);
  this.weakLightState=new WeakLightState(this);
  this.strongLightState=new StrongLightState(this);
  this.superStrongLightState=new SuperStrongLightState(this);//新增superStrongLightState對象
  this.button=null;
};

　　最後改變狀態類之間的切換規則，從StrongLightState---->OffLightState變為StrongLight-State---->SuperStrongLightState---->OffLightState：

StrongLightState.prototype.buttonWasPressed = function(){
  console.log('超強光');    //strongLightState對應的行為
  this.light.setState(this.light.superStrongLightState);    //切換狀態到offLightState
};

 

通用結構

　　狀態模式是指允許一個對象在其內部狀態改變時改變它的行為，對象看起來似乎修改了它的類。以逗號分割，把這句話分為兩部分來看。第一部分的意思是將狀態封裝成獨立的類，並將請求委托給當前的狀態對象，當對象的內部狀態改變時，會帶來不同的行為變化。第二部分是從客戶的角度來看，使用的對象，在不同的狀態下具有截然不同的行為，這個對象看起來是從不同的類中實例化而來的，實際上這是使用了委托的效果

　　在前面的電燈例子中，完成了一個狀態模式程式的編寫。首先定義了Light類，Light類在這裡也被稱為上下文（Context）。隨後在Light的構造函數中，要創建每一個狀態類的實例對象，Context將持有這些狀態對象的引用，以便把請求委托給狀態對象。用戶的請求，即點擊button的動作也是實現在Context中的，代碼如下：

var Light = function(){
    this.offLightState = new OffLightState( this ); // 持有狀態對象的引用
    this.weakLightState = new WeakLightState( this );
    this.strongLightState = new StrongLightState( this );
    this.superStrongLightState = new SuperStrongLightState( this );
    this.button = null;
};

Light.prototype.init = function(){
    var button = document.createElement( 'button' ),
    self = this;
    this.button = document.body.appendChild( button );
    this.button.innerHTML = '開關';
    this.currState = this.offLightState; // 設置預設初始狀態
    this.button.onclick = function(){ // 定義用戶的請求動作
        self.currState.buttonWasPressed();
    }
};

　　接下來要編寫各種狀態類，light對象被傳入狀態類的構造函數，狀態對象也需要持有light對象的引用，以便調用light中的方法或者直接操作light對象：

var OffLightState = function( light ){
    this.light = light;
};

OffLightState.prototype.buttonWasPressed = function(){
    console.log( '弱光' );
    this.light.setState( this.light.weakLightState );
};

 　　在狀態類中將定義一些共同的行為方法，Context最終會將請求委托給狀態對象的這些方法，在這個例子里，這個方法就是buttonWasPressed。無論增加了多少種狀態類，它們都必須實現buttonWasPressed方法

　　javascript既不支持抽象類，也沒有介面的概念。所以在使用狀態模式的時候要格外小心，如果編寫一個狀態子類時，忘記了給這個狀態子類實現buttonWasPressed方法，則會在狀態切換的時候拋出異常。因為Context總是把請求委托給狀態對象的buttonWasPressed方法。所以，要讓抽象父類的抽象方法直接拋出一個異常，這個異常至少會在程式運行期間就被髮現

var State = function(){};
State.prototype.buttonWasPressed = function(){
    throw new Error( '父類的buttonWasPressed 方法必須被重寫' );
};
var SuperStrongLightState = function( light ){
    this.light = light;
};

SuperStrongLightState.prototype = new State(); // 繼承抽象父類
SuperStrongLightState.prototype.buttonWasPressed = function(){ // 重寫buttonWasPressed 方法
    console.log( '關燈' );
    this.light.setState( this.light.offLightState );
};

 

文件上傳

【基礎版本】

　　不論是文件上傳，還是音樂、視頻播放器，都可以找到一些明顯的狀態區分。比如文件上傳程式中有掃描、正在上傳、暫停、上傳成功、上傳失敗這幾種狀態，音樂播放器可以分為載入中、正在播放、暫停、播放完畢這幾種狀態。點擊同一個按鈕，在上傳中和暫停狀態下的行為表現是不一樣的，同時它們的樣式class也不同

　　相對於電燈的例子，文件上傳不同的地方在於，現在將面臨更加複雜的條件切換關係。在電燈的例子中，電燈的狀態總是從關到開再到關，或者從關到弱光、弱光到強光、強光再到關。看起來總是循規蹈矩的A→B→C→A，所以即使不使用狀態模式來編寫電燈的程式，而是使用原始的if、else來控制狀態切換，也不至於在邏輯編寫中迷失自己，因為狀態的切換總是遵循一些簡單的規律

　　而文件上傳的狀態切換相比要複雜得多，控制文件上傳的流程需要兩個節點按鈕，第一個用於暫停和繼續上傳，第二個用於刪除文件

　　文件在掃描狀態中，是不能進行任何操作的，既不能暫停也不能刪除文件，只能等待掃描完成。掃描完成之後，根據文件的md5值判斷，若確認該文件已經存在於伺服器，則直接跳到上傳完成狀態。如果該文件的大小超過允許上傳的最大值，或者該文件已經損壞，則跳往上傳失敗狀態。剩下的情況下才進入上傳中狀態。上傳過程中可以點擊暫停按鈕來暫停上傳，暫停後點擊同一個按鈕會繼續上傳。掃描和上傳過程中，點擊刪除按鈕無效，只有在暫停、上傳完成、上傳失敗之後，才能刪除文件

　　瀏覽器插件來幫助完成文件上傳。插件類型根據瀏覽器的不同，有可能是ActiveObject，也有可能是WebkitPlugin。上傳是一個非同步的過程，所以控制項會不停地調用javascript提供的一個全局函數window.external.upload，來通知javascript目前的上傳進度，控制項會把當前的文件狀態作為參數state塞進window.external.upload。在這裡無法提供一個完整的上傳插件，將簡單地用setTimeout來模擬文件的上傳進度，window.external.upload函數在此例中也只負責列印一些log：

window.external.upload = function( state ){
    console.log( state ); // 可能為sign、uploading、done、error
};

　　另外需要在頁面中放置一個用於上傳的插件對象：

var plugin = (function(){
    var plugin = document.createElement( 'embed' );
    plugin.style.display = 'none';
    plugin.type = 'application/txftn-webkit';
    plugin.sign = function(){
        console.log( '開始文件掃描' );
    }
    plugin.pause = function(){
        console.log( '暫停文件上傳' );
    };
    plugin.uploading = function(){
        console.log( '開始文件上傳' );
    };
    plugin.del = function(){
        console.log( '刪除文件上傳' );
    }
    plugin.done = function(){
        console.log( '文件上傳完成' );
    }
    document.body.appendChild( plugin );
    return plugin;
})();

　　接下來開始完成其他代碼的編寫，先定義Upload類，控制上傳過程的對象將從Upload類中創建而來：

var Upload = function( fileName ){
    this.plugin = plugin;
    this.fileName = fileName;
    this.button1 = null;
    this.button2 = null;
    this.state = 'sign'; // 設置初始狀態為waiting
};

　　Upload.prototype.init方法會進行一些初始化工作，包括創建頁面中的一些節點。在這些節點里，起主要作用的是兩個用於控制上傳流程的按鈕，第一個按鈕用於暫停和繼續上傳，第二個用於刪除文件：

Upload.prototype.init = function(){
    var that = this;
    this.dom = document.createElement( 'div' );
    this.dom.innerHTML =
    '<span>文件名稱:'+ this.fileName +'</span>\
    <button data-action="button1">掃描中</button>\
    <button data-action="button2">刪除</button>';
    document.body.appendChild( this.dom );
    this.button1 = this.dom.querySelector( '[data-action="button1"]' ); // 第一個按鈕
    this.button2 = this.dom.querySelector( '[data-action="button2"]' ); // 第二個按鈕
    this.bindEvent();
};

　　接下來需要給兩個按鈕分別綁定點擊事件：

Upload.prototype.bindEvent = function(){
    var self = this;
    this.button1.onclick = function(){
        if ( self.state === 'sign' ){ // 掃描狀態下，任何操作無效
            console.log( '掃描中，點擊無效...' );
        }else if ( self.state === 'uploading' ){ // 上傳中，點擊切換到暫停
            self.changeState( 'pause' );
        }else if ( self.state === 'pause' ){ // 暫停中，點擊切換到上傳中
            self.changeState( 'uploading' );
        }else if ( self.state === 'done' ){
            console.log( '文件已完成上傳, 點擊無效' );
        }else if ( self.state === 'error' ){
            console.log( '文件上傳失敗, 點擊無效' );
        }
    };

    this.button2.onclick = function(){
        if ( self.state === 'done' || self.state === 'error' || self.state === 'pause' ){
            // 上傳完成、上傳失敗和暫停狀態下可以刪除
            self.changeState( 'del' );
        }else if ( self.state === 'sign' ){
            console.log( '文件正在掃描中，不能刪除' );
        }else if ( self.state === 'uploading' ){
            console.log( '文件正在上傳中，不能刪除' );
        }
    };
};

　　再接下來是Upload.prototype.changeState方法，它負責切換狀態之後的具體行為，包括改變按鈕的innerHTML，以及調用插件開始一些“真正”的操作：

Upload.prototype.changeState = function( state ){
    switch( state ){
        case 'sign':
        this.plugin.sign();
        this.button1.innerHTML = '掃描中，任何操作無效';
        break;
        case 'uploading':
        this.plugin.uploading();
        this.button1.innerHTML = '正在上傳，點擊暫停';
        break;
        case 'pause':
        this.plugin.pause();
        this.button1.innerHTML = '已暫停，點擊繼續上傳';
        break;
        case 'done':
        this.plugin.done();
        this.button1.innerHTML = '上傳完成';
        break;
        case 'error':
        this.button1.innerHTML = '上傳失敗';
        break;
        case 'del':
        this.plugin.del();
        this.dom.parentNode.removeChild( this.dom );
        console.log( '刪除完成' );
        break;
    }
    this.state = state;
};

　　最後來進行一些測試工作：

var uploadObj = new Upload( 'JavaScript' );
uploadObj.init();
window.external.upload = function( state ){ // 插件調用JavaScript 的方法
    uploadObj.changeState( state );
};

window.external.upload( 'sign' ); // 文件開始掃描

setTimeout(function(){
    window.external.upload( 'uploading' ); // 1 秒後開始上傳
}, 1000 );

setTimeout(function(){
    window.external.upload( 'done' ); // 5 秒後上傳完成
}, 5000 );

　　至此就完成了一個簡單的文件上傳程式的編寫。當然這仍然是一個反例，這裡的缺點跟電燈例子中的第一段代碼一樣，程式中充斥著if、else條件分支，狀態和行為都被耦合在一個巨大的方法里，很難修改和擴展這個狀態機。文件狀態之間的聯繫如此複雜，這個問題顯得更加嚴重了

【狀態模式重構】

　　下麵開始一步步地重構它。第一步仍然是提供window.external.upload函數，在頁面中模擬創建上傳插件，這部分代碼沒有改變：

window.external.upload = function( state ){
    console.log( state ); // 可能為sign、uploading、done、error
};
var plugin = (function(){
    var plugin = document.createElement( 'embed' );
    plugin.style.display = 'none';
    plugin.type = 'application/txftn-webkit';
    plugin.sign = function(){
        console.log( '開始文件掃描' );
    }
    plugin.pause = function(){
        console.log( '暫停文件上傳' );
    };
    plugin.uploading = function(){
        console.log( '開始文件上傳' );
    };
    plugin.del = function(){
        console.log( '刪除文件上傳' );
    }
    plugin.done = function(){
        console.log( '文件上傳完成' );
    }
    document.body.appendChild( plugin );
    return plugin;
})();

　　第二步，改造Upload構造函數，在構造函數中為每種狀態子類都創建一個實例對象：

var Upload = function( fileName ){
    this.plugin = plugin;
    this.fileName = fileName;
    this.button1 = null;
    this.button2 = null;
    this.signState = new SignState( this ); // 設置初始狀態為waiting
    this.uploadingState = new UploadingState( this );
    this.pauseState = new PauseState( this );
    this.doneState = new DoneState( this );
    this.errorState = new ErrorState( this );
    this.currState = this.signState; // 設置當前狀態
};

　　第三步，Upload.prototype.init方法無需改變，仍然負責往頁面中創建跟上傳流程有關的DOM節點，並開始綁定按鈕的事件：

Upload.prototype.init = function(){
    var that = this;
    this.dom = document.createElement( 'div' );
    this.dom.innerHTML =
    '<span>文件名稱:'+ this.fileName +'</span>\
    <button data-action="button1">掃描中</button>\
    <button data-action="button2">刪除</button>';
    document.body.appendChild( this.dom );
    this.button1 = this.dom.querySelector( '[data-action="button1"]' );
    this.button2 = this.dom.querySelector( '[data-action="button2"]' );
    this.bindEvent();
};

　　第四步，負責具體的按鈕事件實現，在點擊了按鈕之後，Context並不做任何具體的操作，而是把請求委托給當前的狀態類來執行：

Upload.prototype.bindEvent = function(){
    var self = this;
    this.button1.onclick = function(){
        self.currState.clickHandler1();
    }
    this.button2.onclick = function(){
        self.currState.clickHandler2();
    }
};

　　第四步中的代碼有一些變化，把狀態對應的邏輯行為放在Upload類中：

Upload.prototype.sign = function(){
    this.plugin.sign();
    this.currState = this.signState;
};
Upload.prototype.uploading = function(){
    this.button1.innerHTML = '正在上傳，點擊暫停';
    this.plugin.uploading();
    this.currState = this.uploadingState;
};
Upload.prototype.pause = function(){

    this.button1.innerHTML = '已暫停，點擊繼續上傳';
    this.plugin.pause();
    this.currState = this.pauseState;
};
Upload.prototype.done = function(){
    this.button1.innerHTML = '上傳完成';
    this.plugin.done();
    this.currState = this.doneState;
};
Upload.prototype.error = function(){
    this.button1.innerHTML = '上傳失敗';
    this.currState = this.errorState;
};
Upload.prototype.del = function(){
    this.plugin.del();
    this.dom.parentNode.removeChild( this.dom );
};

　　第五步，編寫各個狀態類的實現。值得註意的是，使用了StateFactory，從而避免因為javascript中沒有抽象類所帶來的問題

var StateFactory = (function(){
    var State = function(){};
    State.prototype.clickHandler1 = function(){
        throw new Error( '子類必須重寫父類的clickHandler1 方法' );
    }
    State.prototype.clickHandler2 = function(){
        throw new Error( '子類必須重寫父類的clickHandler2 方法' );
    }
    return function( param ){
        var F = function( uploadObj ){
            this.uploadObj = uploadObj;
        };
        F.prototype = new State();
        for ( var i in param ){
            F.prototype[ i ] = param[ i ];
        }
        return F;
    }
})();

var SignState = StateFactory({
    clickHandler1: function(){
        console.log( '掃描中，點擊無效...' );
    },
    clickHandler2: function(){
        console.log( '文件正在上傳中，不能刪除' );
    }
});
var UploadingState = StateFactory({
    clickHandler1: function(){
        this.uploadObj.pause();
    },
    clickHandler2: function(){
        console.log( '文件正在上傳中，不能刪除' );
    }
});
var PauseState = StateFactory({
    clickHandler1: function(){
        this.uploadObj.uploading();
    },
    clickHandler2: function(){
        this.uploadObj.del();
    }
});
var DoneState = StateFactory({
    clickHandler1: function(){
        console.log( '文件已完成上傳, 點擊無效' );
    },
    clickHandler2: function(){
        this.uploadObj.del();
    }
});
var ErrorState = StateFactory({
    clickHandler1: function(){
        console.log( '文件上傳失敗, 點擊無效' );
    },
    clickHandler2: function(){
        this.uploadObj.del();
    }
});

　　最後是測試：

var uploadObj = new Upload( 'JavaScript' );
uploadObj.init();
window.external.upload = function( state ){
    uploadObj[ state ]();
};
window.external.upload( 'sign' );
setTimeout(function(){
        window.external.upload( 'uploading' ); // 1 秒後開始上傳
    }, 1000 );
setTimeout(function(){
        window.external.upload( 'done' ); // 5 秒後上傳完成
    }, 5000 );

 

優缺點

　　狀態模式的優點如下

　　1、狀態模式定義了狀態與行為之間的關係，並將它們封裝在一個類里。通過增加新的狀態類，很容易增加新的狀態和轉換

　　2、避免Context無限膨脹，狀態切換的邏輯被分佈在狀態類中，也去掉了Context中原本過多的條件分支

　　3、用對象代替字元串來記錄當前狀態，使得狀態的切換更加一目瞭然

　　4、Context中的請求動作和狀態類中封裝的行為可以非常容易地獨立變化而互不影響

　　狀態模式的缺點是會在系統中定義許多狀態類，編寫20個狀態類是一項枯燥乏味的工作，而且系統中會因此而增加不少對象。另外，由於邏輯分散在狀態類中，雖然避開了不受歡迎的條件分支語句，但也造成了邏輯分散的問題，無法在一個地方就看出整個狀態機的邏輯

　　上面的例子中並沒有太多地從性能方面考慮問題，實際上，這裡有一些比較大的優化點

　　1、有兩種選擇來管理state對象的創建和銷毀。第一種是僅當state對象被需要時才創建並隨後銷毀，另一種是一開始就創建好所有的狀態對象，並且始終不銷毀它們。如果state對象比較龐大，可以用第一種方式來節省記憶體，這樣可以避免創建一些不會用到的對象並及時地回收它們。但如果狀態的改變很頻繁，最好一開始就把這些state對象都創建出來，也沒有必要銷毀它們，因為可能很快將再次用到它們

　　2、上面的例子中，為每個Context對象都創建了一組state對象，實際上這些state對象之間是可以共用的，各Context對象可以共用一個state對象，這也是享元模式的應用場景之一

　　狀態模式和策略模式像一對雙胞胎，它們都封裝了一系列的演算法或者行為，它們的類圖看起來幾乎一模一樣，但在意圖上有很大不同，因此它們是兩種迥然不同的模式。策略模式和狀態模式的相同點是，它們都有一個上下文、一些策略或者狀態類，上下文把請求委托給這些類來

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在Tomcat部署多項目，通過Nginx反向代理分別配置二級功能變數名稱的流程
    購買功能變數名稱。示例：example.com 設置多個二級功能變數名稱。如圖： 配置tomcat文件： 修改tomcat/conf目錄下的server.xml文件： 在tomcat根目錄下，複製webapps文件夾，併在tomcat根目錄下粘貼兩份，分別命名為：webapps1和webapps2。註意此文件夾名稱 ...
  • mongoDB之數據類型
    mongoDB之數據類型 Object ID ：文檔的id String： 字元串，最常用，必須是utf-8 Boolean：布爾值，true 或者false Integer：整數 Double：浮點數 Arrays：數組或者列表，多個值存儲到一個鍵 Object：用於嵌入文檔，即一個值為一個文檔 ...
  • mongoDB之資料庫操作
    mongoDB中的資料庫操作 查看資料庫名稱： db 查看所有資料庫： show dbs 切換資料庫： use 資料庫名稱 註意：如果資料庫不存在，則指向資料庫，但不會創建。直到插入數據或者是創建集合時資料庫才會創建； 資料庫的刪除： db.dropDatabase(); ...
  • 《資料庫系統概念》12-文件的組織
    一個資料庫被映射到多個不同的文件，這些文件由底層的操作系統來維護。每個文件分成定長的存儲單元，稱為塊(bolck)，塊是存儲分配和數據傳輸的基本單元。資料庫預設的塊在4-8k之間。通常沒有記錄比塊更大（圖片音頻等大文件先不考慮），此外還要求每條記錄保存在單個塊中。 一、定長記錄instructor表 ...
  • 最好用的MongoDB GUI - LivingMongo
    LivingMongo是一個mongodb資料庫的GUI操作系統，支持對數據欄位的修改、數據搜索、集合的分類、索引管理、空間統計、慢查詢等 demo地址 : http://living-mongo.kupposhadow.com使用介紹 : 開源MongoDB GUI - LivingMongogi ...
  • 大數據學習系列之四 ----- Hadoop+Hive環境搭建圖文詳解(單機)
    引言 在 "大數據學習系列之一 Hadoop環境搭建(單機)" 成功的搭建了Hadoop的環境，在 "大數據學習系列之二 HBase環境搭建(單機)" 成功搭建了HBase的環境以及相關使用介紹。本文主要講解如何搭建Hadoop+Hive的環境。 一、環境準備 1，伺服器選擇 本地虛擬機 操作系統: ...
  • Android Activity的任務棧和四大啟動模式
    在安卓系統中預設每次啟動一個Activity時，系統會創建一個實例，並按照先進後出的原則放入任務棧中，當我們按back鍵時，就會有一個activity從任務棧頂移除，重覆下去，直到任務棧為空，系統就會回收這個任務棧。但是這樣以來，系統多次啟動同一個Activity時就會重覆創建多個實例，這種做法顯然... ...
  • Android ListView與RecycleView的對比使用
    ListView，就如其名，是用來顯示列表的一種View，而RecycleView，是其的加強版，今天帶來的是這兩個幾乎具有相同的功能的對比使用 先從ListView說起吧 ListView： 1.在佈局文件中使用ListView，併為其定義一個id，方便我們之後的調用，寬高與父控制項相同 2.準備數 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類