文章出處

前面的話

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

 

初識狀態模式

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

　　現在用代碼來描述這個場景，首先定義一個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對象，這也是享元模式的應用場景之一

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

　　它們之間的區別是策略模式中的各個策略類之間是平等又平行的，它們之間沒有任何聯系，所以客戶必須熟知這些策略類的作用，以便客戶可以隨時主動切換算法；而在狀態模式中，狀態和狀態對應的行為是早已被封裝好的，狀態之間的切換也早被規定完成，“改變行為”這件事情發生在狀態模式內部。對客戶來說，并不需要了解這些細節。這正是狀態模式的作用所在

 

狀態機

　　狀態模式是狀態機的實現之一，但在javascript這種“無類”語言中，沒有規定讓狀態對象一定要從類中創建而來。另外一點，javascript可以非常方便地使用委托技術，并不需要事先讓一個對象持有另一個對象。下面的狀態機選擇了通過Function.prototype.call方法直接把請求委托給某個字面量對象來執行

　　下面改寫電燈的例子，來展示這種更加輕巧的做法：

var Light = function(){
    this.currState = FSM.off; // 設置當前狀態
    this.button = null;
};

Light.prototype.init = function(){
    var button = document.createElement( 'button' ),
    self = this;
    button.innerHTML = '已關燈';
    this.button = document.body.appendChild( button );
    this.button.onclick = function(){
        self.currState.buttonWasPressed.call( self ); // 把請求委托給FSM 狀態機
    }
};
var FSM = {
    off: {
        buttonWasPressed: function(){
            console.log( '關燈' );
            this.button.innerHTML = '下一次按我是開燈';
            this.currState = FSM.on;
        }
    },
    on: {
        buttonWasPressed: function(){
            console.log( '開燈' );
            this.button.innerHTML = '下一次按我是關燈';
            this.currState = FSM.off;
        }
    }
};
var light = new Light();
light.init();

　　接下來嘗試另外一種方法，即利用下面的delegate函數來完成這個狀態機編寫。這是面向對象設計和閉包互換的一個例子，前者把變量保存為對象的屬性，而后者把變量封閉在閉包形成的環境中：

var delegate = function( client, delegation ){
    return {
        buttonWasPressed: function(){ // 將客戶的操作委托給delegation 對象
            return delegation.buttonWasPressed.apply( client, arguments );
        }
    }
};

var FSM = {
    off: {
        buttonWasPressed: function(){
            console.log( '關燈' );
            this.button.innerHTML = '下一次按我是開燈';
            this.currState = this.onState;
        }
    },
    on: {
        buttonWasPressed: function(){
            console.log( '開燈' );
            this.button.innerHTML = '下一次按我是關燈';
            this.currState = this.offState;
        }
    }
};

var Light = function(){
    this.offState = delegate( this, FSM.off );
    this.onState = delegate( this, FSM.on );
    this.currState = this.offState; // 設置初始狀態為關閉狀態
    this.button = null;
};

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

　　其實還有另外一種實現狀態機的方法，這種方法的核心是基于表驅動的。可以在表中很清楚地看到下一個狀態是由當前狀態和行為共同決定的。這樣一來，就可以在表中查找狀態，而不必定義很多條件分支

　　在實際開發中，很多場景都可以用狀態機來模擬，比如一個下拉菜單在hover動作下有顯示、懸浮、隱藏等狀態；一次TCP請求有建立連接、監聽、關閉等狀態；一個格斗游戲中人物有攻擊、防御、跳躍、跌倒等狀態

　　狀態機在游戲開發中也有著廣泛的用途，特別是游戲AI的邏輯編寫。游戲主角有走動、攻擊、防御、跌倒、跳躍等多種狀態。這些狀態之間既互相聯系又互相約束。比如在走動的過程中如果被攻擊，就會由走動狀態切換為跌倒狀態。在跌倒狀態下，既不能攻擊也不能防御。同樣，也不能在跳躍的過程中切換到防御狀態，但是可以進行攻擊。這種場景就很適合用狀態機來描述。代碼如下：

var FSM = {
    walk: {
        attack: function(){
            console.log( '攻擊' );
        },
        defense: function(){
            console.log( '防御' );
        },
        jump: function(){
            console.log( '跳躍' );
        }
    },
    attack: {
        walk: function(){
            console.log( '攻擊的時候不能行走' );
        },
        defense: function(){
            console.log( '攻擊的時候不能防御' );
        },
        jump: function(){
            console.log( '攻擊的時候不能跳躍' );
        }
    }
}

 


文章列表



Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄