摘要：介一回聊狀態(tài)模式，官方描述允許一個對象在其內(nèi)部狀態(tài)改變時改變它的行為。有限狀態(tài)機有限狀態(tài)機是一個非常有用的模型，可以模擬世界上大部分事物。這個是官方說法，簡單說，她有三個特征，狀態(tài)總數(shù)是有限的。，任一時刻，只處在一種狀態(tài)之中。

上一回聊了聊組合模式（Composite），用組合模式模擬了個圖片庫，聊了遞歸。
介一回聊狀態(tài)模式（State），官方描述允許一個對象在其內(nèi)部狀態(tài)改變時改變它的行為。略抽象，不過看了代碼會覺得比較簡單，直接看代碼先。

狀態(tài)模式中引入了抽象狀態(tài)類和具體狀態(tài)類，這里會用到之前講過的接口模式，不清楚的盆友可以看系列05，這個例子是我根據(jù)一段PHP的狀態(tài)模式代碼改的JS版本，如下：

var c = console,d = document;
window.onload = function(){
    // 定義了一個state接口,倆方法handle，display
    var State = new Interface("State",["handle","display"]);
    // 這里的Context是環(huán)境類，或者稱為上下文類，是擁有多種狀態(tài)的對象。
    var Context = function(state){
        // 狀態(tài)變化的屬性
        var _state = null;
        var _self = this;
        // 這里是設置狀態(tài)對象
        this.setState = function(state){
            _self._state = state;
        }
        // 調(diào)用狀態(tài)對象的方法  
        this.request = function(){
            _self._state.display();
            _self._state.handle(_self);
        }
        this.setState(state);
        
    }
    
    // 具體狀態(tài)類，抽象狀態(tài)類的子類
    var StateA = function(){
        // 檢測接口，不明白的童鞋看系列05
        Interface.ensureImplements(this,State);
    }
    // 狀態(tài)類的實現(xiàn)
    StateA.prototype = {
        constructor:StateA,
        // 這里的context指向的是Context
        handle:function(context){
            // 設置為其他狀態(tài)
            context.setState(new StateB());
        },
        // 具體實現(xiàn)的方法
        display:function(){
            c.log("StateA");
        }
    }
    // StateB跟StateA一樣，只是狀態(tài)設置不同
    var StateB = function(){    
        Interface.ensureImplements(this,State);
    }
    StateB.prototype = {
        constructor:StateB,
        handle:function(context){
            context.setState(new StateC());
        },
        display:function(){
            c.log("StateB");
        }
    }
    // StateC跟StateB一樣，只是狀態(tài)設置不同
    var StateC = function(){    
        Interface.ensureImplements(this,State);
    }
    StateC.prototype = {
        constructor:StateC,
        handle:function(context){
            context.setState(new StateA());
        },
        display:function(){
            c.log("StateC");
        }
    }
    // 測試代碼
    var o = new Context(new StateB());
    o.request();    // StateB
    o.request();    // StateC
    o.request();    // StateA
    o.request();    // StateB
    o.request();    // StateC
    o.request();    // StateA
} 

之所以把這個例子改成JS版本，是因為這個例子比較簡單，直觀。在實際使用時，在一個狀態(tài)類中可能包含多個業(yè)務方法，如果在具體狀態(tài)類中某些業(yè)務方法的實現(xiàn)完全相同，可以將這些方法移至抽象狀態(tài)類，實現(xiàn)代碼的復用。

狀態(tài)模式在工作流或游戲等各種系統(tǒng)中應用比較廣泛，下面的例子是一個簡單的訂單審批流程，根據(jù)一段Java的狀態(tài)模式代碼改的JS版本，如下:

var c = console,w = window;
w.onload = function(){
    // 業(yè)務申請方
    function Obj() {
        // 申請方
        this.obj = "";
        // 日期
        this.sDate = "";
        // 金額
        this.aMount = "";
        // 結果
        this.res = "";
    }

    // 跟上一個例子一樣，Context狀態(tài)管理類
    var Context = function (s) {
        this.state = null;
        this.run = function (s) {
            this.state = s;
        };
        this.run(s);
    }

    // 第一層級審核
    var StateA = function (o) {
        // 這一堆就是一個簡單交互
        var reply = w.prompt("同意請按1，不同意請按任意鍵");
        var res = reply == 1 ? "同意" : "不同意";
        var state;
        o.res = res;
        // 一堆打印信息
        c.log(
            "平臺審核中..." + 
            "申請方：" + o.obj + " " + 
            "日期：" + o.sDate + " " + 
            "金額：" + o.aMount + " " + 
            "平臺審核結果：" + o.res
            );
        // 判斷是否同意，如果不同意直接走Notice提示不同意
        if (reply == 1) {
            // 這里就是走第二層級
            state = new StateB(o);
        } else {
            state = new Notice(o);
        }

        return state;
    }
    
    // 第二層級審核，跟第一層級差不多
    var StateB = function (o) {
        var reply = w.prompt("同意請按1，不同意請按任意鍵");
        var res = reply == 1 ? "同意" : "不同意";
        var state;
        o.res = res;
        c.log(
            "商家審核中..." + 
            "申請方：" + o.obj + " " + 
            "日期：" + o.sDate + " " + 
            "金額：" + o.aMount + " " + 
            "商家審核結果：" + o.res
            );
        // 因為是最終審核，所以直接走Notice提示
        state = new Notice(o);
        return state;
    }

    // Notice通知類，打印信息
    var Notice = function (o) {
        c.log("申請方：" + o.obj + "的流程結束，審核結果為：" + o.res);
    }

    // 測試
    var o = new Obj();
    o.obj = "大衛(wèi)";
    o.sDate = "圣誕節(jié)";
    o.aMount = 250;
    
    var req = new Context(new StateA(o));
    req.run();
}; 

這個例子跟上一個例子都是狀態(tài)模式的一個很好體現(xiàn)，這個例子更貼近實際開發(fā)，
申請方提交訂單，平臺訂單審核，審核通過更改狀態(tài)為審核通過，然后繼續(xù)商家中心審核，通過與不通過都流程結束，直接調(diào)用提示類提示結果。

有限狀態(tài)機（Finite-state machine）是一個非常有用的模型，可以模擬世界上大部分事物。這個是官方說法，簡單說，她有三個特征：
1，狀態(tài)總數(shù)（state）是有限的。
2，任一時刻，只處在一種狀態(tài)之中。
3，某種條件下，會從一種狀態(tài)轉變（transition）到另一種狀態(tài)。
直接代碼吧，很直觀的，根據(jù)網(wǎng)上的交通燈例子改的，如下：:

var c = console,d = document;
window.onload = function(){
    var Light = function() {
        // 設置默認狀態(tài)，關燈
        this.currentState = State.off;
        this.lightSwitch = null;
    };

    Light.prototype.run = function() {
        var _self = this;
        // 這里是開關
        var lightSwitch = d.createElement("button");
        // 這個canvas就當是一盞燈了
        var cvs = d.createElement("canvas");
        cvs.width = "200";
        cvs.height = "200";
        cvs.style.backgroundColor = "lightblue";
        cvs.style.borderRadius = "50%";
        cvs.style.display = "block";
        // 初始值是開燈
        lightSwitch.innerHTML = "開燈";
        // Dom方法appendChild沒什么好說的
        this.lightSwitch = d.body.appendChild(lightSwitch);
        this.cvs = d.body.appendChild(cvs);
        // 開關的點擊事件
        this.lightSwitch.onclick = function() {
            // 委托請求給State狀態(tài)機，這里分兩步走，第一步是_self.currentState，第二步是btnPress，call用來指向將作用域指向本身
            _self.currentState.btnPress.call(_self);
        };
    };

    // 這里就是多種狀態(tài)間的切換，這里只寫了兩種，開關燈
    var State = {
        off: {
            btnPress: function() {
                this.lightSwitch.innerHTML = "關燈";
                this.cvs.style.display = "none";
                this.currentState = State.on;
            }
        },
        on: {
            btnPress: function() {
                this.lightSwitch.innerHTML = "開燈";
                this.cvs.style.display = "block";
                this.currentState = State.off;
            }
        }
    };
    // 測試代碼
    var light = new Light();
    light.run(); 
};

這里就是多種狀態(tài)間的切換，這里只寫了兩種，開關燈，好玩兒一點可以換canvas的顏色，做變亮變暗的狀態(tài)。

裝個逼，雖然最近熱映的《尋龍訣》好看，還是要推薦一個阿湯哥的老電影《遺忘戰(zhàn)境》~~

這一回聊的狀態(tài)模式，有限狀態(tài)機，狀態(tài)模式可以允許客戶端改變狀態(tài)的轉換行為，而狀態(tài)機則是能夠自動改變狀態(tài)~。
下面的內(nèi)容，聊一下狀態(tài)管理，這里拿一個極具審美（因為作者經(jīng)常提審美^_^）的JS庫Vue.js的官方例子來說。

Vue官方解釋是集中管理狀態(tài)更易于理解狀態(tài)將怎樣變化。組件仍然可以擁有和管理它的私有狀態(tài)?？催^上面的例子，看這個應該很好理解，繼續(xù)寫：

// 這里的store里面放了所有的action
var store = {
  state: {
    message: "Hello!"
  },
  // 這里的action則用來修改store的狀態(tài)state
  actionA: function () {
    this.state.message = "action A triggered"
  },
  // 這里跟上面的例子很像
  actionB: function () {
    this.state.message = "action B triggered"
  }
}
// 這個new Vue暫時不用管，簡單的解釋下吧，通過構造函數(shù)Vue創(chuàng)建一個Vue的根實例
var vmA = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

var vmB = new Vue({
  data: {
    privateState: {},
    sharedState: store.state
  }
})

這是vue.js官網(wǎng)上的一個例子，最近很火的框架react，vue.js在說flux單向數(shù)據(jù)流，其實就是在維護狀態(tài)。

這里啰嗦一下，有盆友建議說聊一下AngularJS，在系列04里有聊過一點點ng1.x的源碼，也模擬了一下，并且說過可以的話，分享讀過的Angularjs源碼段子。介于前端框架風起云涌，其實，對Angular有興趣的盆友，可以直接從Angular2開始，如果是學習源碼的話，Vue.js的源碼讀起來會更有美感（因為作者反復提審美^_^）~~

這一回，主要聊了狀態(tài)模式，有限狀態(tài)機，介紹了下Vue.js這個庫。
下一回，聊一聊JS的鏈式調(diào)用，沒錯，肯定會模擬框架，庫什么的。

客觀看完點個贊，推薦推薦唄，嘿嘿~~

注：此系飛狐原創(chuàng)，轉載請注明出處